Diffusion adaptative basée sur la qualité du réseau

Milica Mihajlija

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 utilisez un réseau rapide, mais lorsque vous êtes en déplacement avec un forfait de données limité et une connexion instable, ou que vous êtes coincé avec un ordinateur portable sur le Wi-Fi lent d'un café, c'est une autre histoire.

Pour résoudre ce problème, vous pouvez adapter les éléments que vous diffusez aux utilisateurs en fonction de la qualité de leur connexion. Cela est désormais possible grâce à l'API Network Information, qui permet aux applications Web d'accéder aux informations sur le réseau de l'utilisateur.

Navigateurs pris en charge

  • Chrome : 61.
  • Edge: 79
  • Firefox : non compatible.
  • Safari : non compatible.

Source

Utilisation

Vous pouvez utiliser ces informations réseau de différentes manières pour améliorer l'expérience utilisateur :

  • Basculer entre la diffusion de contenus haute définition et basse définition en fonction du réseau de l'utilisateur
  • Décidez de précharger ou non les ressources.
  • Différez les importations et les téléchargements lorsque les utilisateurs disposent d'une connexion 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 certaines actions (par exemple, regarder une vidéo) via un réseau mobile peuvent 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 font déjà quelque chose de similaire. Par exemple, YouTube, Netflix et la plupart des autres services de vidéo (ou d'appel vidéo) ajustent automatiquement la résolution pendant le streaming. Lorsque Gmail se charge, il fournit aux utilisateurs un lien permettant de "charger le HTML de base (pour les connexions lentes)".

Lien permettant de charger la version HTML simplifiée de Gmail lorsque les utilisateurs disposent d'une connexion lente

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' (couvre la 4G et les versions ultérieures). Déterminé en fonction de la combinaison de la durée aller-retour et de la vitesse de téléchargement. Par exemple, une liaison descendante rapide associée à une latence élevée aura un type efficace inférieur 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 réduction de la consommation des données.

Voici à quoi cela ressemble lorsque vous l'exécutez dans la console du navigateur :

Console d'outils pour les développeurs Chrome affichant les valeurs des propriétés de l'objet navigator.connection

Les valeurs effectiveType sont également disponibles via les conseils 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 dynamiquement aux modifications de la qualité du réseau. Si vous avez différé des importations ou des téléchargements en raison de mauvaises conditions réseau, vous pouvez vous fier à l'écouteur d'événements pour redémarrer le transfert lorsqu'il détecte de meilleures conditions réseau. Vous pouvez également l'utiliser pour avertir les utilisateurs lorsque la qualité du réseau change. Par exemple, si le signal Wi-Fi est perdu et que l'appareil est connecté à un réseau mobile, cela peut empêcher les transferts de données accidentels (et les frais 💸).

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 importants, en particulier pour les utilisateurs sur des réseaux lents et les applications qui nécessitent beaucoup de bande passante. Mieux encore, il peut être utilisé comme technique d'amélioration progressive.