Feature Detection vs Browser Detection

Nós todos ouvimos que, quando você está tentando determinar as capacidades JavaScript de um navegador, você deve evitar analisar string user agent como se fosse uma praga horrível; em vez disso, invista sua confiança em uma coisa chamada browser detection. Mas por que deveríamos? O que há de tão ruim sobre a confiança em string user agent? Além disso, como eu uso browser detection? Continue lendo e você encontrará a resposta para todas essas perguntas.

Browser Detection via User Agent Strings

Há muito tempo, em um planeta muito parecido com o nosso você pensaria que ele realmente era nosso, criaturas conhecidas como seres humanos usariam JavaScript para analisar strings user agent para determinar qual era o browser que o usuário estava usando para navegar em seu site. Ok, ok, não foi há muito tempo (na verdade, inúmeras pessoas ainda fazem isso) e era na verdade este planeta que chamamos Terra.

A browser detection é geralmente feita lendo uma propriedade conhecida como navigator.userAgent, que contém uma string com várias informações sobre o navegador que está sendo usado para visitar a página. Isso pode – e muitas vezes é – ser bastante utilizado de forma confiável para determinar realmente o navegador e a versão que estão sendo usados, mas ele possui várias advertências em relação ao seu uso para fazer determinações sobre como funciona o seu código.

1. A string userAgent pode ser falsificada com bastante facilidade, e apesar de essa razão ser citada muitas vezes, ela parece menos relevante, porque as únicas pessoas que falsificariam essa string seriam pessoas que sabem o que estão fazendo e provavelmente esperam que a mudança de valor possa criar problemas.
2. Não é possível saber quais características os futuros browsers fornecerão, então no momento em que um navegador é desenvolvido e muda as features de uma forma que você não previu, seu script se quebra.
3. Você tem que saber que navegadores suportam quais características. Às vezes isso é muito simples quando se trata de uma característica que todos conhecem, mas é difícil de usar quando você precisa manter o controle de vários recursos.

Browse detection

A browse detection é muito mais confiável para determinar se você pode usar um recurso porque ela vai direto nele e pergunta se ele existe. Bem, não é literalmente assim, mas é mais ou menos isso. A browse detection utiliza o fato de que se você tenta acessar uma propriedade de um objeto que não existe, ela será undefined. Então, se a propriedade ou a função que você precisa não é undefined, então você está livre para usá-la; caso contrário, você pode verificar as alternativas para ver se elas estão disponíveis.

Se você precisa verificar a existência de uma característica diretamente no escopo global, certifique-se de verificá-la como uma propriedade window (por exemplo, window.propertyName), porque se uma propriedade não existe quando você tenta verificá-la sem o prefixo window, você vai acabar com um ReferenceError. Confuso? Aqui está um exemplo, a verificação de capacidades XHR.

    // Does the browser use the standard XHR?
    if ( window.XMLHttpRequest )
    {
        xhr = new XMLHttpRequest();
    }
    // If the browser isn't using the standard, let's
    // check for the alternative
    else if ( window.ActiveXObject )
    {
        xhr = new ActiveXObject( "Microsoft.XMLHTTP" );
    }
     
    // Here, we're not using window in front. If
    // XMLHttpRequest doesn't exist, this will
    // result in an error instead of moving on to
    // the else if
    if ( XMLHttpRequest )
    {
        xhr = new XMLHttpRequest();
    }
    // This will never run because the top will either
    // be true or will be an error.
    else if ( ActiveXObject )
    {
        xhr = new ActiveXObject( "Microsoft.XMLHTTP" );
    }

Além dos motivos listados acima como razões para não usar a análise de user agent, há uma razão adicional para usar feature detection: ela testa para as características que você deseja usar em vez de testar para um navegador. Isso faz muito mais sentido para mim.

Feature Detection FTW

Então, como você pode ver, browse detection é simples e sensata. Por outro lado, é cheia de buracos. Eu posso ver a browse detection funcionando para casos de uso em que você realmente precisa saber qual navegador está sendo usado, mas utilizá-la para determinar quais recursos são implementados pelo navegador não é uma grande ideia. Espero que a maioria de vocês já saiba disso, mas eu tenho certeza de que há muita gente por aí que aprendeu agora. Deus o abençoe e feliz codificação!

?

Texto original disponível em http://www.joezimjs.com/javascript/feature-detection-vs-browser-detection/