Le chargement d'un site Web peut être une expérience très différente en fonction des conditions du réseau. Tout se passe généralement bien lorsque vous êtes connecté à un réseau rapide, mais lorsque vous êtes en déplacement avec un forfait Internet limité et une connexion instable, ou que vous êtes coincé avec un ordinateur portable sur une connexion Wi-Fi lente dans un café, la situation est différente.
Pour gérer ce problème, vous pouvez adapter les composants que vous proposez aux utilisateurs en fonction de la qualité de leur connexion. Cela est désormais possible avec l'API Network Information, qui permet aux applications Web d'accéder à des informations sur le réseau de l'utilisateur.
Utilisation
Il existe de nombreuses façons d'utiliser ces informations réseau pour améliorer l'expérience utilisateur:
- basculer entre la diffusion de contenu haute définition et basse définition en fonction du réseau de l'utilisateur ;
- Décidez si les ressources doivent être préchargées.
- Différez les importations et les téléchargements lorsque la connexion des utilisateurs est lente.
- Activez le mode hors connexion si la qualité du réseau n'est pas suffisante pour charger l'application et utiliser les fonctionnalités.
- Avertissez les utilisateurs que l'utilisation du réseau mobile pour effectuer une action (regarder une vidéo, par exemple) peut leur coûter de l'argent.
- Utilisez-le dans vos analyses pour recueillir des données sur la qualité du réseau de vos utilisateurs.
De nombreuses applications proposent déjà quelque chose de similaire. Par exemple, YouTube, Netflix et la plupart des autres services vidéo (ou d'appel vidéo) ajustent automatiquement la résolution lors du streaming. Lors du chargement de Gmail, un lien "Charger la version HTML simplifiée (pour les connexions lentes)" s'affiche.
Fonctionnement
L'objet navigator.connection contient des informations sur la connexion d'un client. Ses propriétés sont expliquées dans le tableau ci-dessous.
| Propriété | Explication |
|---|---|
downlink |
Estimation de la bande passante en mégabits par seconde. |
effectiveType |
Type effectif de la connexion, avec les valeurs possibles 'slow-2g', '2g', '3g' ou '4g' (couverture 4g et plus). Déterminé en fonction de la combinaison du délai aller-retour et de la vitesse en liaison descendante. Par exemple, une liaison descendante rapide associée à une latence élevée aura un impact Type plus faible en raison de la latence. |
onchange |
Gestionnaire d'événements qui se déclenche lorsque les informations de connexion changent. |
rtt |
Latence aller-retour estimée de la connexion en millisecondes. |
saveData |
Valeur booléenne indiquant si l'utilisateur a demandé un mode de consommation de données réduite. |
Voici ce à quoi cela ressemble lorsque vous l'exécutez dans la console du navigateur:
Les valeurs effectiveType sont également disponibles via les indications client et vous permettent de communiquer le type de connexion du navigateur aux serveurs.
L'écouteur d'événements onchange vous permet de vous adapter de manière dynamique aux changements de qualité du réseau. Si vous avez différé les importations ou les téléchargements en raison de mauvaises conditions de réseau, vous pouvez compter sur l'écouteur d'événements pour redémarrer le transfert lorsqu'il détecte de meilleures conditions de réseau. Vous pouvez également l'utiliser pour avertir les utilisateurs lorsque la qualité du réseau change. Par exemple, s'il a perdu son signal Wi-Fi et qu'il est passé à un réseau mobile, cela peut éviter les transferts de données accidentels (et des frais sont également facturés 💸).
Utilisez l'écouteur d'événements onchange comme vous le feriez pour tout autre écouteur d'événements:
navigator.connection.addEventListener('change', doSomethingOnChange);
Conclusion
Les avantages potentiels de l'API Network Information sont considérables, en particulier pour les utilisateurs dont les réseaux sont lents et les applications qui nécessitent beaucoup de bande passante. Et ce n'est pas tout : il peut être utilisé comme technique d'amélioration progressive.