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.