HTML5 : Explorez l'API d'informations Web

Présentation

L'un des concepts les plus discutés dans le domaine de la conception Web est la conception Web réactive. Des milliers d’articles ont été écrits sur la conception Web réactive, je n’en parlerai donc pas dans cet article. Cependant, la conception Web réactive présente une limitation importante. Elle est principalement basée sur la taille de la fenêtre d'affichage du navigateur.

Bien que cette méthode soit idéale pour fournir des images de taille et de résolution correctes, elle ne convient pas à toutes les situations, le contenu vidéo en étant un exemple. Dans ces cas-là, ce dont nous avons réellement besoin, c'est de plus d'informations sur la connexion réseau de l'appareil.

Supposons que vous accédiez à YouTube sur votre smartphone ou votre tablette. Vous êtes chez vous et connecté via Wi-Fi. Dans ce cas, vous ne vous souciez pas du nombre d'octets téléchargés, vous n'êtes intéressé que par un contenu vidéo de haute qualité. Ce n'est pas le cas si vous vous connectez via une connexion mobile lente. Dans ce cas, vous souhaitez regarder la vidéo, la qualité est secondaire.

Je dois être clair sur le fait que tout développeur qui souhaite que son site Web soit vraiment génial doit encore optimiser les ressources qu'il fournit pour permettre aux pages de se charger le plus rapidement possible. Cependant, dans l'exemple ci-dessus, la diffusion de vidéo haute résolution ne gaspille pas la bande passante de l'utilisateur mais améliore l'expérience utilisateur.

L'API Network Information est exactement l'endroit où nous devons en savoir plus sur la connexion réseau de l'appareil.

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

L'API Network Information donne accès aux types de connexion que le système utilise pour communiquer avec les réseaux, les réseaux cellulaires, le Wi-Fi, le Bluetooth, etc. Il fournit également un moyen de notifier le script lorsque le type de connexion change. Cela permet aux développeurs d'apporter des modifications dynamiques au DOM et/ou d'informer les utilisateurs que le type de connexion réseau a changé.

La spécification de l'API Network Information a été publiée pour la première fois en 2011, mais l'API a changé plusieurs fois depuis lors. Pour preuve, la version actuelle n’est qu’une ébauche éditoriale, ce qui signifie que des changements sont appelés à intervenir dans le futur.

Malgré ces changements, les cas d'utilisation de cette API sont très intéressants et méritent vraiment d'être explorés. Dans cet article, nous discuterons de la dernière version de la spécification, mais nous examinerons également certaines propriétés et événements obsolètes pour des raisons que j'expliquerai plus tard.

2.Mise en œuvre

La version actuelle de l'API Network Information expose les propriétés appartenant à window.navigator 对象的 connection 对象。 connection 对象包含一个属性，type，该属性返回用户代理的连接类型。 type qui peuvent avoir l'une des valeurs suivantes :

• 蓝牙

• cellular
• 以太网
• none
• wifi
• 其他
• 未知

Certaines de ces valeurs sont explicites, comme bluetooth et bluetooth 和 wifi，而其他值则需要更多解释。 cellular 类型是指移动连接，例如 EDGE、3G、4G 等。 other 类型表示当前连接类型不是 unknown，但它也不是任何其他类型。 unknown, tandis que d'autres nécessitent plus d'explications.

Le type fait référence à une connexion mobile telle que EDGE, 3G, 4G, etc. Le type other indique que le type de connexion actuel n'est pas inconnu, mais ce n'est pas non plus un autre type. Le type inconnu indique que l'agent utilisateur a établi une connexion réseau mais ne peut pas déterminer de quel type de connexion il s'agissait.

type 之外，网络信息 API 还公开 ontypechangeSauf pour les événements

. Il est déclenché à chaque fois que le type de connexion réseau change.

html 元素，例如 high-bandwidthLes développeurs peuvent utiliser l'API Network Information pour modifier certaines fonctionnalités en fonction du type de connexion actuel. Par exemple, si nous détectons qu’un appareil utilise une connexion mobile, nous pouvons ralentir les processus gourmands en bande passante. L'API nous permet également d'attribuer des classes spécifiques à

, à la manière de Modernizr. Nous pouvons utiliser CSS pour modifier une ou plusieurs propriétés d'un élément, comme l'image d'arrière-plan.

Maintenant que nous savons ce que fait l'API Network Information et ce dont nous pouvons bénéficier, voyons quels navigateurs prennent en charge l'API.

3.

Prise en charge du navigateur

Au moment de la rédaction, l'API Network Information n'est prise en charge que par Firefox et Chrome Canary en utilisant les préfixes de leurs fournisseurs. Dans Chrome Canary, nous devons activer l'indicateur Experimental Web Platform Features

pour utiliser l'API. Vous pouvez trouver plus d’informations dans cet article de Paul Irish.

Comme si la prise en charge de l'API Network Information n'était pas assez mauvaise, la dernière version de Firefox, la version 30, prend en charge l'ancienne spécification API. Par conséquent, si vous souhaitez utiliser l'API Network Information maintenant, veillez à examiner les propriétés et les événements exposés par la spécification d'API précédente. 🎜

L'ancienne spécification exposait deux propriétés : bandwidth 和 metered。 bandwidth 属性是一个双精度值，表示当前带宽的估计值（以兆字节每秒 (MB/s) 为单位）。 metered 属性是一个布尔值，指定设备的网络连接是否受到任何限制。之前的规范还定义了 onchange Des événements pour informer tous les auditeurs des modifications apportées aux propriétés ci-dessus.

Pour vous donner une idée des nouvelles et anciennes versions de la spécification, dans la section suivante, nous créerons une démo en utilisant les deux versions.

4. Démo

Jusqu'à présent, nous avons présenté 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 de trois éléments de liste. Chaque projet contient un extrait de texte qui valide les valeurs de propriété exposées par l'ancienne spécification et la nouvelle spécification de l'API de messagerie réseau. Les éléments de liste sont masqués par défaut et ne sont affichés que si l'attribut correspondant est pris en charge.

La démo détecte également si le navigateur implémente l'ancienne spécification API (pour Firefox) et si le navigateur prend en charge l'API Network Information. Dans le premier cas, vous verrez le message Old API Version Supported et dans le second cas, le message API Not Supported sera affiché.

Le test pris en charge par l'API Network Information est très simple, comme indiqué ci-dessous :

// Deal with vendor prefixes
var connection = window.navigator.connection    ||
                 window.navigator.mozConnection ||
                 null;
if (connection === null) {
   // API not supported :(
} else {
   // API supported! Let's start the fun :)
}

Pour détecter si la version implémentée est une ancienne spécification, nous pouvons tester si l'attribut metered est présent comme suit :

if ('metered' in connection) {
   // Old version
} else {
   // New version
}

Une fois que nous avons testé la prise en charge de l'API Network Information et identifié la version de la spécification prise en charge par le navigateur, nous pouvons attacher des gestionnaires aux événements corrects. Dans le gestionnaire, nous mettons à jour le texte de l'élément de liste correspondant, tel que type pour la nouvelle spécification API.

Vous pouvez trouver le code complet de la démo ci-dessous et vous pouvez l'utiliser si vous le souhaitez.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <meta name="author" content="Aurelio De Rosa">
      <title>Network Information API Demo by Aurelio De Rosa</title>
      <style>
         *
         {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
         }

         body
         {
            max-width: 500px;
            margin: 2em auto;
            padding: 0 0.5em;
            font-size: 20px;
         }

         h1
         {
            text-align: center;
         }

         .api-support
         {
            display: block;
         }

         .hidden
         {
            display: none;
         }

         .value
         {
            font-weight: bold;
         }

         .author
         {
            display: block;
            margin-top: 1em;
         }
      </style>
   </head>
   <body>
      <h1>Network Information API</h1>

      <span id="ni-unsupported" class="api-support hidden">API not supported</span>
      <span id="nio-supported" class="api-support hidden">Old API version supported</span>

      <ul>
         <li class="new-api hidden">
            The connection type is <span id="t-value" class="value">undefined</span>.
         </li>
         <li class="old-api hidden">
            The connection bandwidth is <span id="b-value" class="value">undefined</span>.
         </li>
         <li class="old-api hidden">
            The connection is <span id="m-value" class="value">undefined</span>.
         </li>
      </ul>

      <small class="author">
         Demo created by <a href="http://www.audero.it">Aurelio De Rosa</a>
         (<a href="https://twitter.com/AurelioDeRosa">@AurelioDeRosa</a>).<br />
         This demo is part of the <a href="https://github.com/AurelioDeRosa/HTML5-API-demos">HTML5 API demos repository</a>.
      </small>

      <script>
         var connection = window.navigator.connection    ||
                          window.navigator.mozConnection ||
                          null;
         if (connection === null) {
            document.getElementById('ni-unsupported').classList.remove('hidden');
         } else if ('metered' in connection) {
            document.getElementById('nio-supported').classList.remove('hidden');
            [].slice.call(document.getElementsByClassName('old-api')).forEach(function(element) {
               element.classList.remove('hidden');
            });

            var bandwidthValue = document.getElementById('b-value');
            var meteredValue = document.getElementById('m-value');

            connection.addEventListener('change', function (event) {
               bandwidthValue.innerHTML = connection.bandwidth;
               meteredValue.innerHTML = (connection.metered ? '' : 'not ') + 'metered';
            });
            connection.dispatchEvent(new Event('change'));
         } else {
            var typeValue = document.getElementById('t-value');
            [].slice.call(document.getElementsByClassName('new-api')).forEach(function(element) {
               element.classList.remove('hidden');
            });

            connection.addEventListener('typechange', function (event) {
               typeValue.innerHTML = connection.type;
            });
            connection.dispatchEvent(new Event('typechange'));
         }
      </script>
   </body>
</html>

Conclusion

Dans cet article, je vous ai présenté l'API Network Information. Dans la première partie de cet article, nous avons expliqué ce qu'est une API et ce qu'elle peut faire pour nous. Nous avons également découvert les propriétés et les événements exposés par l'API Network Information. Comme je l'ai mentionné dans Support du navigateur, l'API est actuellement mal prise en charge, en partie à cause de certains changements dans la spécification de l'API.

L'API Network Information est très simple à utiliser, et une fois de plus les navigateurs la prennent en charge, il n'y a aucune raison de ne pas profiter des informations qu'elle fournit. Que pensez-vous de cette API ? L’utiliserez-vous lorsque davantage de navigateurs le prendront en charge ?

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!