Определение браузера пользователя: методы для 5 основных

Быстрый ответ

Для определения браузера используйте свойство navigator.userAgent и регулярные выражения JavaScript:

const ua = navigator.userAgent;

const isSafari = /safari/i.test(ua) && !/chrome/i.test(ua);
const isChrome = /chrome/i.test(ua) && !/edge/i.test(ua);
const isIE = /msie|trident/i.test(ua);
const isFirefox = /firefox/i.test(ua);
const isOpera = /opera|opr\//i.test(ua);

console.log(`Safari: ${isSafari}, Chrome: ${isChrome}, IE: ${isIE}, Firefox: ${isFirefox}, Opera: ${isOpera}`);

Профессиональный совет: Этот метод отлично подходит для корректировки интерфейса. Для критических функциональных элементов лучше использовать определение возможностей (feature detection), чтобы минимизировать вероятность ошибки.

Укрепляем понимание регулярных выражений

Важность своевременного обновления

В связи с регулярными обновлениями браузеров, которые влияют на строки userAgent и API, важно неукоснительно обновлять и тестировать скрипты определения браузера в различных его версиях.

Избегаем ошибок

Есть риск получения ложно-положительных результатов из-за схожести строк userAgent различных браузеров или внезапных изменений их поведения. Тщательное тестирование и бережное обновление помогут снизить этот риск.

Ускоряем работу

Определение браузера может замедлить работу приложения. Рассмотрите возможность кеширования результатов определения на время сессии пользователя, чтобы оптимизировать производительность.

Определение возможностей браузера: шаг вперёд

Что представляет собой определение возможностей?

Определение возможностей – это более точный метод понимания возможностей браузера, по сравнению с анализом строки userAgent. Библиотеки, такие как Modernizr, позволяют проверить определённые функции перед запуском кода, что повышает удобство использования.

Библиотеки на службе

При необходимости применяйте такие библиотеки как Bowser, Platform.js или is.js для более точного определения браузера. Это поможет поддерживать ваш код актуальным.

Корифей Internet Explorer

Для определения версий Internet Explorer может понадобиться условная компиляция. Для IE11 можно использовать выражение !!navigator.userAgent.match(/Trident.*rv\:11\./).

Визуализация

Примените уникальные свойства и методы JavaScript для определения каждого браузера:

| Браузер   | Уникальный метод или свойство для определения |
| --------- | -------------------------------------------- |
| Safari    | 🔍 `navigator.userAgent.match`               |
| Chrome    | 🗝️ `window.chrome`                           |
| IE        | 🔐 `-ms-scroll-limit` / `Atob`               |
| Firefox   | 🛠️ `InstallTrigger`                          |
| Opera     | 🎨 `window.opera`                            |

У каждого браузера есть своё "табельное знак", которое позволяет его идентифицировать.

Осваиваем сложные способы определения

Условное выполнение: проверенный временем метод

Условное исполнение кода для Internet Explorer позволяет обратиться к функционалу, предназначенному специально для этого браузера. Однако такой подход стоит использовать лишь в крайних случаях, особенно когда нужно поддерживать устаревший код.

Меняемся с браузером

Для создания устойчивого и гибкого кода, который будет надлежащим образом работать в различных браузерах, рекомендуется применять принцип прогрессивного улучшения с использованием библиотек, таких как Modernizr.

Оцениваем поддержку функционала

Всегда проверяйте актуальную информацию о поддержке тех или иных функций браузерами с помощью ресурсов вроде canIuse.com. Так вы сможете минимизировать необходимость определения браузера.

Полезные материалы

1. Can I use... Support tables for HTML5, CSS3, etc — Таблицы поддержки веб-функций различными браузерами.
2. Browser detection using the user agent – HTTP | MDN — Статья от Mozilla Developer Network об определении браузера.
3. How to detect Safari, Chrome, IE, Firefox and Opera browsers? – Stack Overflow — Обсуждение способов определения браузера на форуме Stack Overflow.
4. GitHub – bowser-js/bowser: a browser detector — Библиотека Bowser для точного определения браузера.
5. Browser Detection is Bad | CSS-Tricks — Аргументы в пользу отказа от использования определения браузера.
6. Javascript – Object detection — Почему предпочтение следует отдавать определению объектов, а не браузера.