Como detectar o dispositivo em uso para melhorar a experiência do usuário

Daniel Rosa — Sun, 05 May 2024 22:32:57 +0000

Artigo original: How to Detect Your User's Device So You can Improve Their User Experience

Há algum tempo, assisti a uma fala incrível no Chrome Dev Summit sobre desempenho em dispositivos lentos.

Achei sensacional todo o trabalho feito pela empresa do Facebook na identificação de dispositivos para criar uma experiência de usuário melhor. Avancemos até recentemente, quando me decidi a estudar um pouco mais sobre o assunto e ver o que eu podia fazer na Thinkific (a empresa para a qual eu trabalho).

Agentes do usuário

Agentes de usuário são bem conhecidos pelos desenvolvedores. Nós os utilizamos para detectar bots, redirecionar usuários para uma versão específica do nosso site ou para anexar classes de CSS à nossa página para criarmos experiências diversas.

Na Thinkific, já utilizamos o browser Ruby gem para analisar o agente de usuário (o navegador) e para obter informações relevantes (detecção de bots, por exemplo). Assim, decidi persistir as informações principais em uma tabela visitante_dispositivo, cujo esquema você vê abaixo:

tenant_id: a escola criadora do curso que o visitanto está conferindo
raw: o agente de usuário puro
tipo: desktop / celular / tablet / bot / outros
nome_do_navegador
versão_do_navegador
nome_da_plataforma
versão_da_plataforma
hardware: hstore contendo memória, processador, modelo_do_dispositivo, nome_do_dispositivo
conexão: hstore contendo downlink_max, tipo_de_conexão

Você provavelmente percebeu que algumas coisas não estão disponíveis na string do UA (agente do usuário). É hora de usar novas APIs do JavaScript:

Obtendo informações do hardware com o JavaScript

Como pudemos ver no vídeo da Chrome Dev Summit, podemos usar o JS para obter essas informações.

Memória

navigator.deviceMemory retornará um número de ponto flutuante (decimal). Há algumas coisas que precisam ser consideradas aqui:

Isso funciona apenas com o HTTPS
O suporte é bastante limitado (somente ao Chrome, basicamente)

Mais informações (em inglês):

Processadores

navigator.hardwareConcurrency retornará o número de cores lógicos da CPU do usuário. Há um bom suporte a esse recurso.

Detectando informações de conexão usando o JavaScript

navigator.connection é uma API nova contendo informações sobre a conexão do sistema, como a largura de banda atual do dispositivo do usuário ou se a conexão é ou não mensurada. O suporte é bastante limitado (somente ao Chrome, basicamente), mas parece bastante promissor.

Mais informações (em inglês):

Detectando o modelo do dispositivo

O agente do usuário pode retornar algumas informações sobre o nome do modelo. O userstack é um serviço que oferece informações com base no agente do usuário. Ele funciona bem e é fácil de integrar. Porém, dependendo da sua necessidade, ele não pode ajudar.

Vamos pegar, por exemplo, os dispositivos da Apple. Seu agente de usuário é basicamente o mesmo. Assim, você não consegue diferenciar um iPad Pro de um iPad que rode o iOS mais recente. Para esses casos, você pode ter de precisar de uma detecção melhor, baseada na resolução, densidade dos pixels e outras informações do hardware expostas no navegador. Fiz uma pesquisa rápida a respeito e encontrei 3 produtos até o momento: WURFL.io, DeviceAtlas e 51Degrees. Ainda não tive tempo de experimentar com eles, mas quero muito fazer isso (e certamente publicarei a respeito).

Perguntas frequentes

Pergunta: por que não usar o Google Analytics/Mixpanel/Kibana/New Relic/outra ferramenta qualquer?

Podemos obter informações do navegador em outras ferramentas. No entanto, como sendo um produto SaaS, não usamos nossa própria propriedade do Google Analytics (os clientes adicionam sua propriedade). Além disso, bloqueadores de anúncio podem bloquear essas ferramentas de terceiros. Por fim, tendo essas informações do nosso lado, podemos nos adaptar melhor.

Pergunta: você tem uma lista de dispositivos fracos/robustos?

Não. Talvez essa lista possa ser criada combinando o número de processadores e memória, mas eu não dediquei muito tempo a isso. Nesse projeto, um colega de trabalho criou um ajudante em Rails que poderia determinar se o usuário usava a versão lite ou a versão padrão de um site com base no hardware. Sobre esse tópico, é importante mencionar que a Facebook (atual Meta) tem uma biblioteca para o Android chamada Device Year Class (classe do ano do dispositivo).

O autor também publicou este artigo em seu blog pessoal. Se gostou deste conteúdo, siga-o no Twitter e no GitHub.

A empresa onde o autor trabalha, a Thinkific, frequentemente contrata para diversos cargos – caso seja de seu interesse.

Experiência do usuário - freeCodeCamp.org