Comment détecter les navigateurs Safari, Chrome, IE, Firefox et Opera?

J'ai 5 extensions / extensions pour FF, Chrome, IE, Opera et Safari.

Comment puis-je reconnaître le navigateur de l'utilisateur et rediriger (une fois qu'un bouton d'installation a été cliqué) pour télécharger l'addon correspondant?

La recherche sur Google d'une détection fiable du navigateur entraîne souvent la vérification de la chaîne de l'agent utilisateur. Cette méthode n'est pas fiable, car il est trivial d'usurper cette valeur.
J'ai écrit une méthode pour détecter les navigateurs en tapant du canard .

N'utilisez la méthode de détection du navigateur que si elle est vraiment nécessaire, par exemple en affichant des instructions spécifiques au navigateur pour installer une extension. Utilisez la détection des fonctionnalités lorsque cela est possible.

Démo: https://jsfiddle.net/6spj1059/

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;


var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isEdgeChromium: ' + isEdgeChromium + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;

Analyse de fiabilité

La méthode précédente dépendait des propriétés du moteur de rendu ( -moz-box-sizinget -webkit-transform) pour détecter le navigateur. Ces préfixes seront finalement supprimés, afin de rendre la détection encore plus robuste, je suis passé à des caractéristiques spécifiques au navigateur:

• Internet Explorer: compilation conditionnelle de JScript (jusqu'à IE9) et document.documentMode.
• Edge: dans les navigateurs Trident et Edge, l'implémentation de Microsoft expose le StyleMediaconstructeur. L'exclusion de Trident nous laisse avec Edge.
• Edge (basé sur le chrome): L'agent utilisateur inclut la valeur "Edg / [version]" à la fin (ex: "Mozilla / 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit / 537.36 (KHTML, comme Gecko) Chrome / 80.0.3987.16 Safari / 537.36 Edg / 80.0.361.9 ").
• Firefox: API de Firefox pour installer des modules complémentaires: InstallTrigger
• Chrome: l' chromeobjet global , contenant plusieurs propriétés, dont un chrome.webstoreobjet documenté .
• La mise à jour 3 chrome.webstoreest obsolète et non définie dans les versions récentes
• Safari: un modèle de dénomination unique dans la dénomination des constructeurs. Il s'agit de la méthode la moins durable de toutes les propriétés répertoriées et devinez quoi? Dans Safari 9.1.3, il a été corrigé. Nous vérifions donc SafariRemoteNotification, qui a été introduit après la version 7.1, pour couvrir tous les Safaris à partir de la version 3.0.
• Opera: window.operaexiste depuis des années, mais sera abandonné lorsque Opera remplacera son moteur par Blink + V8 (utilisé par Chromium).
• Mise à jour 1: Opera 15 est sorti , sa chaîne UA ressemble à Chrome, mais avec l'ajout de "OPR". Dans cette version, l' chromeobjet est défini (mais chrome.webstorene l'est pas). Étant donné qu'Opera s'efforce de cloner Chrome, j'utilise un agent utilisateur reniflant à cet effet.
• Mise à jour 2: !!window.opr && opr.addonspeut être utilisée pour détecter Opera 20+ (evergreen).
• Blink: a CSS.supports() été introduit dans Blink une fois que Google a allumé Chrome 28. C'est bien sûr le même Blink utilisé dans Opera.

Testé avec succès dans:

• Firefox 0.8 - 61
• Chrome 1.0 - 71
• Opera 8.0 - 34
• Safari 3.0 - 10
• IE 6 - 11
• Bord - 20-42
• Edge Dev - 80.0.361.9

Mise à jour en novembre 2016 pour inclure la détection des navigateurs Safari à partir de la version 9.1.3

Mis à jour en août 2018 pour mettre à jour les derniers tests réussis sur Chrome, Firefox IE et Edge.

Mis à jour en janvier 2019 pour corriger la détection du chrome (en raison de la dépréciation de window.chrome.webstore) et inclure les derniers tests réussis sur le chrome.

Mis à jour en décembre 2019 pour ajouter Edge basé sur la détection du chrome (basé sur le commentaire @Nimesh).

Vous pouvez essayer la méthode suivante pour vérifier la version du navigateur.

    <!DOCTYPE html>
    <html>
    <body>
    <p>What is the name(s) of your browser?</p>
    <button onclick="myFunction()">Try it</button>
    <p id="demo"></p>
    <script>

    function myFunction() { 
     if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 ) 
    {
        alert('Opera');
    }
    else if(navigator.userAgent.indexOf("Chrome") != -1 )
    {
        alert('Chrome');
    }
    else if(navigator.userAgent.indexOf("Safari") != -1)
    {
        alert('Safari');
    }
    else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
    {
         alert('Firefox');
    }
    else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
    {
      alert('IE'); 
    }  
    else 
    {
       alert('unknown');
    }
    }
    </script>

    </body>
    </html>

Et si vous avez besoin de connaître uniquement la version du navigateur IE, vous pouvez suivre le code ci-dessous. Ce code fonctionne bien pour la version IE6 à IE11

<!DOCTYPE html>
<html>
<body>

<p>Click on Try button to check IE Browser version.</p>

<button onclick="getInternetExplorerVersion()">Try it</button>

<p id="demo"></p>

<script>
function getInternetExplorerVersion() {
   var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");
        var rv = -1;

        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer, return version number
        {               

            if (isNaN(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))))) {
                //For IE 11 >
                if (navigator.appName == 'Netscape') {
                    var ua = navigator.userAgent;
                    var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
                    if (re.exec(ua) != null) {
                        rv = parseFloat(RegExp.$1);
                        alert(rv);
                    }
                }
                else {
                    alert('otherbrowser');
                }
            }
            else {
                //For < IE11
                alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
            }
            return false;
        }}
</script>

</body>
</html>

Je sais qu'il peut être exagéré d'utiliser une bibliothèque pour cela, mais juste pour enrichir le fil, vous pouvez vérifier la façon de faire is.js :

is.firefox();
is.ie(6);
is.not.safari();

Voici plusieurs bibliothèques importantes qui gèrent la détection des navigateurs à partir de décembre 2019.

Bowser par lancedikson - 4,065 ★ s - Dernière mise à jour le 2 oct.2019 - 4,8 Ko

var result = bowser.getParser(window.navigator.userAgent);
console.log(result);
document.write("You are using " + result.parsedResult.browser.name +
               " v" + result.parsedResult.browser.version + 
               " on " + result.parsedResult.os.name);

<script src="https://unpkg.com/[email protected]/es5.js"></script>

* prend en charge Edge basé sur le chrome

Platform.js par bestiejs - 2 550 ★ s - Dernière mise à jour le 14 avr.2019 - 5,9 Ko

console.log(platform);
document.write("You are using " + platform.name +
               " v" + platform.version + 
               " on " + platform.os);

<script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.5/platform.min.js"></script>

Navigateur jQuery par gabceb - 504 ★ s - Dernière mise à jour le 23 novembre 2015 - 1,3 Ko

console.log($.browser)
document.write("You are using " + $.browser.name +
               " v" + $.browser.versionNumber + 
               " on " + $.browser.platform);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script>

Detect.js (Archivé) par darcyclarke - 522 ★ s - Dernière mise à jour le 26 octobre 2015 - 2,9 Ko

var result = detect.parse(navigator.userAgent);
console.log(result);
document.write("You are using " + result.browser.family +
               " v" + result.browser.version + 
               " on " + result.os.family);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Detect.js/2.2.2/detect.min.js"></script>

Browser Detect (Archivé) par QuirksMode - Dernière mise à jour le 14 novembre 2013 - 884B

console.log(BrowserDetect)
document.write("You are using " + BrowserDetect.browser +
               " v" + BrowserDetect.version + 
               " on " + BrowserDetect.OS);

<script src="https://kylemit.github.io/libraries/libraries/BrowserDetect.js"></script>

Mentions notables:

• WhichBrowser - 1 355 ★ s - Dernière mise à jour le 2 oct.2018
• Modernizr - 23,397 ★ s - Dernière mise à jour le 12 janvier 2019 - Pour nourrir un cheval nourri, la détection des fonctionnalités devrait conduire à toutes les questions de style canIuse . La détection de navigateur est vraiment juste pour fournir des images personnalisées, télécharger des fichiers ou des instructions pour les navigateurs individuels.

Lectures complémentaires

• Stack Overflow - Détection de navigateur en JavaScript?
• Débordement de pile - Comment détecter la version d'un navigateur?

Au cas où quelqu'un trouverait cela utile, j'ai fait de la réponse de Rob W une fonction qui renvoie la chaîne du navigateur plutôt que d'avoir plusieurs variables flottantes. Étant donné que le navigateur ne peut pas non plus vraiment changer sans se charger à nouveau, je l'ai fait en cache le résultat pour l'empêcher d'avoir à le travailler la prochaine fois que la fonction est appelée.

/**
 * Gets the browser name or returns an empty string if unknown. 
 * This function also caches the result to provide for any 
 * future calls this function has.
 *
 * @returns {string}
 */
var browser = function() {
    // Return cached result if avalible, else get result then cache it.
    if (browser.prototype._cachedResult)
        return browser.prototype._cachedResult;

    // Opera 8.0+
    var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

    // Firefox 1.0+
    var isFirefox = typeof InstallTrigger !== 'undefined';

    // Safari 3.0+ "[object HTMLElementConstructor]" 
    var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

    // Internet Explorer 6-11
    var isIE = /*@cc_on!@*/false || !!document.documentMode;

    // Edge 20+
    var isEdge = !isIE && !!window.StyleMedia;

    // Chrome 1+
    var isChrome = !!window.chrome && !!window.chrome.webstore;

    // Blink engine detection
    var isBlink = (isChrome || isOpera) && !!window.CSS;

    return browser.prototype._cachedResult =
        isOpera ? 'Opera' :
        isFirefox ? 'Firefox' :
        isSafari ? 'Safari' :
        isChrome ? 'Chrome' :
        isIE ? 'IE' :
        isEdge ? 'Edge' :
        isBlink ? 'Blink' :
        "Don't know";
};

console.log(browser());

Variante courte

var browser = (function() {
    var test = function(regexp) {
        return regexp.test(window.navigator.userAgent);
    }
    switch (true) {
        case test(/edg/i): return "edge";
        case test(/opr/i) && (!!window.opr || !!window.opera): return "opera";
        case test(/chrome/i) && !!window.chrome: return "chrome";
        case test(/trident/i): return "ie";
        case test(/firefox/i): return "firefox";
        case test(/safari/i): return "safari";
        default: return "other";
    }
})();
console.log(browser)

Voici une version ajustée de 2016 de la réponse de Rob, y compris Microsoft Edge et la détection de Blink:

( modifier : j'ai mis à jour la réponse de Rob ci-dessus avec ces informations.)

// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+
isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
// Internet Explorer 6-11
isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
isBlink = (isChrome || isOpera) && !!window.CSS;

/* Results: */
console.log("isOpera", isOpera);
console.log("isFirefox", isFirefox);
console.log("isSafari", isSafari);
console.log("isIE", isIE);
console.log("isEdge", isEdge);
console.log("isChrome", isChrome);
console.log("isBlink", isBlink);

La beauté de cette approche est qu'elle repose sur les propriétés du moteur de navigation, elle couvre donc même les navigateurs dérivés, tels que Yandex ou Vivaldi, qui sont pratiquement compatibles avec les principaux navigateurs dont ils utilisent les moteurs. L'exception est Opera, qui repose sur le reniflement des agents utilisateurs, mais aujourd'hui (c'est-à-dire la version 15 et supérieure), même Opera n'est lui-même qu'un shell pour Blink.

Vous pouvez utiliser tryet catchutiliser les différents messages d'erreur du navigateur. IE et edge étaient mélangés, mais j'ai utilisé le typage canard de Rob W (basé sur ce projet ici: https://www.khanacademy.org/computer-programming/i-have-opera/2395080328 ).

var getBrowser = function() {        
    try {
        var e;
        var f = e.width;
    } catch(e) {
        var err = e.toString();

        if(err.indexOf("not an object") !== -1) {
            return "safari";
        } else if(err.indexOf("Cannot read") !== -1) {
            return "chrome";
        } else if(err.indexOf("e is undefined") !== -1) {
            return "firefox";
        } else if(err.indexOf("Unable to get property 'width' of undefined or null reference") !== -1) {
            if(!(false || !!document.documentMode) && !!window.StyleMedia) {
                return "edge";
            } else {
                return "IE";
            }
        } else if(err.indexOf("cannot convert e into object") !== -1) {
            return "opera";
        } else {
            return undefined;
        }
    }
};