Como detectar o navegador Safari, Chrome, IE, Firefox e Opera?

Eu tenho 5 addons / extensões para FF, Chrome, IE, Opera e Safari.

Como posso reconhecer o navegador do usuário e redirecionar (uma vez que um botão de instalação foi clicado) para baixar o complemento correspondente?

Pesquisando a detecção confiável do navegador geralmente resulta na verificação da sequência do agente do usuário. Este método não é confiável, porque é trivial falsificar esse valor.
Eu escrevi um método para detectar navegadores digitando pato .

Use o método de detecção do navegador apenas se for realmente necessário, como mostrar instruções específicas do navegador para instalar uma extensão. Use a detecção de recursos quando possível.

Demonstração: 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álise de confiabilidade

O método anterior dependia das propriedades do mecanismo de renderização ( -moz-box-sizinge -webkit-transform) para detectar o navegador. Esses prefixos serão eventualmente eliminados. Portanto, para tornar a detecção ainda mais robusta, mudei para características específicas do navegador:

• Internet Explorer: compilação condicional do JScript (até IE9) e document.documentMode.
• Borda: nos navegadores Trident e Edge, a implementação da Microsoft expõe o StyleMediaconstrutor. Excluir Trident nos deixa com Edge.
• Edge (baseado em cromo): o agente do usuário inclui o valor "Edg / [version]" no final (ex: "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 do Firefox para instalar complementos: InstallTrigger
• Chrome: o chromeobjeto global , contendo várias propriedades, incluindo um chrome.webstoreobjeto documentado .
• A atualização 3 chrome.webstorefoi preterida e indefinida nas versões recentes
• Safari: um padrão de nomeação exclusivo na nomeação de construtores. Este é o método menos durável de todas as propriedades listadas e adivinhem? No Safari 9.1.3, foi corrigido. Portanto, estamos comparando SafariRemoteNotification, que foi introduzido após a versão 7.1, para cobrir todos os Safaris a partir do 3.0 e superior.
• Opera: window.operaexiste há anos, mas será descartado quando o Opera substituir seu mecanismo pelo Blink + V8 (usado pelo Chromium).
• Atualização 1: O Opera 15 foi lançado , sua string UA se parece com o Chrome, mas com a adição de "OPR". Nesta versão, o chromeobjeto está definido (mas chrome.webstorenão está). Como o Opera tenta clonar o Chrome, eu uso o agente do usuário que fareja para esse fim.
• Atualização 2: !!window.opr && opr.addonspode ser usado para detectar o Opera 20+ (sempre-verde).
• Blink: CSS.supports() foi introduzido no Blink quando o Google ativou o Chrome 28. É claro que é o mesmo Blink usado no Opera.

Testado com sucesso em:

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

Atualizado em novembro de 2016 para incluir a detecção de navegadores Safari a partir da 9.1.3 e superior

Atualizado em agosto de 2018 para atualizar os últimos testes bem-sucedidos no chrome, firefox IE e edge.

Atualizado em janeiro de 2019 para corrigir a detecção de cromo (por causa da descontinuação de window.chrome.webstore) e incluir os últimos testes bem-sucedidos no chrome.

Atualizado em dezembro de 2019 para adicionar o Edge com base na detecção de cromo (com base no comentário do @Nimesh).

Você pode tentar a seguinte maneira de verificar a versão do 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>

E se você precisa conhecer apenas a versão do navegador IE, pode seguir o código abaixo. Este código funciona bem para a versão IE6 para 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>

Eu sei que pode ser um exagero usar uma lib para isso, mas apenas para enriquecer o thread, você pode verificar o modo is.js de fazer isso:

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

Aqui estão várias bibliotecas importantes que lidam com a detecção do navegador em dezembro de 2019.

Bowser by lancedikson - 4.065 ★ s - Última atualização em 2 de outubro 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>

* suporta Edge com base no Chromium

Platform.js por bestiejs - 2.550 ★ s - Última atualização 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 atualização 23 de novembro 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 (arquivado) por darcyclarke - 522 ★ s - Última atualização em 26 de outubro 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>

Detecção de navegador (arquivada) por QuirksMode - Última atualização em 14 de novembro 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>

Menções notáveis:

• WhichBrowser - 1.355 ★ s - Última atualização em 2 de outubro de 2018
• Modernizr - 23.397 ★ s - Última atualização em 12 de janeiro de 2019 - Para alimentar um cavalo alimentado, a detecção de recursos deve direcionar qualquer pergunta ao estilo canIuse . A detecção do navegador é realmente apenas para fornecer imagens personalizadas, baixar arquivos ou instruções para navegadores individuais.

Leitura adicional

• Estouro de pilha - detecção de navegador em JavaScript?
• Estouro de pilha - Como você pode detectar a versão de um navegador?

Caso alguém ache isso útil, transformei a resposta de Rob W em uma função que retorna a sequência do navegador em vez de ter várias variáveis ​​flutuando. Como o navegador também não pode realmente mudar sem carregar novamente, fiz o cache do resultado para evitar que ele precise ser resolvido na próxima vez que a função for chamada.

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

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)

Aqui está uma versão ajustada para 2016 da resposta de Rob, incluindo o Microsoft Edge e a detecção do Blink:

( editei : atualizei a resposta de Rob acima com essas informações.)

// 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);

A vantagem dessa abordagem é que ela depende das propriedades do mecanismo do navegador, de modo que abrange até navegadores derivados, como Yandex ou Vivaldi, que são praticamente compatíveis com os principais navegadores cujos mecanismos eles usam. A exceção é o Opera, que conta com o farejamento do agente do usuário, mas hoje (ou seja, versões 15 e seguintes), até o Opera é apenas um shell para o Blink.

Você pode usar try e catchusar as diferentes mensagens de erro do navegador. O IE e o edge foram misturados, mas usei a digitação de pato de Rob W (com base neste projeto aqui: 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;
        }
    }
};