El futuro de la detección de dispositivos en internet

Saber qué dispositivos se utilizan para acceder a tu sitio web puede ayudarte a aumentar o reducir la resolución de las imágenes, adaptar las páginas a las funcionalidades de cada uno y, en definitiva, ofrecer la mejor experiencia a todo el mundo. Para obtener esta información, antes había que analizar los encabezados HTTP User-Agent y trastear con ellos. Sin embargo, hace unos años aparecieron las sugerencias del cliente o Client Hints, una solución más avanzada, y ahora los encabezados User-Agent están empezando a desaparecer, pero que no cunda el pánico.

Como bien saben la mayoría de los desarrolladores, el encabezado User-Agent se las trae. Y después de tres décadas de guerra sin cuartel entre los desarrolladores de navegadores y los desarrolladores web, directamente no hay por dónde cogerlo. Este es el encabezado que envía el navegador que estoy utilizando ahora mismo para cada petición:

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Es absolutamente demencial. Por mucho que se empeñe, no estoy usando Mozilla, mi Mac no tiene un chip de Intel y el navegador no funciona con WebKit, KHTML ni Gecko. Por supuesto, tampoco es Safari. Lo único que está bien en este encabezado es "Chrome/120.0.0.0". El resto es puro humo sin más finalidad que mejorar la compatibilidad con filtros.

Menos datos en User-Agent, más privacidad

La longitud y la variedad de información del encabezado User-Agent también son perjudiciales para la privacidad de los usuarios. El Technical Architecture Group de W3C (del que, por cierto, formé parte durante dos años) ya documentó allá por 2015 el problema del rastreo sin autorización: al combinar todos los valores de los encabezados que tu navegador envía cada vez que utilizas internet, los operadores de sitios web podrían identificarte individualmente. 

En otras palabras, cuando pasas de un sitio en el que te conocen (porque has iniciado sesión) a otro en el que crees estar en el anonimato, sigues transmitiendo las mismas huellas digitales que te identifican, lo quieras o no.

Para abordar este problema, Google puso en marcha el programa de reducción de User-Agent, que tenía como objetivo hacer que esta información fuera más genérica. Este es el motivo por el que el encabezado User-Agent que he puesto al principio de este artículo indica que utilizo una versión con números redondos de Chrome (lo cual es bastante sospechoso) y tengo un Mac con chip de Intel, cosa que no es verdad.

La reducción de User-Agent pretende proporcionar la cantidad justa de información para que esta resulte útil, pero no tan concreta como para identificar al usuario en cuestión. Puedes consultar la huella digital de tu navegador en amiunique.org.

Detección de dispositivos en el edge

En Fastly estamos a favor de este programa porque es bueno para los usuarios y para internet. Aun así, ofrecemos variables de detección de dispositivos que se rellenan automáticamente para que puedas personalizar las experiencias fácilmente en el edge, todo ello gracias a una interpretación del encabezado User-Agent  que permite hacer cosas como esta:

if (client.display.width > 1000) {
   set req.http.Feature-Device-Size = "large";
} else {
   set req.http.Feature-Device-Size = "small";
}

Debido a los cambios en el encabezado User-Agent, estas variables proporcionan información menos concreta y precisa de lo normal. Además, ya no podemos darte algunos de los datos que sí te dábamos antes porque la cadena User-Agent ya no contiene la información ni se puede utilizar para encontrarla. Esto se aplica especialmente a valores tan pormenorizados como el ancho y la altura de la pantalla, que a efectos prácticos ya no tienen cabida en el edge.

Sin embargo, esto no supone el final de la detección de dispositivos en el edge. La versión reducida del encabezado User-Agent contiene la información suficiente para que Fastly pueda rellenar las variables de tipo de dispositivo más importantes y solicitadas, como client.browser.name y client.platform.mobile, que valen perfectamente para personalizar la experiencia.

Además, ahora los navegadores envían metadatos de tipo de dispositivo de nueva generación en un conjunto de encabezados exclusivos:

Sec-Ch-Ua: "Not_A Brand";v="8", "Chromium";v="120", "Google Chrome";v="120"
Sec-Ch-Ua-Mobile: ?0
Sec-Ch-Ua-Platform: "macOS"
Sec-Fetch-User: ?1

Estos encabezados muestran los datos de una manera más estructurada que te lo pone a ti más fácil para utilizar Vary y a nosotros para rellenar los metadatos que necesitas en tu servicio de Fastly. Incluso vienen equipados con medidas para evitar los análisis excesivamente rudimentarios, de ahí esa parte tan extraña en la que pone «Not_A Brand». Este es el futuro de la detección de dispositivos… ¿o no?

La transición a las sugerencias del cliente

La pregunta es qué puedes hacer si necesitas información más detallada, de esa que los navegadores ya no quieren darte por si la utilizas como huella digital para rastrear a los usuarios. Aquí entran en juego las sugerencias del cliente, otro invento de Google pensado para que puedas acceder a esos datos sin poner en riesgo la privacidad.

Veamos cómo funcionan. Como profesional del desarrollo web, creas un sitio con una gran capacidad de respuesta y cuyas páginas HTML se personalizan utilizando únicamente los datos del dispositivo que aparecen en la primera petición del usuario, tal y como hemos descrito anteriormente. No obstante, también incluyes un encabezado de respuesta Accept-CH para decirle al navegador que te gustaría disponer de más información para así ofrecer una experiencia de uso superior con las siguientes peticiones de recursos:

Accept-CH: Sec-CH-Viewport-Width, Sec-CH-UA-Arch, Device-Memory, RTT

Cuando el navegador del usuario envíe las siguientes peticiones de imágenes, fichas de estilo y secuencias de comandos que le hagan falta para renderizar por completo la página, este incluirá los datos adicionales que necesitas siempre que el usuario lo consienta:

Sec-CH-Viewport-Width: 1000
Sec-CH-UA-Arch: "x86"
Device-Memory: 4
RTT: 125

Con semejante filón de datos, no te costará nada ofrecer una experiencia fantástica a los usuarios. El edge de Fastly también es un lugar ideal para echar mano de las sugerencias del cliente, sobre todo aquellas de «alta entropía» que pueden contar con una cantidad muy elevada de permutaciones. 

Imagina que quieres ofrecer una experiencia exigente con los recursos del dispositivo, como una escena de WebGL. Puedes usar la sugerencia Device-Memory para saber a qué resolución o velocidad de fotogramas reproducirla. Device-Memory tiene seis valores posibles, pero puede que tu experiencia solo disponga de un mínimo y un máximo. Si tomas la decisión correspondiente en el servidor, una CDN como la de Fastly tendrá que almacenar esas dos variantes en seis espacios de caché, lo cual reducirá las probabilidades de que se produzca un acierto de caché y la petición del usuario se resuelva con rapidez y eficacia.

Las sugerencias del cliente no solo están disponibles como una API de HTTP. De hecho, la interfaz NavigatorUAData de JavaScript también permite leerlas en JavaScript.

Todo esto suena muy bien, pero lo cierto es que las sugerencias del cliente plantean algunos problemas:

• No son compatibles con Firefox ni Safari. De momento, solo están invitados a esta fiesta los navegadores basados en Chromium. Teniendo en cuenta que las sugerencias del cliente llevan existiendo más de una década, parece bastante improbable que Google vaya a ampliar su compatibilidad cualquier día de estos.

• Son muy difíciles de utilizar para personalizar páginas HTML. Esto se debe a que hay que pedirle al navegador que las envíe, cosa que sucede en la respuesta a una petición anterior, generalmente la de la página HTML. Se puede mitigar con Critical-CH (y antes con Accept-CH-Lifetime), pero estas soluciones distan de ser perfectas.

La parte buena es que las sugerencias del cliente han venido para quedarse. Con un poco de suerte, evolucionarán para adaptarse a nuevos casos de uso y hacerse un hueco en más navegadores.

La detección de dispositivos con Fastly en la actualidad

La mejor estrategia consiste en combinar señales procedentes de varios lugares para saber hasta dónde pueden llegar los dispositivos y respetar la privacidad de los usuarios. Si utilizas VCL o uno de nuestros SDK de Compute, tienes varias opciones para añadir encabezados a las respuestas sin complicarte la vida. De esta forma, los navegadores te enviarán las sugerencias del cliente que necesitas. Por ejemplo, si tienes un servicio de VCL, puedes usar un fragmento de VCL o VCL personalizado para añadir una lista de sugerencias del cliente a vcl_deliver:

set resp.http.accept-ch = "Sec-CH-Viewport-Width, Sec-CH-UA-Arch, Device-Memory, RTT";

A continuación, puedes acceder a la información de las sugerencias en formato de encabezados HTTP, como req.http.sec-ch-viewport-width. Es habitual combinar esta información con las variables de detección de dispositivos para tomar las decisiones más acertadas. Si solo quieres almacenar los datos en un punto de conexión de registros en tiempo real, puedes añadir algo como esto a vcl_log:

log "syslog " + req.service_id + " my-endpoint-name :: {"
  {" "client-hints": { "}
    {" "viewport-width": ""} + req.http.sec-ch-viewport-width + {"","}
    {" "ua-arch": ""} + req.http.sec-ch-ua-arch + {"","}
    {" "device-memory": ""} + req.http.device-memory + {"","}
    {" "rtt": ""} + req.http.rtt + {"""}
  {" },"}
  {" "device-detection": { "}
    {" "mobile": ""} + client.platform.mobile + {"""}
    {" "touch": ""} + client.display.touchscreen + {"""}
  {" },"}
  {" "ua": { "}
    {" "sec-ch-ua": ""} + req.http.sec-ch-ua + {"","}
    {" "sec-ch-ua-mobile": ""} + req.http.sec-ch-ua-mobile + {"","}
    {" "sec-ch-ua-platform": ""} + req.http.sec-ch-ua-platform + {"""}
  {"}"}
{"}"}
;

Este código reúne los datos proporcionados en los nuevos encabezados User-Agent (sec-ch-ua-*), las variables de detección de dispositivos de Fastly (client.*) y sugerencias del cliente opcionales (como Device-Memory). Tú decides si quieres registrarlo o usarlo para anotar peticiones, activar una respuesta especial, cambiar la clave de caché o hacer cualquier otra cosa que se te ocurra.

Si ya ofreces experiencias adaptadas a los dispositivos con Fastly o tienes pensado hacerlo, puedes charlar con nosotros en community.fastly.com.