Определение браузера и его версии с помощью JavaScript

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

В JavaScript наиболее частый подход к определению браузера состоит в анализе строки navigator.userAgent. Однако желательнее определять особенности браузера (feature detection), чем выполнять его прямую идентификацию. Приведем пример кода:

const ua = navigator.userAgent.toLowerCase();

const browser = {
  chrome: /chrome|chromium/.test(ua) && !/edg/.test(ua),
  edge: /edg/.test(ua),
  firefox: /firefox/.test(ua),
  safari: /^((?!chrome|android).)*safari/.test(ua),
  ie: /msie|trident/.test(ua)
};

console.log(browser);

Но имейте в виду, что значение userAgent может быть поддельным. Поэтому более надежным способом является определение возможностей браузера с использованием таких инструментов, как Modernizr.

Детальное определение: "почему" и "как"

Браузеры, такие как Yandex или Vivaldi, используют движки других браузеров, например Chromium, Gecko. Обнаружить их можно, используя схожий паттерн. В этом могут помочь и библиотеки типа Bowser, которые способны распознавать не только стационарные, но и мобильные браузеры.

import Bowser from "bowser";

const browser = Bowser.getParser(window.navigator.userAgent);
const isValidBrowser = browser.satisfies({
  chrome: ">80",
  firefox: ">70",
  safari: ">11.1"
});

console.log(isValidBrowser ? 'Браузер поддерживается' : 'Браузер не поддерживается');

Для определения возможностей браузера можно использовать свойство $.support из jQuery, которое предоставляет список функций, доступных в текущем браузере пользователя.

Сценарии "что если": устранение странностей и совместимость

Основной функционал должен быть доступен каждому пользователю независимо от того, включен JavaScript или нет. Также следует учесть и возможность подделки строк userAgent.

// Ваш код должен быть готов к неожиданностям, включая подделку userAgent

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

Дополнительные инструменты: внешние библиотеки

Усовершенствуйте определение userAgent с помощью внешних библиотек для получения более детальной информации о браузере пользователя.

fetch(`http://api.userstack.com/detect?access_key=YOUR_ACCESS_KEY&ua=${navigator.userAgent}`)
  .then(response => response.json())
  .then(data => console.log(data));

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

Написание устойчивого, уникального для браузера кода

Разработка детектора браузера должна быть проверена в различных средах, и должна собирать информацию не только о самом браузере, но и об операционной системе для точной настройки.

// Информация о браузере и ОС как ключ к кастомизации!
console.log(`Браузер: ${browser.name} Версия: ${browser.version}`);
console.log(`Операционная система: ${browser.os}`);

Целью является гарантировать стабильное функционирование вашего сайта для всех пользователей.

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

Обнаружение браузера можно сравнить с паспортным контролем:

Также важно осуществлять подтверждение идентификации:

// Добро пожаловать в клуб обнаружения!
const browser = navigator.userAgent;

if (browser.includes("Chrome")) {
  console.log("Обнаружен Chrome!");
} else if (browser.includes("Firefox")) {
  console.log("Обнаружен Firefox!");
} // ...

🛂🌐✈️: Наша цель – создать веб-пространство, доступное для всех.

Примечание: Определение возможностей предпочтительнее для создания органичного и стабильного веб-пространства!

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

1. Сайт "Can I use..."
2. Обнаружение браузера...
3. Документация Modernizr
4. Detect.js
5. User-Agent – HTTP | MDN
6. userstack