Cómo detectar el dispositivo de su usuario para que pueda mejorar su experiencia de usuario

Hace unos meses vi una excelente charla de la Chrome Dev Summit sobre el rendimiento en dispositivos lentos.

Me sorprendió todo el trabajo realizado por Facebook en la identificación de dispositivos para crear una mejor experiencia de usuario. Avance rápido hasta ahora, y he decidido estudiar un poco más sobre el tema y ver qué puedo hacer en Thinkific (la empresa para la que trabajo).

Agentes de usuario

Los agentes de usuario son bien conocidos por los desarrolladores. Los usamos para detectar bots, redirigir a los usuarios a una versión específica de nuestro sitio web o agregar clases de CSS en nuestra página para que podamos crear diferentes experiencias.

En Thinkific ya usamos la gema Ruby del navegador para analizar el agente de usuario y obtener información relevante (detección de bots, por ejemplo). Entonces, decidí conservar la información principal en una tabla de dispositivo de visitante; aquí está el esquema:

tenant_id: the course creator school the visitor is checkingraw: the raw uatype: desktop / mobile / tablet / bot / otherbrowser_namebrowser_versionplatform_nameplatform_versionhardware: hstore containing memory, processor, device_model, device_nameconnection: hstore containing downlink_max, connection_type

Probablemente hayas notado que algunas cosas no están disponibles en la cadena UA. Es hora de nuevas API de JavaScript:

Obtener información de hardware usando JavaScript

Como se explica en el video de Chrome Dev Summit, podemos usar JS para obtener esta información.

Memoria

navigator.deviceMemorydevolverá un número de punto flotante. Hay cosas a considerar aquí:

  • Solo funciona con HTTPS
  • El soporte es bastante limitado (Chrome solo básicamente)

Más sobre esto:

  • Especificaciones de W3C
  • Documentos de MDN
  • ¿Puedo usar deviceMemory?

Procesadores

navigator.hardwareConcurrencydevolverá el número de núcleos lógicos de la CPU del usuario. El apoyo para esto es decente.

Detectando información de conexión usando JavaScript

navigator.connectiones una nueva API que contiene información sobre la conexión del sistema, como el ancho de banda actual del dispositivo del usuario o si la conexión está medida. El soporte es bastante limitado (Chrome solo básicamente) pero las cosas son prometedoras.

Más sobre esto:

  • Ejemplo de Chrome
  • Documentos de MDN
  • ¿Puedo usar la API de información de red?

Detectando el modelo del dispositivo

El agente de usuario puede devolver alguna información sobre el nombre del modelo. userstack es un servicio que le brinda información basada en el agente de usuario. Funciona bien y es fácil de integrar, sin embargo, dependiendo de sus necesidades, no pueden ayudar.

Tomemos, por ejemplo, iDevices. Su agente de usuario es básicamente el mismo, por lo que no puede diferenciar un iPad Pro de un iPad antiguo que ejecuta el último iOS. Para estos casos, es posible que necesite una mejor detección basada en la resolución, la densidad de píxeles y otra información de hardware expuesta en el navegador. Hice una investigación rápida sobre esto y encontré 3 productos hasta ahora: WURFL.io, DeviceAtlas y 51Degrees. Todavía no he tenido tiempo de probar sus productos, pero tengo muchas ganas de hacerlo (y publicar sobre ello)

Preguntas más frecuentes

Pregunta: ¿Por qué no utilizar Google Analytics / Mixpanel / Kibana / New Relic / su herramienta aquí?

Podríamos obtener información del navegador dentro de otras herramientas. Pero como producto SaaS, no utilizamos nuestra propia propiedad de Google Analytics (los clientes agregan la suya propia). Además, los bloqueadores de anuncios pueden bloquear estas herramientas de terceros. Por último, pero no menos importante, al tener esta información de nuestro lado podemos adaptarnos mejor.

Pregunta: ¿Tiene una lista de dispositivos de gama baja / alta?

No. Quizás esto se pueda construir combinando la cantidad de procesadores y memoria, pero no invertí mucho tiempo en esto. En este proyecto, mi colega creó un asistente de Rails que determinaría si el usuario usaría la versión lite o predeterminada de un sitio web basado en hardware. Sobre este tema, es importante mencionar que Facebook tiene una biblioteca para Android llamada Device Year Class.

También publicado en mi blog. Si te gusta este contenido, sígueme en Twitter y GitHub.

Por cierto, Thinkific está contratando para varios puestos si está interesado.