Quando desenvolvemos um aplicativo web, normalmente desenvolvemos incluindo o trabalho de internacionalização. Mas não basta apenas criar arquivos para cada país, pois o aplicativo pode ser acessado por diversos países que você não contemplou. Pensando nesses problemas o Yahoo Presentation Technologies (YPT) e com a ajuda de Andy Earnshaw e Norbert Lindenberg criaram a biblioteca Formatjs. Vamos mostrar um pouco sobre essa biblioteca logo abaixo, com um exemplo bem simples:
Qual o local language do usuário
A melhor forma de você servir um idioma para o usuário, é descobrindo o idioma que ele usa no browser. Geralmente o idioma do browser é igual ao idioma do sistema operacional, logo, é o idioma nativo do usuário ou o idioma que o usuário se sente mais confortável para usar.
Então, vamos descobrir qual é esse idioma usado pelo usuário. Para tanto, precisamos utilizar um desses comandos (navigator.language || navigator.browserLanguage) para entregar o conteúdo no idioma correto. Para essa verificação, podemos utilizar vários métodos, um deles é fazendo com que o usuário clique em um botão e nesse momento rodamos o código que vai descobrir o idioma.
Um exemplo de como identificar o idioma do browser do usuário pode ser feito assim:
Parâmetros do navigator.language
A string “lang” representando as versões de linguagens, está definida em RFC 4646.
Exemplos de códigos de linguagens validos inclui “en-US”, “fr”, “es-ES”, etc.
Maneiras de verificar o language
Podemos utilizar duas maneiras de identificação: uma retorna apenas a language que o usuário está utilizando no browser e o outro verifica alguns códigos de languages que são suportados.
Exemplos:
Como seria na prática
Na prática quando o usuário for acessar o site, não será preciso selecionar o país de origem para entregarmos o conteúdo no seu idioma. Com todos os idiomas prontos, só vamos precisar criar um script que verifique qual idioma o browser está utilizando.
Analisando o código fonte
No código fonte abaixo, cada linha tem uma explicação:
Link para o exemplo no JSFiddle
Propriedades
A interface NavigatorLanguage não herda qualquer propriedade.
O NavigatorLanguage.language retorna uma DOMString representando o idioma de preferência do usuário, geralmente o idioma da interface do usuário do navegador. O valor null é devolvido quando este é desconhecido.
Retorna um array de DOMString representando os idiomas conhecidos para o usuário, por ordem de preferência.
Referências
Browsers compatíveis (Desktop)
A tabela e a lista de browsers compativeis foi retirada do site Developer Mozilla.
-
Chrome=> Sim. Returns the browser UI language, not the value of the Accept-Language HTTP header.
-
Firefox(Gecko)=>1.0 (1.7 or earlier)
Prior to Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), this property’s value was also part of the user agent string, as reported by navigator.userAgent.
Starting in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), this property’s value is based on the value of the Accept-Language HTTP header.
-
Internet Explorer=> Closest available (non-standard) properties are userLanguage and browserLanguage. IE11 provides navigator.language but it is unclear how many prior versions support it. Old versions are not available to me, at the moment.
-
Opera=> Sim.
-
Safari=>Sim.
Browsers compatíveis (Mobile)
Essa é a lista dos browsers mobile que suportam o navigator.language:
- Android=>Sim.
- Firefox Mobile(Gecko)=>1.0 (1.0)
- IE Mobile=>Não suporta. Closest available (non-standard) properties are userLanguage and browserLanguage.
- Opera Mobile=>Sim.
- Safari Mobile=>Sim.
Conclusão
Todo o conteúdo utilizado foi retirado do site developer.mozilla.org, pois lá tem bastante material sobre o assunto. Você pode utilizar o navigator.language por enquanto nos dois principais browsers Firefox e Chrome, mas isso não impede você de testar nos outros também. Eu espero que este material sirva como um auxílio para encorajar outros web developer a utilizarem mais o navigator.language.
