Vue d’ensemble
Lorsqu’il faut proposer des fonctionnalités différentes selon le navigateur ou l’environnement de l’appareil, User-Agent Sniffing et Feature Detection sont deux approches représentatives.
Ces derniers temps, il est recommandé de privilégier Feature Detection du point de vue de la maintenabilité et de la sécurité.
1. User-Agent Sniffing
Il s’agit d’une méthode qui identifie l’appareil ou le navigateur en analysant la chaîne User-Agent.
Elle est utile pour identifier le modèle d’un appareil, mais elle est sensible aux mises à jour et son usage est progressivement limité avec le renforcement des politiques de protection de la vie privée.
navigator.userAgentData.getHighEntropyValues(['model', 'platform'])
2. Feature Detection
Il s’agit d’une méthode qui teste directement la prise en charge d’une fonctionnalité pour effectuer un branchement conditionnel.
Elle peut être appliquée de manière sûre et flexible, quel que soit le navigateur ou le type d’appareil.
if ('fetch' in window) {
// fetch API 사용
}
3. Bibliothèques : Modernizr & Sniffr
Modernizr est une bibliothèque qui facilite la Feature Detection, avec la possibilité de construire une version n’incluant que les fonctionnalités souhaitées.
Sniffr est une bibliothèque qui permet d’analyser facilement des informations basées sur le User-Agent.
4. Capacités de détection selon la plateforme
- Sur Android, il est possible d’extraire jusqu’au nom du modèle (
SM-xxxx, etc.) - Sur iOS, on peut distinguer iPhone et iPad, mais l’identification du modèle reste limitée
- Sur Mac/Windows, il est possible de vérifier jusqu’à la version de l’OS, mais l’identification de l’appareil est difficile
5. Autres informations détectables
- Nombre de cœurs CPU :
navigator.hardwareConcurrency - Quantité de mémoire :
navigator.deviceMemory - Vitesse du réseau :
navigator.connection.effectiveType
6. Exemple d’approche hybride
Il est aussi possible de combiner User-Agent et Feature Detection pour une détection d’environnement plus fine.
Ex. : détecter un modèle avec encoche, la présence d’Apple Silicon et la prise en charge de fonctionnalités
environment.supportsServiceWorker = 'serviceWorker' in navigator;
7. Anticiper l’avenir : Privacy Sandbox et User-Agent Reduction
Google réduit progressivement la chaîne User-Agent et, pour s’y adapter, l’usage de l’API User-Agent Client Hints est recommandé.
Cette API fournit des informations utilisateur de manière plus structurée et plus respectueuse de la vie privée.
navigator.userAgentData.getHighEntropyValues(['platform', 'model']);
Conclusion
- Par défaut, privilégier Feature Detection
- Réduire au minimum la détection basée sur le User-Agent et, si nécessaire, utiliser les technologies (API) les plus récentes
- Pour suivre les standards futurs, il est préférable de se préparer aussi à de nouvelles approches comme Client Hints.
Aucun commentaire pour le moment.