Recuperando Linguagem do Browser no Blazor

Nesse artigo veremos como é possível buscar a linguagem definida no Browser com o Blazor. Nós já exploramos como trabalhar com o recurso de CultureInfo no Blazor. E agora iremos buscar a linguagem do Browser, e utilizar essa informação para definir o CultureInfo da nossa aplicação.

Com isso, você terá condições de criar uma aplicação Blazor, que se adapta à linguagem do usuário. Além das configurações de Cultura do CultureInfo, você pode aproveitar isso para realizar traduções de labels e mensagens.

JavaScript Interop

Para conseguir recuperar a linguagem do browser, precisaremos utilizar o recurso de JavaScript Interop do Blazor. Você pode encontrar mais detalhes de como isso funciona, nesse artigo aqui.

Precisamos então de uma função JavaScript para retornar a linguagem definida no Browser. A função é essa que você pode ver na Figura 1.

Figura 1: Função JavaScript que retorna a linguagem do Browser

Coloque essa function no arquivo JavaScript que você usa para fazer Interop na sua aplicação Blazor.

Startup.Configure

Agora basta chamarmos essa função e setarmos o CultureInfo com o seu retorno. E para que isso valha para todos os componentes da nossa aplicação, faremos isso no método Configure da classe Startup.

Uma das coisas que podemos fazer nesse método Configure, é injetar serviços que foram registrados no container de Injeção de Dependências da aplicação.

Para poder fazer uma chamada Javascript através de Interop, precisamos usar o serviço IJSRuntime, e portando iremos injetá-lo no método Configure. Veja na Figura 2.

Figura 2: Injetando o IJSRuntime no Método Configure.

Agora basta fazer a chamada à função Javascript criada anteriormente, e atribuir o seu resultado ao CultureInfo, como mostra a Figura 3.

Figura 3: Conteúdo do método Configure do Startup

No método Configure da classe Startup, temos uma restrição com relação a chamadas assíncronas.

Tudo o que você precisar executar para configurar a sua aplicação, precisa ser síncrono, senão você corre o risco de uma determinada rotina terminar depois que a aplicação foi iniciada, causando comportamentos indesejáveis.

É por isso que para fazer a chamada JavaScript, estamos convertendo o IJSRuntime no IJSInProcessRuntime. Note que usamos o método Invoke<string> para chamar a nossa função e capturar o retorno em string, na variável lang.

Em seguida a variável lang é impressa no Console, e atribuída ao CultureInfo da aplicação. E para fechar, antes de iniciar o app, também estamos imprimindo no Console o nome do CultureInfo corrente, para comprovar que a linguagem foi devidamente configurada.

Para testar, execute a sua aplicação e veja o que aparece no Console do Browser, após a sua inicialização. Figura 4.

Figura 4: Testando a recuperação da linguagem do Browser

Conclusão

Como já disse, esse recurso pode ser muito útil para criar aplicações multilíngues. Veremos futuramente nesse Blog, um artigo sobre como aplicar Localização na sua aplicação Blazor.

Grande Abraço e até o próximo!