User-Agent vs. Feature Detection: ¿qué usar, cuándo y cómo?

Resumen

Cuando se ofrecen funciones distintas según el navegador o el entorno del dispositivo, User-Agent Sniffing y Feature Detection son dos enfoques representativos.
Recientemente, se recomienda priorizar Feature Detection por motivos de mantenibilidad y seguridad.

---

1. User-Agent Sniffing

Es una forma de identificar el dispositivo o el navegador analizando la cadena de User-Agent.
Es útil para identificar el modelo del dispositivo, pero es sensible a las actualizaciones y su uso se está restringiendo gradualmente por el fortalecimiento de las políticas de privacidad.

navigator.userAgentData.getHighEntropyValues(['model', 'platform'])  

---

2. Feature Detection

Es una forma de ramificar condiciones comprobando si una función en sí está soportada.
Se puede aplicar de manera segura y flexible sin importar el tipo de navegador o dispositivo.

if ('fetch' in window) {  
  // usar la API fetch  
}  

---

3. Librerías: Modernizr & Sniffr

Modernizr es una librería que facilita el Feature Detection, y permite compilar incluyendo solo las funciones deseadas.
Sniffr es una librería que facilita el parseo de información basada en User-Agent.

---

4. Posibilidades de detección por plataforma

• En Android se puede extraer incluso el nombre del modelo (SM-xxxx, etc.)
• En iOS es posible distinguir entre iPhone/iPad, pero la identificación del modelo es limitada
• En Mac/Windows se puede verificar hasta la versión del sistema operativo, pero es difícil identificar el dispositivo

---

5. Otra información detectable

• Número de núcleos de CPU: navigator.hardwareConcurrency
• Capacidad de memoria: navigator.deviceMemory
• Velocidad de red: navigator.connection.effectiveType

---

6. Ejemplo de enfoque mixto

También es posible lograr una detección del entorno más precisa combinando User-Agent y Feature Detection.
Ejemplo: detectar modelos con notch, si tiene Apple Silicon y si hay soporte de funciones

environment.supportsServiceWorker = 'serviceWorker' in navigator;  

---

7. Prepararse para el futuro: Privacy Sandbox y User-Agent Reduction

Google está reduciendo la cadena de User-Agent y, como respuesta, se recomienda usar la User-Agent Client Hints API.
Esta API proporciona información del usuario de una forma más estructurada y respetuosa con la privacidad.

navigator.userAgentData.getHighEntropyValues(['platform', 'model']);  

---

Conclusión

• Priorizar Feature Detection como enfoque base
• Minimizar la detección basada en User-Agent y, cuando sea necesaria, aprovechar tecnologías modernas (API)
• Conviene prepararse también para nuevos enfoques como Client Hints para adaptarse a los estándares futuros.