HTML5：Network Information API詳解
譯文網(wǎng)頁設(shè)計(jì)領(lǐng)域討論最熱烈的概念之一就是，響應(yīng)式網(wǎng)頁設(shè)計(jì)。響應(yīng)式網(wǎng)頁設(shè)計(jì)方面的文章已有成千上萬，因此我在本文中不準(zhǔn)備討論。不過，響應(yīng)式網(wǎng)頁設(shè)計(jì)有一個(gè)重大局限。那就是響應(yīng)式網(wǎng)頁設(shè)計(jì)在很大程度上取決于瀏覽器視口（viewport）的大小。
雖然這種方法很適合呈現(xiàn)大小和分辨率合適的圖片，但它并非在所有情況下都很理想，視頻內(nèi)容就是一個(gè)例子。在這種情況下，我們其實(shí)需要關(guān)于設(shè)備網(wǎng)絡(luò)連接的更多信息。
設(shè)想一下：你在智能手機(jī)或平板電腦上訪問YouTube。你人在家里，通過無線網(wǎng)絡(luò)連接上去。這種情況下，你并不關(guān)心所下載的字節(jié)數(shù)，只關(guān)注高質(zhì)量視頻內(nèi)容。如果你通過慢速移動(dòng)連接來上網(wǎng)，則不然。這種情況下，你希望看到視頻，質(zhì)量才是其次的。
我要明確一點(diǎn)，想要所設(shè)計(jì)的網(wǎng)站確實(shí)很好的每個(gè)開發(fā)人員仍需要加以優(yōu)化，以便網(wǎng)頁裝入盡可能快速。不過在上面這個(gè)例子中，呈現(xiàn)高分辨率視頻并不是浪費(fèi)用戶的帶寬，而是改進(jìn)用戶體驗(yàn)。
而Network Information API正是我們?yōu)榱私怅P(guān)于設(shè)備網(wǎng)絡(luò)連接的更多信息所需要的工具。
1. Network Information API是什么東東？
Network Information API讓開發(fā)人員得以訪問系統(tǒng)與網(wǎng)絡(luò)（蜂窩網(wǎng)絡(luò)、無線網(wǎng)絡(luò)和藍(lán)牙網(wǎng)絡(luò)等）進(jìn)行通信所使用的連接類型。要是連接類型有變化，它還提供了通知腳本的一種手段。這讓開發(fā)人員得以對文檔對象模型（DOM）進(jìn)行動(dòng)態(tài)改變，及/或通知用戶網(wǎng)絡(luò)連接類型已有變化。
Network Information API規(guī)范的***個(gè)版本于2011年發(fā)布，但API此后已改變了幾次。***版本只是編輯草案而已，這意味著它在將來勢必還會有變化。
盡管屢屢變化，但該API的使用場合令人關(guān)注，確實(shí)值得加以探討。我們在本文中將探討這項(xiàng)規(guī)范的***版本，但我們還關(guān)注一些棄用的屬性和事件，原因會在后面予以解釋。
2. 實(shí)現(xiàn)
***版本的Network Information API公開了屬于window.navigator對象的connection對象。connection對象含有一種屬性：type，它返回了用戶代理的連接類型。type屬性可能有下面其中一個(gè)值：
- bluetooth
- cellular
- ethernet
- none
- wifi
- other
- unknown
其中一些值（比如bluetooth和wifi）不需要加以說明，而另一些值則需要一點(diǎn)說明。cellular類型是指移動(dòng)連接，比如EDGE、3G和4G等。other類型意味著，當(dāng)前的連接類型不是unknown，但它也不是其他任何類型。unknown類型意味著，用戶代理已建立了網(wǎng)絡(luò)連接，但它無法確定連接類型是哪一種。
除了type外，Network Information API還公開了ontypechange事件。每當(dāng)網(wǎng)絡(luò)連接的類型有變化，就會觸發(fā)該事件。
開發(fā)人員可以使用Network Information API，根據(jù)當(dāng)前連接類型，改變一些特性。比如說，如果我們檢測到設(shè)備在使用移動(dòng)連接，就可以減慢耗用大量帶寬的某個(gè)進(jìn)程。該API還讓我們可以將某個(gè)特定的類分配給html元素，比如high-bandwidth，就像Modernizr那樣。我們可以充分利用CSS，改變元素的一個(gè)或多個(gè)屬性，比如背景圖片。
我們已知道了Network Information API的功用、誰能從中受益，現(xiàn)在不妨看看哪些瀏覽器支持該API。
3. 瀏覽器支持
截至本文撰稿時(shí)，Network Information API只受到火狐瀏覽器（使用廠商前綴）和Chrome Canary這兩種瀏覽器的支持。在Chrome Canary中，我們不得不啟用experimental web platform features（試驗(yàn)性Web平臺特性）標(biāo)記，才能使用該API。你可以在Paul Irish撰寫的這篇文章（https://plus.google.com/+PaulIrish/posts/Tio3suW88cu）中找到更多的信息。
好像嫌對Network Information API的支持還不夠糟，***版本：火狐版本30支持舊的API規(guī)范。正由于如此，又萬一你想要馬上試用Network Information API，有必要看一下這個(gè)API的之前規(guī)范所公開的屬性和事件。
舊規(guī)范公開了兩種屬性：bandwidth和metered。bandwidth屬性是double屬性，以每秒兆字節(jié)（MB/s）為單位，估計(jì)當(dāng)前的帶寬。metered屬性是布爾型，它指明了設(shè)備的網(wǎng)絡(luò)連接是不是受到任何局限。之前的規(guī)范還定義了onchange事件，將上述屬性的變化告知任何偵聽者。
為了讓你了解這個(gè)規(guī)范的新舊版本，我們在下面將制作一個(gè)使用新舊版本的演示版。
4. 演示
到目前為止，我們已探討了API的使用場合以及API公開的屬性和事件。在這個(gè)章節(jié)，我們將創(chuàng)建一個(gè)簡單的網(wǎng)頁，看看API的實(shí)際使用。
該演示版包括HTML5網(wǎng)頁，網(wǎng)頁上有一個(gè)無序列表，上面有三個(gè)列表項(xiàng)。每一項(xiàng)都含有文本片段，以證實(shí)Network Information API新舊規(guī)范公開的屬性的值。列表項(xiàng)在默認(rèn)情況下隱藏起來，只有相應(yīng)的屬性得到支持，才會顯示。
演示版還檢測瀏覽器是否實(shí)現(xiàn)了API的舊規(guī)范、瀏覽器是否到底支持Network Information API。在***種情況下，你會看到消息Old API version supported（舊API版本得到支持），在第二種情況下，會顯示消息API not supported（API不得到支持）。
測試對Network Information 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 :) }
想檢測實(shí)現(xiàn)的版本是不是舊規(guī)范，我們可以測試是否存在metered屬性，如下所示：
- if ('metered' in connection) {
- // Old version } else {
- // New version }
一旦我們測試了對Network Information API的支持，而且弄清楚了瀏覽器支持該規(guī)范的哪個(gè)版本，就可以為相應(yīng)的事件添加處理程序。在處理程序里面，我們可以更新相應(yīng)列表項(xiàng)的文本，比如新API規(guī)范的type。
你可以在下面找到演示版的完整代碼；如果你喜歡，也可以試著改動(dòng)一下。
- <!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/HTML***PI-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>
結(jié)束語
本文為大家介紹了Network Information API。在文章的***個(gè)部分，我們探討了何謂API、它能為我們做什么。我們還了解了Network Information API公開的屬性和事件。正如我在“瀏覽器支持”這部分中提到的，API目前未得到大力支持，不過這一方面歸因于API的規(guī)范數(shù)次變化。
Network Information API用起來很簡單；一旦它得到更多瀏覽器的支持，也沒有理由不充分利用它提供的信息。你對該API有何看法？它得到更多瀏覽器的支持后，你會用它嗎？
英文：http://code.tutsplus.com/tutorials/html5-network-information-api--cms-21598
