5 методов определения браузера через JavaScript: от классики до тестов

const userAgentString = navigator.userAgent;
console.log(userAgentString);

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1

function detectBrowser() {
const userAgent = navigator.userAgent;

// Определяем браузер
if (userAgent.indexOf("Firefox") > -1) {
return "Firefox";
} else if (userAgent.indexOf("SamsungBrowser") > -1) {
return "Samsung Browser";
} else if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {
return "Opera";
} else if (userAgent.indexOf("Trident") > -1) {
return "Internet Explorer";
} else if (userAgent.indexOf("Edge") > -1) {
return "Microsoft Edge (Legacy)";
} else if (userAgent.indexOf("Edg") > -1) {
return "Microsoft Edge (Chromium)";
} else if (userAgent.indexOf("Chrome") > -1) {
return "Chrome";
} else if (userAgent.indexOf("Safari") > -1) {
return "Safari";
} else {
return "Unknown";
}
}

console.log("Вы используете: " + detectBrowser());

function getBrowserInfo() {
const userAgent = navigator.userAgent;
let browserName;
let browserVersion;

// Chrome
if (/Chrome/.test(userAgent) && !/Chromium|Edge|Edg|OPR|SamsungBrowser/.test(userAgent)) {
browserName = "Chrome";
browserVersion = userAgent.match(/Chrome\/(\d+\.\d+)/)[1];
}
// Firefox
else if (/Firefox/.test(userAgent)) {
browserName = "Firefox";
browserVersion = userAgent.match(/Firefox\/(\d+\.\d+)/)[1];
}
// Safari
else if (/Safari/.test(userAgent) && !/Chrome/.test(userAgent)) {
browserName = "Safari";
browserVersion = userAgent.match(/Version\/(\d+\.\d+)/)[1];
}
// Edge (Chromium-based)
else if (/Edg/.test(userAgent)) {
browserName = "Microsoft Edge";
browserVersion = userAgent.match(/Edg\/(\d+\.\d+)/)[1];
}
// Edge (Legacy)
else if (/Edge/.test(userAgent)) {
browserName = "Microsoft Edge (Legacy)";
browserVersion = userAgent.match(/Edge\/(\d+\.\d+)/)[1];
}
// Internet Explorer
else if (/Trident/.test(userAgent)) {
browserName = "Internet Explorer";
// IE 11 не имеет явного указания версии в userAgent
browserVersion = userAgent.match(/rv:(\d+\.\d+)/) ? userAgent.match(/rv:(\d+\.\d+)/)[1] : "11.0";
}
// Opera
else if (/OPR/.test(userAgent) || /Opera/.test(userAgent)) {
browserName = "Opera";
browserVersion = userAgent.match(/(?:OPR|Opera)\/(\d+\.\d+)/)[1];
} else {
browserName = "Unknown";
browserVersion = "0.0";
}

return {
name: browserName,
version: browserVersion
};
}

const browser = getBrowserInfo();
console.log(`Браузер: ${browser.name} ${browser.version}`);

function getModernBrowserInfo() {
// Проверяем поддержку navigator.userAgentData (современный API)
if (navigator.userAgentData) {
// Получаем базовую информацию
const brands = navigator.userAgentData.brands;
const platform = navigator.userAgentData.platform;

console.log("Платформа:", platform);

// Проходим по всем брендам и ищем реальный браузер
for (const brand of brands) {
// Исключаем служебные бренды
if (brand.brand !== "Not A;Brand") {
console.log(`Браузер: ${brand.brand}, версия: ${brand.version}`);
}
}

// Можно получить более детальную информацию через метод getHighEntropyValues
navigator.userAgentData.getHighEntropyValues(['architecture', 'model', 'platformVersion', 'fullVersionList'])
.then(ua => {
console.log("Полная версия браузера:", ua.fullVersionList);
console.log("Архитектура:", ua.architecture);
console.log("Устройство:", ua.model);
console.log("Версия ОС:", ua.platformVersion);
});
} else {
// Для браузеров, не поддерживающих userAgentData
console.log("navigator.userAgentData не поддерживается в этом браузере");
// Используем fallback на userAgent
return getBrowserInfo(); // метод из предыдущего примера
}
}

# npm
npm install bowser

# yarn
yarn add bowser

import Bowser from 'bowser';

const browserInfo = Bowser.getParser(window.navigator.userAgent);

// Получение базовой информации
console.log(browserInfo.getBrowser());
console.log(browserInfo.getOS());
console.log(browserInfo.getPlatform());

// Проверка определённой версии браузера
if(browserInfo.satisfies({chrome: '>88'})) {
console.log('Функция доступна в вашем браузере');
} else {
console.log('Обновите браузер для использования этой функции');
}

{
name: "Chrome",
version: "91.0.4472.124"
}

npm install detectorjs

import Detector from 'detectorjs';

const detector = new Detector(window.navigator.userAgent);

// Получение информации о браузере
console.log(detector.browser.name); // "Chrome"
console.log(detector.browser.version); // "91.0.4472.124"

// Информация об OS
console.log(detector.os.name); // "Windows"
console.log(detector.os.version); // "10"

// Проверка типа устройства
console.log(detector.device.type); // "desktop"

import Bowser from 'bowser';

function initializeApplication() {
const browser = Bowser.getParser(window.navigator.userAgent);

// Проверка поддержки необходимых функций для полной версии
if (browser.satisfies({
chrome: ">80",
firefox: ">75",
safari: ">13",
edge: ">80"
})) {
loadFullVersion();
}
// Safari на iOS требует особого подхода к некоторым API
else if (browser.getBrowserName() === 'Safari' && browser.getPlatformType() === 'mobile') {
loadIOSOptimizedVersion();
}
// Для старых браузеров загружаем облегченную версию
else {
loadLegacyVersion();
}

// Дополнительная проверка функций независимо от браузера
if (!window.IntersectionObserver) {
loadIntersectionObserverPolyfill();
}
}

initializeApplication();

// Проверка поддержки Fetch API
if (window.fetch) {
// Используем fetch
fetch('/api/data')
.then(response => response.json())
.then(data => console.log(data));
} else {
// Fallback на XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onload = function() {
if (xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send();
}

// Проверка поддержки WebP
function checkWebPSupport() {
return new Promise(resolve => {
const webP = new Image();
webP.onload = webP.onerror = function() {
resolve(webP.height === 2);
};
webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
});
}

checkWebPSupport().then(hasSupport => {
if (hasSupport) {
console.log('WebP поддерживается');
// Загружаем WebP изображения
} else {
console.log('WebP не поддерживается');
// Загружаем JPEG или PNG изображения
}
});

# Установка
npm install modernizr

<script src="path/to/modernizr.js"></script>

if (Modernizr.webp) {
// Поддержка WebP
loadWebPImages();
} else {
// Нет поддержки WebP
loadJpegImages();
}

if (Modernizr.flexbox) {
// Используем Flexbox для лейаута
enableFlexboxLayout();
} else {
// Fallback на float или другой подход
enableLegacyLayout();
}

// Проверка нескольких функций
if (Modernizr.cssgrid && Modernizr.flexgap) {
// Полная поддержка современных сеток
enableAdvancedLayout();
} else if (Modernizr.cssgrid) {
// Есть Grid, но нет gap
enableGridWithoutGap();
} else {
// Нет поддержки Grid
enableFallbackLayout();
}

import Bowser from 'bowser';

// Определяем браузер для сбора аналитики
const browser = Bowser.getParser(window.navigator.userAgent);
const browserInfo = {
name: browser.getBrowserName(),
version: browser.getBrowserVersion(),
os: browser.getOSName()
};

// Отправляем данные о браузере в аналитику
sendAnalytics('browser_info', browserInfo);

// Используем Feature Detection для фактической функциональности
function initApp() {
// Проверка поддержки основных API
const supports = {
serviceWorker: 'serviceWorker' in navigator,
webp: false, // Будет определено асинхронно
webgl: (function() {
try {
return !!window.WebGLRenderingContext && !!document.createElement('canvas').getContext('experimental-webgl');
} catch(e) {
return false;
}
})(),
touchEvents: 'ontouchstart' in window,
passiveEvents: (function() {
let supportsPassive = false;
try {
const opts = Object.defineProperty({}, 'passive', {
get: function() {
supportsPassive = true;
return true;
}
});
window.addEventListener('testpassive', null, opts);
window.removeEventListener('testpassive', null, opts);
} catch (e) {}
return supportsPassive;
})()
};

// Проверяем поддержку WebP асинхронно
checkWebPSupport().then(hasSupport => {
supports.webp = hasSupport;

// Safari на iOS имеет баг с определенными API даже если Feature Detection показывает поддержку
const isSafariIOS = browser.getBrowserName() === 'Safari' && browser.getOSName() === 'iOS';
if (isSafariIOS && supports.serviceWorker) {
// Известная проблема с Service Worker в Safari iOS
console.warn('Safari iOS имеет проблемы с Service Worker');
// Специфичный workaround для Safari iOS
}

// Инициализируем приложение с учетом поддерживаемых функций
initializeWithFeatures(supports);
});
}

initApp();