introduction

L'un des concepts les plus discutés dans le monde de la conception Web est la conception Web réactive. Des milliers d'articles ont été écrits sur la conception de sites Web adaptatifs et je ne vais donc pas en parler dans cet article. Cependant, la conception Web réactive présente une limite importante. La conception Web réactive est en grande partie basée sur la taille de la fenêtre d'affichage du navigateur..

Bien que cette approche fonctionne bien pour afficher des images de la taille et de la résolution appropriées, elle n’est pas idéale dans toutes les situations, le contenu vidéo étant un exemple. Ce dont nous avons vraiment besoin dans ces cas, c'est davantage d'informations sur la connexion réseau de l'appareil..

Imaginez que vous visitez YouTube sur votre smartphone ou votre tablette. Vous êtes à la maison et connecté via Wi-Fi. Dans de tels cas, vous ne vous souciez pas du nombre d'octets téléchargés, vous ne vous intéressez qu'au contenu vidéo de haute qualité. Ce n'est pas vrai si vous êtes connecté via une connexion mobile lente. Dans ce cas, vous voulez voir la vidéo, la qualité est secondaire.

Je tiens à préciser que tout développeur souhaitant un site Web vraiment performant doit encore optimiser les actifs qu’il sert pour permettre au chargement des pages le plus rapidement possible. Cependant, dans l'exemple ci-dessus, la diffusion d'une vidéo haute résolution ne constitue pas une perte de bande passante, mais une amélioration de l'expérience utilisateur..

L’API d’information réseau est exactement ce dont nous avons besoin pour en savoir plus sur la connexion réseau du périphérique..

1. Qu'est-ce que c'est?

L'API d'informations réseau donne accès au type de connexion utilisé par le système pour communiquer avec le réseau, cellulaire, Wi-Fi, Bluetooth, etc. Il fournit également un moyen de notifier les scripts si le type de connexion change. Cela permet aux développeurs d'apporter des modifications dynamiques au DOM et / ou d'informer l'utilisateur que le type de connexion réseau a changé.

La première version de la spécification de l'API Network Information était en 2011, mais l'API a changé plusieurs fois depuis. Pour preuve, la version actuelle est un brouillon de l'éditeur, ce qui signifie qu'elle ne peut que changer à l'avenir..

Malgré les changements, les cas d'utilisation de cette API sont si intéressants qu'il vaut vraiment la peine de l'explorer. Dans cet article, nous aborderons la dernière version de la spécification, mais nous examinerons également certaines propriétés et certains événements obsolètes pour des raisons que j'expliquerai plus tard..

2. mise en œuvre

La version actuelle de l’API d’informations réseau expose une lien objet qui appartient à la window.navigator objet. le lien objet contient une propriété, type, qui retourne le type de connexion de l'agent utilisateur. le type property peut avoir l'une des valeurs suivantes:

• Bluetooth
  
• cellulaire
• ethernet
• aucun
• Wifi
• autre
• inconnu

Certaines de ces valeurs, telles que Bluetooth et Wifi, s'expliquent d'eux-mêmes alors que d'autres ont besoin d'un peu plus d'explications. le cellulaire type fait référence à une connexion mobile, telle que EDGE, 3G, 4G, etc. autre type signifie que le type de connexion actuel n'est pas inconnu, mais ce n'est pas l'un des autres types non plus. le inconnu type signifie que l'agent d'utilisateur a établi une connexion réseau, mais il est incapable de déterminer le type de connexion..

En plus de type, l’API d’information réseau expose les ne change pas un événement. Il est déclenché chaque fois que le type de connexion réseau change.

Les développeurs peuvent utiliser l'API d'informations réseau pour modifier certaines fonctionnalités en fonction du type de connexion actuel. Par exemple, nous pouvons ralentir un processus qui utilise une bande passante importante si nous détectons que le périphérique utilise une connexion mobile. L’API nous permet également d’affecter une classe spécifique au html élément, par exemple bande passante élevée, de la même manière que Modernizr. Nous pouvons utiliser CSS pour modifier une ou plusieurs propriétés d’un élément, telles que l’image d’arrière-plan..

Maintenant que nous savons ce que fait l'API d'informations réseau et qui peut en tirer profit, voyons quels navigateurs prennent en charge l'API..

3. Support du navigateur

Au moment de la rédaction, l’API d’informations réseau n’est prise en charge que par Firefox, en utilisant son préfixe de fournisseur, et Chrome Canary. Dans Chrome Canary, nous devons activer le fonctionnalités de la plateforme web expérimentale flag pour utiliser l'API. Vous pouvez trouver plus d'informations dans ce post par Paul Irish.

Comme si la prise en charge de l’API d’information réseau n’était pas déjà suffisamment insuffisante, Firefox jusqu’à la version 30, la version la plus récente, prend en charge l’ancienne spécification de l’API. Pour cette raison, et si vous souhaitez utiliser l’API d’informations réseau à l’heure actuelle, il est important d’examiner les propriétés et les événements exposés par la spécification précédente de l’API..

L'ancienne spécification exposait deux propriétés, bande passante et dosé. le bande passante La propriété est un double représentant une estimation de la bande passante actuelle en mégaoctets par seconde (Mo / s). le dosé propriété est un booléen qui spécifie si la connexion réseau du périphérique est soumise à des limitations. La spécification précédente définissait également un sur le changement événement pour informer les auditeurs des modifications des propriétés susmentionnées.

Pour vous donner une idée de la nouvelle et de l'ancienne version de la spécification, nous allons, dans la section suivante, créer une démonstration utilisant les deux.

4. Démo

Jusqu'à présent, nous avons couvert les propriétés et les événements exposés par l'API, ainsi que les cas d'utilisation de l'API. Dans cette section, nous allons créer une page Web simple pour voir l'API en action.

La démo consiste en une page HTML5 contenant une liste non ordonnée avec trois éléments de liste. Chaque élément contient un extrait de texte permettant de vérifier la valeur des propriétés exposées par l'ancienne et la nouvelle spécification de l'API d'informations réseau. Les éléments de la liste sont masqués par défaut et ne sont affichés que si les propriétés correspondantes sont prises en charge..

La démo détecte également si le navigateur implémente l'ancienne spécification de l'API (pour cibler Firefox) et s'il prend en charge l'API d'informations réseau. Dans le premier cas, vous verrez le message Ancienne version de l'API supportée, dans le second cas le message API non prise en charge sera affiché.

Tester la prise en charge de l'API d'informations réseau est très simple, comme vous pouvez le voir ci-dessous:

// Traitement des préfixes de fournisseur var connection = window.navigator.connection || window.navigator.mozConnection || nul; if (connection === null) // API non prise en charge :( else // API prise en charge! Commençons le fun :)

Pour détecter si la version implémentée est l’ancienne spécification, nous pouvons tester la présence du dosé propriété comme indiqué ci-dessous:

if ('metered' en connexion) // Ancienne version else // Nouvelle version

Une fois que nous avons testé la prise en charge de l’API d’information réseau et que nous avons identifié la version de la spécification prise en charge par le navigateur, nous pouvons associer un gestionnaire à l’événement approprié. Dans le gestionnaire, nous mettons à jour le texte de l'élément de liste correspondant, par exemple type pour la nouvelle spécification de l'API.

Vous pouvez trouver le code complet de la démo ci-dessous et vous pouvez également jouer avec si vous le souhaitez.

          
API d'informations réseau
 API non prise en charge Ancienne version de l'API supportée 
 
 Le type de connexion est indéfini. 
 
 La bande passante de connexion est indéfini. 
 
 La connexion est indéfini. 
 
  Démo créée par Aurelio De Rosa (@AurelioDeRosa).
 Cette démo fait partie du référentiel de démos de l'API HTML5.    

Conclusion

Dans cet article, je vous ai présenté l'API d'informations réseau. Dans la première partie de cet article, nous avons expliqué ce qu'est l'API et ce qu'elle peut faire pour nous. Nous avons également appris les propriétés et les événements exposés par l’API d’information réseau. Comme je l'ai mentionné dans Prise en charge du navigateur, L'API est actuellement mal prise en charge, mais cela est dû en partie à plusieurs modifications de la spécification de l'API..

L’API d’information réseau est très simple à utiliser et il n’ya aucune excuse pour ne pas tirer parti des informations qu’elle offre une fois qu’elles sont prises en charge par plusieurs navigateurs. Que pensez-vous de cette API? Allez-vous l'utiliser quand il est supporté par plus de navigateurs?