HTML5：探索網頁資訊 API-js教程-PHP中文網

HTML5：探索网络信息 API

簡介

網頁設計領域討論最多的概念之一是響應式網頁設計。關於響應式網頁設計的文章已有數千篇，因此我不會在本文中討論它。然而，響應式網頁設計有一個重要的限制，響應式網頁設計大部分是基於瀏覽器視窗的大小。

雖然這種方法非常適合提供正確尺寸和解析度的圖像，但它並不適合所有情況，影片內容就是一個例子。在這些情況下，我們真正需要的是有關設備網路連接的更多資訊。

假設您正在智慧型手機或平板電腦上造訪 YouTube。您在家中並透過 Wi-Fi 連線。在這種情況下，您並不關心正在下載的位元組數，您只對高品質視訊內容感興趣。如果您透過慢速移動連接進行連接，則情況並非如此。在這種情況下，您想看視頻，品質是次要的。

我應該明確的是，每個希望網站真正優秀的開發者仍然必須優化其所提供的資源，以允許頁面盡可能快地加載。不過，在上面的範例中，提供高解析度影片並不是浪費用戶的頻寬，而是改善了用戶體驗。

網路資訊 API 正是我們需要了解更多關於設備網路連接的資訊的地方。

1.它是什麼？

網路資訊 API 提供對系統用於與網路、蜂窩網路、Wi-Fi、藍牙等進行通訊的連接類型的存取。它還提供了一種在連接類型變更時通知腳本的方法。這是為了允許開發人員對 DOM 進行動態變更和/或通知使用者網路連線類型已變更。

網路資訊 API 規格於 2011 年首次發布，但此後該 API 已發生多次變更。作為證明，當前版本只是編輯草稿，這意味著將來肯定會發生變化。

儘管發生了這些變化，但該 API 的用例非常有趣，確實值得探索。在本文中，我們將討論該規範的最新版本，但我們還將查看一些已棄用的屬性和事件，原因我將在稍後解釋。

2.實作

目前版本的網路資訊 API 公開了屬於 window.navigator 物件的 connection 物件。 connection 物件包含一個屬性，type，該屬性傳回使用者代理程式的連線類型。 type 屬性可以有下列值之一：

藍牙
cellular
#乙太網路
none
#wifi
其他
未知

其中一些值是不言自明的，例如 bluetooth 和 wifi#，而其他值則需要更多解釋。 cellular 類型是指行動連接，例如 EDGE、3G、4G 等。 other 類型表示目前連線類型不是 unknown，但它也不是任何其他類型。 unknown 類型表示用戶代理程式已建立網路連接，但無法確定連接類型是什麼。

除了 type 之外，網路資訊 API 也公開 ontypechange 事件。每次網路連線類型發生變化時都會觸發它。

開發者可以使用網路資訊 API 根據目前的連線類型變更某些功能。例如，如果我們偵測到設備正在使用行動連接，我們可以減慢佔用大量頻寬的進程。 API 還允許我們將特定的類別分配給 html 元素，例如 high-bandwidth，與 Modernizr 的方式相同。我們可以利用 CSS 來變更元素的一個或多個屬性，例如背景圖片。

既然我們知道了 Network Information API 的作用以及我們可以從中受益，那麼讓我們看看哪些瀏覽器支援該 API。

3.瀏覽器支援

在撰寫本文時，網路資訊 API 僅受使用其供應商前綴的 Firefox 和 Chrome Canary 支援。在 Chrome Canary 中，我們必須啟用實驗性網路平台功能標誌才能使用 API。您可以在 Paul Irish 的這篇文章中找到更多資訊。

好像對網路資訊 API 的支援還不夠差，最新版本 30 版的 Firefox 支援舊的 API 規格。因此，如果您現在想使用 Network Information API，請務必查看先前的 API 規格所公開的屬性和事件。

舊規範公開了兩個屬性：bandwidth 和 metered。 bandwidth 屬性是一個雙精確度值，表示目前頻寬的估計值（以兆位元組每秒 (MB/s) 為單位）。 metered 屬性是一個布林值，指定裝置的網路連線是否受到任何限制。先前的規格也定義了 onchange 事件，以通知任何偵聽器上述屬性的變更。

為了讓您了解規範的新版本和舊版本，在下一節中我們將建立一個使用這兩個版本的示範。

4. 示範

到目前為止，我們已經介紹了 API 公開的屬性和事件以及 API 的用例。在本部分中，我們將建立一個簡單的網頁來查看 API 的運作情況。

此示範由一個 HTML5 頁面組成，該頁麵包含一個包含三個清單項目的無序列表。每個項目都包含一個文字片段，用於驗證網路資訊 API 的舊規格和新規範公開的屬性值。清單項目預設為隱藏，僅在支援對應屬性時才顯示。

此示範還會偵測瀏覽器是否實作舊的 API 規格（針對 Firefox）以及瀏覽器是否支援網路資訊 API。在第一種情況下，您將看到支援舊 API 版本訊息，在第二種情況下，將顯示不支援 API 訊息。

網路資訊 API 支援的測試非常簡單，如下所示：

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

登入後複製

要偵測實作的版本是否是舊規範，我們可以測試 metered 屬性是否存在，如下所示：

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

登入後複製

一旦我們測試了對網路資訊 API 的支持，並確定了瀏覽器支援的規範版本，我們就可以將處理程序附加到正確的事件。在處理程序內，我們更新相應清單項目的文本，例如新 API 規範的 type。

您可以在下面找到演示的完整程式碼，如果您願意，也可以使用它。

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

登入後複製