Comment utiliser l'API d'information réseau pour améliorer les sites Web réactifs

Les plats clés

• L'API d'informations réseau peut améliorer considérablement l'expérience utilisateur sur les sites Web réactifs en fournissant des informations sur la connexion réseau de l'utilisateur, y compris si elle est mesurée et une estimation de la bande passante. Ces informations peuvent être utilisées pour charger conditionnellement des ressources telles que des images, des vidéos, des polices, etc., garantissant des performances optimales même sur des connexions plus lentes ou mesurées.
• La mise en œuvre de l'API d'information réseau implique l'utilisation de JavaScript pour accéder aux propriétés et méthodes de l'API. L'objet API est renvoyé par Navigator.Connection et fournit deux propriétés en lecture seule: bande passante et mesurée. Ces propriétés peuvent être utilisées pour charger conditionnellement des images haute résolution ou d'autres grands actifs en fonction de l'état de la connexion de l'utilisateur.
• Malgré ses avantages potentiels, l'API d'information réseau a actuellement un support de navigateur limité et est susceptible de changer. Cependant, il vaut toujours la peine de considérer pour des sites Web ou des applications adaptés aux mobiles, car il peut aider à empêcher les pages de devenir trop importantes et lentes à charger sur les réseaux mobiles. Si l'API change, des mises à jour peuvent être effectuées à la fonction pertinente pour s'assurer que le site continue de réagir de manière appropriée.

La conception Web réactive a révolutionné le Web. Un seul site peut adapter sa disposition lorsqu'il est visualisé sur une gamme de dispositifs et d'écrans différents. Tout ce qui est requis, ce sont quelques requêtes multimédias pour détecter la taille de l'écran et charger des styles ou des feuilles de styles alternatifs. Cependant, l'utilisation de la taille de l'écran pour détecter les capacités du navigateur s'apparente à juger la vitesse d'une voiture en regardant sa radio. Les smartphones et les tablettes modernes ont des résolutions de plus en plus importantes et montreront joyeusement une vue de bureau typique. Si cette vue ajoute de nombreuses polices, images ou autres actifs, l'utilisateur mobile peut recevoir une expérience dégradée - et coûteuse - car elles sont sur une connexion plus lente ou mesurée.

L'API des informations réseau

L'API d'information réseau peut aider. Il indique si l'utilisateur est sur une connexion mesurée, comme le paiement à la répartition, et fournit une estimation de la bande passante. En utilisant ces informations, il est possible de charger conditionnellement des images, des vidéos, des polices et d'autres ressources. À un niveau de base, vous pouvez remplacer une requête multimédia pour vous assurer que la disposition mobile est conservée sur un réseau limité.

Prise en charge du navigateur

Malgré les spécifications du projet API d'informations réseau publiées en 2011, seuls Firefox et Chrome offrent un soutien expérimental pour le moment. Jusqu'à ce que nous ayons un consensus de fournisseur, l'API est susceptible de changer:

• L'évaluation de la bande passante est difficile. Il peut changer fréquemment lorsque vous vous déplacez ou basculez entre les réseaux mobiles et Wi-Fi. La capacité du réseau peut être bonne, mais il ne suit pas qu'une connexion à un serveur spécifique le sera. Garder l'estimation de la bande passante à jour peut également être un processeur et une forte intensité de réseau.
• Comment l'appareil peut savoir si votre connexion est mesurée? Même le Wi-Fi rapide peut avoir des coûts ridiculement exorbitants dans certains hôtels et aéroports que je pourrais mentionner. Une option serait que l'appareil vous invite lorsqu'une nouvelle connexion est établie.

Heureusement, nous pouvons utiliser la détection d'objets pour détecter la présence de l'API.

API Basics

L'objet API d'information réseau est renvoyé par Navigator.Connection. Pour assurer la compatibilité des navigateurs croisés, nous avons besoin:

<span>var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;</span>

Vous voudrez peut-être ajouter Navigator.msconnection à cette liste, bien que IE implémente normalement des API non préfixées. Notre connexion L'objet fournit deux propriétés en lecture seule:

• Bande passante - Un double représentant une estimation de la bande passante actuelle en MB / s (mégaoctets par seconde). La valeur sera nulle si l'utilisateur est hors ligne et infini s'il ne peut pas être déterminé. Remarque La plupart des fournisseurs de réseaux citent les valeurs en mégabits par seconde et une connexion mobile 3G occupé typique sera d'environ 400 Mo
METTED - Un booléen qui, lorsqu'il est vrai, signifie que la connexion de l'utilisateur est soumise à une limitation et à l'utilisation de la bande passante devrait être limitée si possible.
Par exemple:

Enfin, nous pouvons exécuter un gestionnaire d'événements de changement lorsque l'état de la connexion change, par ex.

<span>if (connection && !connection.metered && connection.bandwidth > 2) {
</span><span>// load high-resolution image
</span><span>var img = document.getElementById("kitten");
</span>
img<span>.src = "/images/kitten_hd.jpg";
</span><span>}</span>

Dans ce code, la variable globale Highbandwidth sera définie lorsque la bande passante élevée sera disponible. Un autre code pourrait réagir en conséquence, par ex. Lorsque la largeur highband est fausse:

<span>// default bandwidth
</span><span>var highBandwidth = false;
</span>
<span>// bandwidth change handler
</span><span>function <span>BandwidthChange</span>() {
</span>highBandwidth <span>= (!connection.metered && connection.bandwidth > 2);
</span><span>console.log(
</span><span>"switching to " +
</span><span>(highBandwidth ? "high" : "low") +
</span><span>" bandwidth mode"
</span><span>);
</span><span>}
</span>
<span>// Network Information object
</span><span>var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
</span>
<span>// initialize
</span><span>if (connection) {
</span>connection<span>.addEventListener("change", BandwidthChange);
</span><span><span>BandwidthChange</span>();
</span><span>}</span>

Les images haute résolution ne sont pas chargées
Les polices inutiles ne sont pas chargées
Le sondage ajax est ralenti
Les paramètres de délai d'expiration ajax sont augmentés

Pour rendre les choses un peu plus faciles, vous pouvez ajouter une classe à l'étiquette corporelle dans la bande passante fonction, par ex.

<span>var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;</span>

Cela nous permet de charger conditionnellement des éléments tels que des images d'arrière-plan dans CSS, par ex.

<span>if (connection && !connection.metered && connection.bandwidth > 2) {
</span><span>// load high-resolution image
</span><span>var img = document.getElementById("kitten");
</span>
img<span>.src = "/images/kitten_hd.jpg";
</span><span>}</span>

Cette condition peut toujours être vérifiée dans les dispositions de bureau chargées de requêtes multimédias.

devriez-vous utiliser l'API d'information réseau?

Au moment de la rédaction du moment de la rédaction, l'API d'information réseau a peu de support de navigateur et pourrait changer. Cela dit, si vous créez un site Web ou une application qui doit fonctionner sur les appareils mobiles, un peu de planification pourrait maintenant empêcher vos pages d'atteindre 1,7 Mo. Si l'API change, vous devez simplement mettre à jour la fonction BandwidthCange et votre site réagirait de manière appropriée. Je pense certainement que l'API d'information réseau mérite d'être considérée. est-ce que vous?

Questions fréquemment posées (FAQ) sur l'API des informations du réseau

Quelle est l'API des informations réseau et comment fonctionne-t-elle?

L'API d'information réseau est un outil qui fournit des informations sur la connexion réseau qu'un appareil utilise pour communiquer avec le Web. Il permet aux applications Web d'accéder à l'état du type de réseau et de la vitesse d'un appareil, qui peuvent être utilisés pour optimiser la livraison de contenu. Par exemple, si un utilisateur est sur un réseau lent, un site Web pourrait choisir d'envoyer des images de qualité inférieure pour améliorer les temps de chargement.

Comment puis-je utiliser l'API d'information réseau pour améliorer mon site Web réactif?

L'API d'informations réseau peut être utilisée pour améliorer l'expérience utilisateur sur votre site Web réactif. En détectant les conditions du réseau de l'utilisateur, vous pouvez adapter le comportement de votre site Web en conséquence. Par exemple, si le réseau de l'utilisateur est lent, vous pouvez réduire la quantité de données que vous envoyez, telles que des images de résolution inférieure ou moins de contenu vidéo. Cela peut considérablement améliorer la vitesse de chargement et les performances globales de votre site Web.

L'API d'informations réseau est-elle prise en charge par tous les navigateurs?

L'API d'information réseau n'est pas prise en charge par tous les navigateurs. À l'heure actuelle, il est pris en charge par Chrome, Opera et Android Browsers. C'est toujours une bonne idée de vérifier les dernières informations de compatibilité du navigateur sur des sites Web comme «puis-je utiliser» avant d'implémenter de nouvelles API.

Comment puis-je implémenter l'API d'informations réseau dans mon application Web?

La mise en œuvre de l'API d'informations réseau implique l'utilisation de JavaScript pour accéder aux propriétés et méthodes de l'API d'informations réseau. Vous pouvez utiliser les propriétés Navigator.Connection ou Navigator.MozConnection pour obtenir un objet NetworkInformation représentant la connexion de l'utilisateur, puis utiliser les propriétés et les gestionnaires d'événements de cet objet pour obtenir des informations sur la connexion et réagir aux modifications de la connexion.

Quel type d'informations puis-je obtenir de l'API d'informations réseau?

L'API d'informations réseau fournit plusieurs propriétés qui donnent des informations sur la connexion réseau de l'utilisateur. Il s'agit notamment de la liaison descendante, de l'efficacité et de la RTT, qui fournissent la bande passante dans les mégabits par seconde, le type effectif de la connexion et le temps aller-retour en millisecondes, respectivement.

peut être utilisée par l'API d'informations réseau pour détecter l'état hors ligne?

Oui, l'API d'information réseau peut être utilisée pour détecter si l'appareil de l'utilisateur est hors ligne. La propriété Navigator.online renvoie une valeur booléenne qui indique si l'appareil de l'utilisateur est en ligne ou hors ligne.

Quelle est la fiable des données de l'API d'informations réseau?

Les données de l'API d'information réseau sont fiables est une estimation et peut ne pas être complètement précis. Il est basé sur des conditions de réseau récemment observés et peut ne pas refléter les conditions réelles du réseau actuel. Par conséquent, il doit être utilisé comme guide plutôt que comme une mesure définitive des conditions du réseau.

L'API d'informations réseau peut-elle être utilisée avec les travailleurs de service?

Oui, l'API d'information réseau peut être utilisé avec les travailleurs du service. Cela vous permet d'adapter le comportement de votre travailleur de service en fonction des conditions de réseau de l'utilisateur, telles que la mise en cache plus agressive lorsque l'utilisateur est sur un réseau lent.

Quelles sont les implications de confidentialité de l'utilisation de l'API d'information réseau?

L'API des informations réseau peut potentiellement être utilisée pour les utilisateurs d'empreintes digitales en fonction de leurs conditions de réseau. Cependant, l'API fournit uniquement des informations à grain grossier sur le réseau, et ces informations sont également disponibles pour les applications natives, de sorte que le risque de confidentialité supplémentaire est minime.

Quels sont les cas d'utilisation pour l'API d'information du réseau?

L'API d'information réseau peut être utilisée de diverses manières pour améliorer l'expérience utilisateur. Par exemple, un site de streaming vidéo peut l'utiliser pour sélectionner automatiquement la qualité vidéo appropriée en fonction de la vitesse du réseau de l'utilisateur. Un site d'information pourrait l'utiliser pour décider de charger des images haute résolution ou de qualité inférieure. Une application Web pourrait l'utiliser pour avertir les utilisateurs lorsqu'ils sont sur un réseau lent et certaines fonctionnalités peuvent ne pas fonctionner de manière optimale.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!