HTML5: Entdecken Sie die Web Information API

Einführung

Eines der am meisten diskutierten Konzepte im Bereich Webdesign ist responsives Webdesign. Es wurden Tausende von Artikeln über responsives Webdesign geschrieben, daher werde ich in diesem Artikel nicht darauf eingehen. Responsive Webdesign weist jedoch eine wichtige Einschränkung auf. Responsive Webdesign basiert hauptsächlich auf der Größe des Browser-Ansichtsfensters.

Diese Methode eignet sich zwar hervorragend für die Bereitstellung von Bildern in der richtigen Größe und Auflösung, ist jedoch nicht für jede Situation geeignet, zum Beispiel für Videoinhalte. In diesen Fällen benötigen wir wirklich mehr Informationen über die Netzwerkverbindung des Geräts.

Angenommen, Sie greifen auf YouTube über Ihr Smartphone oder Tablet zu. Sie sind zu Hause und über WLAN verbunden. In diesem Fall ist Ihnen die Anzahl der heruntergeladenen Bytes egal, Sie sind nur an qualitativ hochwertigen Videoinhalten interessiert. Dies ist nicht der Fall, wenn Sie die Verbindung über eine langsame Mobilfunkverbindung herstellen. In diesem Fall möchten Sie das Video ansehen, die Qualität ist zweitrangig.

Mir sollte klar sein, dass jeder Entwickler, der möchte, dass seine Website wirklich großartig ist, dennoch die bereitgestellten Ressourcen optimieren muss, damit die Seiten so schnell wie möglich geladen werden. Im obigen Beispiel verschwendet die Bereitstellung hochauflösender Videos jedoch nicht die Bandbreite des Benutzers, sondern verbessert das Benutzererlebnis.

Die Netzwerkinformations-API ist genau der Ort, an dem wir mehr über die Netzwerkverbindung des Geräts erfahren müssen.

1.Was ist das?

Die Netzwerkinformations-API bietet Zugriff auf die Verbindungstypen, die das System für die Kommunikation mit Netzwerken, Mobilfunknetzen, WLAN, Bluetooth und mehr verwendet. Es bietet auch eine Möglichkeit, das Skript zu benachrichtigen, wenn sich der Verbindungstyp ändert. Dies soll es Entwicklern ermöglichen, dynamische Änderungen am DOM vorzunehmen und/oder Benutzer darüber zu informieren, dass sich der Netzwerkverbindungstyp geändert hat.

Die Network Information API-Spezifikation wurde erstmals im Jahr 2011 veröffentlicht, die API wurde jedoch seitdem mehrmals geändert. Als Beweis gilt, dass es sich bei der aktuellen Version nur um einen redaktionellen Entwurf handelt, was bedeutet, dass es in Zukunft zwangsläufig zu Änderungen kommen wird.

Trotz dieser Änderungen sind die Anwendungsfälle für diese API sehr interessant und wirklich eine Erkundung wert. In diesem Artikel besprechen wir die neueste Version der Spezifikation, schauen uns aber auch einige veraltete Eigenschaften und Ereignisse an, aus Gründen, die ich später erläutern werde.

2.Implementierung

Die aktuelle Version der Netzwerkinformations-API stellt Eigenschaften bereit, die zu window.navigator 对象的 connection 对象。 connection 对象包含一个属性，type，该属性返回用户代理的连接类型。 type gehören und einen der folgenden Werte haben können:

• 蓝牙

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

Einige dieser Werte sind selbsterklärend, wie zum Beispiel Bluetooth und bluetooth 和 wifi，而其他值则需要更多解释。 cellular 类型是指移动连接，例如 EDGE、3G、4G 等。 other 类型表示当前连接类型不是 unknown，但它也不是任何其他类型。 unknown, während andere einer ausführlicheren Erklärung bedürfen.

Typ bezieht sich auf eine mobile Verbindung wie EDGE, 3G, 4G usw. Der Typ other gibt an, dass der aktuelle Verbindungstyp nicht unknown ist, aber auch kein anderer Typ. Der Typ unknown gibt an, dass der Benutzeragent eine Netzwerkverbindung hergestellt hat, aber nicht feststellen kann, um welchen Verbindungstyp es sich handelt.

type 之外，网络信息 API 还公开 ontypechangeAußer bei

Veranstaltungen. Es wird jedes Mal ausgelöst, wenn sich der Netzwerkverbindungstyp ändert.

html 元素，例如 high-bandwidthEntwickler können die Netzwerkinformations-API verwenden, um bestimmte Funktionen basierend auf dem aktuellen Verbindungstyp zu ändern. Wenn wir beispielsweise erkennen, dass ein Gerät eine mobile Verbindung nutzt, können wir bandbreitenintensive Prozesse verlangsamen. Die API ermöglicht es uns auch,

bestimmte Klassen zuzuweisen, genau wie bei Modernizr. Mit CSS können wir eine oder mehrere Eigenschaften eines Elements ändern, beispielsweise das Hintergrundbild.

Da wir nun wissen, was die Network Information API macht und wovon wir profitieren können, schauen wir uns an, welche Browser die API unterstützen.

3.

Browser-Unterstützung

Zum Zeitpunkt des Verfassens dieses Artikels wird die Network Information API nur von Firefox und Chrome Canary unter Verwendung ihrer Herstellerpräfixe unterstützt. In Chrome Canary müssen wir das Flag „Experimentelle Webplattform-Funktionen“ aktivieren, um die API verwenden zu können. Weitere Informationen finden Sie in diesem Artikel von Paul Irish.

Als ob die Unterstützung für die Network Information API nicht schon schlimm genug wäre, unterstützt die neueste Version von Firefox, Version 30, die alte API-Spezifikation. Wenn Sie die Netzwerkinformations-API jetzt verwenden möchten, überprüfen Sie daher unbedingt die Eigenschaften und Ereignisse, die in der vorherigen API-Spezifikation bereitgestellt werden.

Die alte Spezifikation legte zwei Eigenschaften offen: bandwidth 和 metered。 bandwidth 属性是一个双精度值，表示当前带宽的估计值（以兆字节每秒 (MB/s) 为单位）。 metered 属性是一个布尔值，指定设备的网络连接是否受到任何限制。之前的规范还定义了 onchange Ereignisse, um alle Listener über Änderungen an den oben genannten Eigenschaften zu benachrichtigen.

Um Ihnen eine Vorstellung von der neuen und der alten Version der Spezifikation zu geben, werden wir im nächsten Abschnitt eine Demo mit beiden Versionen erstellen.

4. Demo

Bisher haben wir die von der API bereitgestellten Eigenschaften und Ereignisse sowie die Anwendungsfälle der API vorgestellt. In diesem Abschnitt erstellen wir eine einfache Webseite, um die API in Aktion zu sehen.

Die Demo besteht aus einer HTML5-Seite, die eine ungeordnete Liste mit drei Listenelementen enthält. Jedes Projekt enthält einen Textausschnitt, der die von der alten Spezifikation und der neuen Spezifikation der Network Messaging API bereitgestellten Eigenschaftswerte validiert. Listenelemente sind standardmäßig ausgeblendet und werden nur angezeigt, wenn das entsprechende Attribut unterstützt wird.

Die Demo erkennt auch, ob der Browser die alte API-Spezifikation (für Firefox) implementiert und ob der Browser die Network Information API unterstützt. Im ersten Fall wird die Meldung „Alte API-Version unterstützt“ angezeigt, im zweiten Fall wird die Meldung „API nicht unterstützt“ angezeigt. Der von der Network Information API unterstützte Test ist sehr einfach, wie unten gezeigt:

// 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 :)
}

Um festzustellen, ob es sich bei der implementierten Version um eine alte Spezifikation handelt, können wir wie folgt testen, ob das Attribut

vorhanden ist:

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

Sobald wir die Unterstützung für die Network Information API getestet und die vom Browser unterstützte Version der Spezifikation identifiziert haben, können wir Handler an die richtigen Ereignisse anhängen. Innerhalb des Handlers aktualisieren wir den Text des entsprechenden Listenelements, z. B.

für die neue API-Spezifikation. metered

Den vollständigen Code für die Demo finden Sie unten und können ihn bei Bedarf verwenden.

<!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>

typeFazit

In diesem Artikel habe ich Ihnen die Network Information API vorgestellt. Im ersten Teil dieses Artikels haben wir besprochen, was eine API ist und was sie für uns tun kann. Wir haben auch erfahren, welche Eigenschaften und Ereignisse die Netzwerkinformations-API offenlegt. Wie ich unter

Browser-Unterstützung

erwähnt habe, wird die API derzeit schlecht unterstützt, was teilweise auf einige Änderungen in der API-Spezifikation zurückzuführen ist.

Die Netzwerkinformations-API ist sehr einfach zu verwenden, und da sie von allen Browsern unterstützt wird, gibt es keinen Grund, die bereitgestellten Informationen nicht zu nutzen. Was halten Sie von dieser API? Werden Sie es verwenden, wenn mehr Browser es unterstützen?

Das obige ist der detaillierte Inhalt vonHTML5: Entdecken Sie die Web Information API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!