¿Cómo detectar el navegador Safari, Chrome, IE, Firefox y Opera?

Tengo 5 complementos / extensiones para FF, Chrome, IE, Opera y Safari.

¿Cómo puedo reconocer el navegador del usuario y redirigir (una vez que se ha hecho clic en un botón de instalación) para descargar el complemento correspondiente?

Buscar en Google para la detección confiable del navegador a menudo da como resultado la comprobación de la cadena del agente de usuario. Este método no es confiable, porque es trivial suplantar este valor.
He escrito un método para detectar navegadores escribiendo pato .

Solo use el método de detección del navegador si es realmente necesario, como mostrar instrucciones específicas del navegador para instalar una extensión. Utilice la detección de funciones cuando sea posible.

Demostración: 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;

Análisis de confiabilidad

El método anterior dependía de las propiedades del motor de renderizado ( -moz-box-sizingy -webkit-transform) para detectar el navegador. Estos prefijos finalmente se eliminarán, por lo que para hacer que la detección sea aún más sólida, cambié a las características específicas del navegador:

• Internet Explorer: compilación condicional de JScript (hasta IE9) y document.documentMode.
• Edge: en los navegadores Trident y Edge, la implementación de Microsoft expone al StyleMediaconstructor. Excluir a Trident nos deja con Edge.
• Edge (basado en cromo): el agente de usuario incluye el valor "Edg / [versión]" al final (por ejemplo, "Mozilla / 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit / 537.36 (KHTML, como Gecko) Chrome / 80.0.3987.16 Safari / 537.36 Edg / 80.0.361.9 ").
• Firefox: API de Firefox para instalar complementos: InstallTrigger
• Chrome: el chromeobjeto global , que contiene varias propiedades, incluido un chrome.webstoreobjeto documentado .
• La actualización 3 chrome.webstoreestá en desuso y no está definida en versiones recientes
• Safari: un patrón de nomenclatura único en su denominación de constructores. Este es el método menos duradero de todas las propiedades enumeradas y ¿adivina qué? En Safari 9.1.3 se solucionó. Por lo tanto, estamos comparando SafariRemoteNotification, que se introdujo después de la versión 7.1, para cubrir todos los Safaris desde 3.0 en adelante.
• Opera: window.operaexiste desde hace años, pero se eliminará cuando Opera reemplace su motor con Blink + V8 (utilizado por Chromium).
• Actualización 1: Opera 15 ha sido lanzado , su cadena UA se parece a Chrome, pero con la adición de "OPR". En esta versión, el chromeobjeto está definido (pero chrome.webstoreno lo está). Como Opera se esfuerza por clonar Chrome, utilizo la detección de agentes de usuario para este propósito.
• Actualización 2: !!window.opr && opr.addonsse puede usar para detectar Opera 20+ (perenne).
• Blink: CSS.supports() se introdujo en Blink una vez que Google encendió Chrome 28. Es, por supuesto, el mismo Blink utilizado en Opera.

Probado con éxito en:

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

Actualizado en noviembre de 2016 para incluir la detección de navegadores Safari desde 9.1.3 en adelante

Actualizado en agosto de 2018 para actualizar las últimas pruebas exitosas en Chrome, Firefox IE y Edge.

Actualizado en enero de 2019 para corregir la detección de Chrome (debido a la obsolescencia de window.chrome.webstore) e incluir las últimas pruebas exitosas en Chrome.

Actualizado en diciembre de 2019 para agregar Edge según la detección de cromo (según el comentario de @Nimesh).

Puede intentar la siguiente forma de verificar la versión del navegador.

    <!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>

Y si necesita conocer solo la versión del navegador IE, puede seguir el siguiente código. Este código funciona bien para la versión IE6 a 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>

Sé que puede ser excesivo usar una lib para eso, pero solo para enriquecer el hilo, puedes verificar la forma en que is.js de hacer esto:

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

Aquí hay varias bibliotecas destacadas que manejan la detección del navegador a partir de diciembre de 2019.

Bowser por lancedikson - 4,065 ★ s - Última actualización 2 de octubre de 2019 - 4.8KB

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>

* admite Edge basado en cromo

Platform.js por bestiejs - 2,550 ★ s - Última actualización 14 de abril de 2019 - 5.9KB

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>

jQuery Browser por gabceb - 504 ★ s - Última actualización 23 de noviembre de 2015 - 1.3KB

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 (Archivado) por darcyclarke - 522 ★ s - Última actualización 26 de octubre de 2015 - 2.9KB

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>

Detección del navegador (Archivado) por QuirksMode - Última actualización 14 de noviembre de 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>

Menciones notables:

• WhichBrowser - 1,355 ★ s - Última actualización 2 de octubre de 2018
• Modernizr - 23,397 ★ s - Última actualización 12 de enero de 2019 - Para alimentar a un caballo alimentado, la detección de funciones debe generar cualquier pregunta de estilo canIuse . La detección del navegador es realmente solo para proporcionar imágenes personalizadas, descargar archivos o instrucciones para navegadores individuales.

Otras lecturas

• Desbordamiento de pila : ¿detección de navegador en JavaScript?
• Desbordamiento de pila : ¿cómo puede detectar la versión de un navegador?

En caso de que alguien encuentre esto útil, he convertido la respuesta de Rob W en una función que devuelve la cadena del navegador en lugar de tener varias variables flotando. Dado que el navegador tampoco puede cambiar realmente sin volver a cargarlo, lo he guardado en caché del resultado para evitar que tenga que resolverlo la próxima vez que se llame a la función.

/**
 * 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 corta

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)

Aquí hay una versión ajustada de 2016 de la respuesta de Rob, que incluye Microsoft Edge y detección de Blink:

( editar : Actualicé la respuesta de Rob anterior con esta información).

// 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 belleza de este enfoque es que se basa en las propiedades del motor del navegador, por lo que cubre incluso navegadores derivados, como Yandex o Vivaldi, que son prácticamente compatibles con los principales navegadores cuyos motores usan. La excepción es Opera, que se basa en la detección de agentes de usuario, pero hoy (es decir, la versión 15 y posteriores) incluso Opera es solo un shell para Blink.

Puede usar tryy catchusar los diferentes mensajes de error del navegador. IE y edge estaban mezclados, pero utilicé el tipeo de pato de Rob W (basado en este proyecto aquí: 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;
        }
    }
};