Navigator.userAgent: примеры (JAVASCRIPT)

Базовые примеры использования

Получение полной строки user agent:

console.log(navigator.userAgent);

// Пример вывода: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36...'

Проверка на наличие определенного браузера:

const isChrome = navigator.userAgent.indexOf('Chrome') > -1;
console.log(isChrome);

// true или false в зависимости от браузера

Определение операционной системы:

const userAgent = navigator.userAgent;
let os = 'Неизвестная ОС';

if (userAgent.indexOf('Win') !== -1) os = 'Windows';
if (userAgent.indexOf('Mac') !== -1) os = 'macOS';
if (userAgent.indexOf('Linux') !== -1) os = 'Linux';
if (userAgent.indexOf('Android') !== -1) os = 'Android';
if (userAgent.indexOf('like Mac') !== -1) os = 'iOS';

console.log(os);

// Вывод зависит от системы: 'Windows', 'macOS', 'Linux' и т.д.

Альтернативные методы в JavaScript

navigator.platform — возвращает тип платформы, на которой работает браузер. Менее подробный, но более прямой способ определения ОС.

console.log(navigator.platform); // 'Win32', 'MacIntel', 'Linux x86_64'

navigator.vendor — возвращает название производителя браузера. Полезно для различения браузеров на одном движке.

console.log(navigator.vendor); // 'Google Inc.', 'Apple Computer, Inc.'

Обнаружение возможностей (Feature Detection) — современный подход, который проверяет поддержку конкретных API.

const supportsWebGL = 'WebGLRenderingContext' in window;
const supportsLocalStorage = 'localStorage' in window;

Feature detection предпочтительнее при проверке поддержки технологий, тогда как userAgent больше подходит для сбора аналитики или обработки известных багов в конкретных версиях.

Типичные ошибки и проблемы

1. Полное доверие к userAgent для критической логики. Строку можно подделать в браузере или на сервере.

// Ненадежный код
if (navigator.userAgent.indexOf('Chrome') > -1) {
    // Код только для Chrome
} else {
    alert('Пожалуйста, используйте Chrome!'); // Блокировка других браузеров
}

2. Использование устаревших проверок. Браузеры эволюционируют, и старые строки могут не работать.

// Устаревшая проверка Internet Explorer
if (navigator.userAgent.indexOf('MSIE') > -1) {
    // Код для IE, но современные IE могут не содержать 'MSIE'
}

3. Сложный парсинг без учета регистра или вариаций.

// Чувствительность к регистру
if (navigator.userAgent.indexOf('chrome') > -1) { // 'chrome' в нижнем регистре
    // Может не сработать, так как в строке 'Chrome' с большой буквы
}

4. Предположение, что свойство всегда существует. В некоторых средах (Node.js, Web Workers) navigator может быть недоступен.

// Ошибка в среде без navigator
if (typeof navigator !== 'undefined') {
    const ua = navigator.userAgent; // Без проверки вызовет ошибку
}

Современные изменения и тенденции

В последние годы браузеры начали процесс заморозки (freezing) и упрощения строк user agent. Chrome, Firefox и другие планируют сокращать информацию в строке для увеличения приватности пользователей.

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

Введен User-Agent Client Hints — новый API, который позволяет запрашивать только необходимую информацию о браузере, а не получать всю строку сразу. Это более безопасный и приватный подход.

// Пример использования Client Hints
async function getHighEntropyValues() {
    const hints = await navigator.userAgentData.getHighEntropyValues([
        'platform',
        'platformVersion',
        'architecture'
    ]);
    console.log(hints);
}

Разработчикам рекомендуется постепенно переходить от анализа userAgent к использованию Client Hints и feature detection.

Расширенные примеры использования

Определение типа устройства с учетом современных реалий:

function getDeviceType() {
    const ua = navigator.userAgent;
    const isMobile = /Mobile|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua);
    const isTablet = /Tablet|iPad|PlayBook|Silk/i.test(ua) && !isMobile;
    
    if (isMobile) return 'mobile';
    if (isTablet) return 'tablet';
    return 'desktop';
}
console.log(getDeviceType());

// 'mobile', 'tablet' или 'desktop'

Определение бота поисковой системы:

function isSearchBot() {
    const botPatterns = [
        /Googlebot/i,
        /Bingbot/i,
        /Slurp/i,
        /DuckDuckBot/i,
        /Baiduspider/i,
        /YandexBot/i,
        /Sogou/i
    ];
    return botPatterns.some(pattern => pattern.test(navigator.userAgent));
}
console.log('Это бот:', isSearchBot());

Анализ версии браузера с использованием регулярных выражений:

function getBrowserVersion() {
    const ua = navigator.userAgent;
    let version = 'не определена';
    
    // Для Chrome
    const chromeMatch = ua.match(/Chrome\/([0-9.]+)/);
    if (chromeMatch && !ua.match(/Edg\//)) {
        version = `Chrome ${chromeMatch[1]}`;
    }
    
    // Для Firefox
    const firefoxMatch = ua.match(/Firefox\/([0-9.]+)/);
    if (firefoxMatch) {
        version = `Firefox ${firefoxMatch[1]}`;
    }
    
    // Для Safari
    const safariMatch = ua.match(/Version\/([0-9.]+).*Safari/);
    if (safariMatch && !chromeMatch) {
        version = `Safari ${safariMatch[1]}`;
    }
    
    return version;
}
console.log(getBrowserVersion());

Сбор аналитики о браузерах пользователей с обработкой исключений:

function collectBrowserAnalytics() {
    try {
        const data = {
            userAgent: navigator.userAgent,
            platform: navigator.platform || 'не определено',
            language: navigator.language || 'не определено',
            timestamp: new Date().toISOString()
        };
        
        // Отправка данных на сервер
        // fetch('/analytics', {method: 'POST', body: JSON.stringify(data)});
        
        return data;
    } catch (error) {
        console.warn('Не удалось собрать аналитику:', error);
        return null;
    }
}

Определение, работает ли браузер в режиме совместимости:

function isCompatibilityMode() {
    const ua = navigator.userAgent;
    // Проверка для IE
    if (ua.indexOf('Trident') > -1 && ua.indexOf('MSIE') === -1) {
        return 'Режим совместимости IE';
    }
    return 'Обычный режим';
}

Аналоги в других языках программирования

PHP: Информация о user agent доступна через суперглобальный массив $_SERVER.

$userAgent = $_SERVER['HTTP_USER_AGENT'];
echo $userAgent; // 'Mozilla/5.0 (Windows NT 10.0...)'

Python (Django/Flask): В веб-фреймворках user agent передается в заголовках запроса.

# Flask
from flask import request
user_agent = request.headers.get('User-Agent')

# Django
user_agent = request.META.get('HTTP_USER_AGENT')

C# (ASP.NET): Свойство доступно через объект запроса.

string userAgent = HttpContext.Current.Request.UserAgent;

Основное отличие — в серверных языках информация поступает из HTTP-заголовков, тогда как в JavaScript она получается из среды выполнения браузера. Серверные методы могут получать поддельные заголовки, как и клиентские.