Network Information API pour un contenu adaptatif : repli
Découvrez comment navigator.connection peut guider le choix des ressources, gérer les indications absentes ou changeantes et préserver la confidentialité.
Vous voulez la documentation structurée pour Plateforme ?
Cet article fait partie de la bibliothèque éditoriale. Pour les étapes de configuration, la référence et les mises à jour continues, passez directement à la section docs.
La Network Information API fournit à une page des indications approximatives sur la connexion actuelle via navigator.connection. Une application peut s'en servir pour choisir une politique de ressources, mais ce sont des estimations facultatives, pas une garantie de débit ni une identité. La méthode robuste consiste à fournir d'abord une expérience complète, à détecter la fonctionnalité, puis à rendre toute réduction réversible.
Ce que l'API expose
L'objet NetworkInformation peut exposer effectiveType, rtt, downlink, saveData et, lorsqu'il est implémenté, type. effectiveType regroupe les conditions observées en valeurs comme slow-2g, 2g, 3g et 4g. rtt est une estimation du temps aller-retour en millisecondes et downlink une estimation en mégabits par seconde. saveData indique qu'une personne a demandé une réduction de l'utilisation des données. Ce sont des indications calculées par le navigateur et réduites pour la confidentialité, pas une mesure permanente de la bande passante disponible.
La prise en charge et la précision varient selon le navigateur et le contexte. Considérez navigator.connection comme une capacité facultative et vérifiez chaque propriété avant de l'utiliser. Si l'objet ou une propriété manque, ou si la valeur est inattendue, le contenu et les commandes nécessaires doivent rester utilisables.
Un modèle d'adaptation progressive
Définissez une politique de base fonctionnant sans indication réseau. Utilisez ensuite quelques variantes nommées, comme baseline, reduced et enhanced, pour des choix bornés : différer une vidéo non essentielle, choisir un candidat d'image déjà présent dans l'ensemble responsive ou repousser une prélecture facultative. Gardez le contenu sémantique et les commandes accessibles identiques.
const connection = navigator.connection;
const slow =
connection && (connection.saveData || connection.effectiveType === 'slow-2g' || connection.effectiveType === '2g');
const policy = slow ? 'reduced' : 'baseline';
// Appliquer un choix réversible ; le contenu nécessaire continue de charger.
Ne faites pas d'une seule indication une barrière de compatibilité. La valeur 4g ne garantit pas la réussite d'un transfert volumineux, et l'absence de valeur ne prouve pas que la connexion est lente. Ajustez la politique à partir de résultats réels comme la fin du chargement, les échecs de décodage, les annulations et le délai d'entrée.
Réagir aux changements
L'objet de connexion peut émettre un événement change. Si vous l'écoutez, ajustez le travail facultatif au lieu de retirer un contenu déjà disponible. Annulez ou mettez en pause une amélioration en attente lorsque les conditions se dégradent et proposez une reprise claire lorsqu'elles s'améliorent. Utilisez un debounce afin qu'une estimation fluctuante ne déclenche pas de téléchargements répétés.
Limitez l'adaptation à la tâche en cours. Lorsqu'une personne demande explicitement un document en pleine résolution, elle doit pouvoir continuer après une explication compréhensible ou un chargement progressif. La préférence d'économie de données est un signal utile, mais elle est différente du résultat réseau et ne doit pas remplacer silencieusement un choix explicite.
Confidentialité et limites du service
Les indications réseau peuvent enrichir une empreinte lorsqu'elles sont combinées à d'autres signaux. Utilisez-les de façon éphémère pour choisir une politique de ressources. Par défaut, ne placez pas les valeurs brutes rtt, downlink ou effectiveType dans des identifiants de compte, des journaux durables ou des analyses. Si un service a besoin d'une préférence distante, envoyez un choix temporaire comme reduced, expliquez son effet et évitez de conserver la valeur du navigateur.
Une adaptation qui modifie les données envoyées ou reçues doit être expliquée à l'utilisateur et faire l'objet d'un choix explicite. Une image de qualité moindre ou une prélecture différée est une décision de produit, pas une autorisation de collecter davantage de données. Les requêtes, permissions et décisions de compte nécessaires doivent rester indépendantes de cette API.
Tests et replis durables
Testez l'absence de navigator.connection, la présence de certaines propriétés seulement, l'activation de saveData et un événement change pendant un transfert interrompu. Vérifiez le comportement plutôt qu'un nombre fixe : le texte nécessaire reste lisible, les commandes au clavier restent disponibles et le travail facultatif peut reprendre sans boucle. Testez aussi un navigateur qui expose l'API mais indique unknown pour le type de connexion.
Les images responsive, le chargement différé, le backpressure des flux, les caches bornés et l'annulation restent utiles sans cette API. Documentez les noms et limites des politiques, révisez-les après un changement de navigateur ou de charge, et consignez les résultats plutôt qu'une classification matérielle ou réseau.
Le guide sur l'empreinte Network Information présente les enjeux de confidentialité. Le guide sur l'empreinte Client Hints explique pourquoi les indications visibles dans les requêtes doivent correspondre à la politique de la page.
Sources
Articles Connexes
Faites passer BotBrowser de la recherche à la production
Utilisez ces guides pour comprendre le modèle, puis passez à la validation multi-plateforme, aux contextes isolés et au déploiement navigateur prêt pour l'échelle.