Dans le développement web moderne, il est souvent crucial d'identifier l'environnement d'exécution du client pour assurer une compatibilité optimale ou proposer des fonctionnalités spécifiques (comme le téléchargement d'une application mobile). Bien que la détection de fonctionnalités (feature detection) soit généralement préférée, l'analyse de la chaîne navigator.userAgent reste indispensable pour cibler des navigateurs précis ou des applicatoins intégrées comme WeChat.

Identification du navigateur

L'exemple suivant utilise une approche basée sur une liste de motifs (patterns) pour isoler le navigateur utilisé. L'ordre de détection est important, car certains navigateurs incluent les noms de leurs conucrrents dans leur chaîne User-Agent pour des raisons de compatibilité.

/**
 * Identifie le navigateur courant
 * @returns {string} Nom du navigateur (ex: 'chrome', 'safari', 'wechat')
 */
function identifierNavigateur() {
    const agent = window.navigator.userAgent;
    
    const signatures = [
        { id: 'wechat', regex: /MicroMessenger/i },
        { id: 'weibo', regex: /Weibo/i },
        { id: 'ucbrowser', regex: /UCBrowser/i },
        { id: 'sogou', regex: /MetaSr|Sogou/i },
        { id: 'xiaomi', regex: /MiuiBrowser/i },
        { id: 'baidu', regex: /Baidu|BIDUBrowser/i },
        { id: 'edge', regex: /Edge|Edg/i },
        { id: 'ie11', regex: /Trident.*rv:11\./ },
        { id: 'ie', regex: /MSIE|compatible/i },
        { id: 'firefox', regex: /Firefox/i },
        { id: 'opera', regex: /Opera|OPR/i },
        { id: 'chrome', regex: /Chrome|CriOS/i },
        { id: 'safari', regex: /Safari/i }
    ];

    for (const item of signatures) {
        if (item.regex.test(agent)) {
            // Cas particulier : Safari et Chrome partagent souvent des mots-clés
            if (item.id === 'safari' && /Chrome|CriOS/i.test(agent)) {
                continue;
            }
            return item.id;
        }
    }

    return 'inconnu';
}

Détection de la plateforme (Système d'exploitation)

Pour distinguer un appareil mobile d'un ordinateur de bureau ou identifier spécifiquement iOS et Android, nous pouvons analyser les mots-clés système présents dans l'agent utilisateur.

/**
 * Détermine le système d'exploitation du client
 * @returns {string} Nom de l'OS (ex: 'android', 'ios', 'windows', 'macos')
 */
function detecterOS() {
    const ua = navigator.userAgent;
    const platform = navigator.platform;

    if (/android/i.test(ua)) {
        return 'android';
    }
    
    if (/iPad|iPhone|iPod/.test(ua) || (platform === 'MacIntel' && navigator.maxTouchPoints > 1)) {
        return 'ios';
    }

    if (/Windows/i.test(ua)) {
        return 'windows';
    }

    if (/Macintosh|MacIntel/i.test(ua)) {
        return 'macos';
    }

    if (/Linux/i.test(ua)) {
        return 'linux';
    }

    return 'autre';
}

Cas d'usage pratique : Détection WebView

Une application courante consiste à vérifier si l'utilisateur consulte le site depuis l'application WeChat ou un appareil mobile spécifique pour afficher une bannière adaptée.

const clientEnv = {
    browser: identifierNavigateur(),
    os: detecterOS()
};

if (clientEnv.browser === 'wechat') {
    console.log("L'utilisateur est sur l'application WeChat.");
}

if (clientEnv.os === 'ios') {
    console.log("Affichage du bouton de téléchargement App Store.");
}