HTML5:Network Information API详解

译文
开发 前端
页设计领域讨论最热烈的概念之一就是,响应式网页设计。响应式网页设计方面的文章已有成千上万,因此我在本文中不准备讨论。不过,响应式网页设计有一个重大局限。那就是响应式网页设计在很大程度上取决于浏览器视口(viewport)的大小。

网页设计领域讨论最热烈的概念之一就是,响应式网页设计。响应式网页设计方面的文章已有成千上万,因此我在本文中不准备讨论。不过,响应式网页设计有一个重大局限。那就是响应式网页设计在很大程度上取决于浏览器视口(viewport)的大小。

虽然这种方法很适合呈现大小和分辨率合适的图片,但它并非在所有情况下都很理想,视频内容就是一个例子。在这种情况下,我们其实需要关于设备网络连接的更多信息。

设想一下:你在智能手机或平板电脑上访问YouTube。你人在家里,通过无线网络连接上去。这种情况下,你并不关心所下载的字节数,只关注高质量视频内容。如果你通过慢速移动连接来上网,则不然。这种情况下,你希望看到视频,质量才是其次的。

我要明确一点,想要所设计的网站确实很好的每个开发人员仍需要加以优化,以便网页装入尽可能快速。不过在上面这个例子中,呈现高分辨率视频并不是浪费用户的带宽,而是改进用户体验。

而Network Information API正是我们为了解关于设备网络连接的更多信息所需要的工具。

1. Network Information API是什么东东?

Network Information API让开发人员得以访问系统与网络(蜂窝网络、无线网络和蓝牙网络等)进行通信所使用的连接类型。要是连接类型有变化,它还提供了通知脚本的一种手段。这让开发人员得以对文档对象模型(DOM)进行动态改变,及/或通知用户网络连接类型已有变化。

Network Information API规范的***个版本于2011年发布,但API此后已改变了几次。***版本只是编辑草案而已,这意味着它在将来势必还会有变化。

尽管屡屡变化,但该API的使用场合令人关注,确实值得加以探讨。我们在本文中将探讨这项规范的***版本,但我们还关注一些弃用的属性和事件,原因会在后面予以解释。

2. 实现

***版本的Network Information API公开了属于window.navigator对象的connection对象。connection对象含有一种属性:type,它返回了用户代理的连接类型。type属性可能有下面其中一个值:

  • bluetooth
  • cellular
  • ethernet
  • none
  • wifi
  • other
  • unknown

其中一些值(比如bluetooth和wifi)不需要加以说明,而另一些值则需要一点说明。cellular类型是指移动连接,比如EDGE、3G和4G等。other类型意味着,当前的连接类型不是unknown,但它也不是其他任何类型。unknown类型意味着,用户代理已建立了网络连接,但它无法确定连接类型是哪一种。

除了type外,Network Information API还公开了ontypechange事件。每当网络连接的类型有变化,就会触发该事件。

开发人员可以使用Network Information API,根据当前连接类型,改变一些特性。比如说,如果我们检测到设备在使用移动连接,就可以减慢耗用大量带宽的某个进程。该API还让我们可以将某个特定的类分配给html元素,比如high-bandwidth,就像Modernizr那样。我们可以充分利用CSS,改变元素的一个或多个属性,比如背景图片。

我们已知道了Network Information API的功用、谁能从中受益,现在不妨看看哪些浏览器支持该API。

3. 浏览器支持

截至本文撰稿时,Network Information API只受到火狐浏览器(使用厂商前缀)和Chrome Canary这两种浏览器的支持。在Chrome Canary中,我们不得不启用experimental web platform features(试验性Web平台特性)标记,才能使用该API。你可以在Paul Irish撰写的这篇文章(https://plus.google.com/+PaulIrish/posts/Tio3suW88cu)中找到更多的信息。

好像嫌对Network Information API的支持还不够糟,***版本:火狐版本30支持旧的API规范。正由于如此,又万一你想要马上试用Network Information API,有必要看一下这个API的之前规范所公开的属性和事件。

旧规范公开了两种属性:bandwidth和metered。bandwidth属性是double属性,以每秒兆字节(MB/s)为单位,估计当前的带宽。metered属性是布尔型,它指明了设备的网络连接是不是受到任何局限。之前的规范还定义了onchange事件,将上述属性的变化告知任何侦听者。

为了让你了解这个规范的新旧版本,我们在下面将制作一个使用新旧版本的演示版。

4. 演示

到目前为止,我们已探讨了API的使用场合以及API公开的属性和事件。在这个章节,我们将创建一个简单的网页,看看API的实际使用。

该演示版包括HTML5网页,网页上有一个无序列表,上面有三个列表项。每一项都含有文本片段,以证实Network Information API新旧规范公开的属性的值。列表项在默认情况下隐藏起来,只有相应的属性得到支持,才会显示。

演示版还检测浏览器是否实现了API的旧规范、浏览器是否到底支持Network Information API。在***种情况下,你会看到消息Old API version supported(旧API版本得到支持),在第二种情况下,会显示消息API not supported(API不得到支持)。

测试对Network Information API的支持很简单,如下所示:

  1. // Deal with vendor prefixes   
  2. var connection = window.navigator.connection    ||   
  3.                  window.navigator.mozConnection ||   
  4.                  nullif (connection === null) {   
  5.    // API not supported :( } else {   
  6.    // API supported! Let's start the fun :) } 

想检测实现的版本是不是旧规范,我们可以测试是否存在metered属性,如下所示:

 

  1. if ('metered' in connection) {   
  2.    // Old version } else {   
  3.    // New version } 

 

 

一旦我们测试了对Network Information API的支持,而且弄清楚了浏览器支持该规范的哪个版本,就可以为相应的事件添加处理程序。在处理程序里面,我们可以更新相应列表项的文本,比如新API规范的type。

你可以在下面找到演示版的完整代码;如果你喜欢,也可以试着改动一下。

  1. <!DOCTYPE html>   
  2. <html>   
  3.    <head>   
  4.       <meta charset="UTF-8">   
  5.       <meta name="viewport" content="width=device-width, initial-scale=1.0"/>   
  6.       <meta name="author" content="Aurelio De Rosa">   
  7.       <title>Network Information API Demo by Aurelio De Rosa</title>   
  8.       <style>   
  9.          *   
  10.          {   
  11.             -webkit-box-sizing: border-box;   
  12.             -moz-box-sizing: border-box;   
  13.             box-sizing: border-box;   
  14.          }   
  15.     
  16.          body   
  17.          {   
  18.             max-width: 500px;   
  19.             margin: 2em auto;   
  20.             padding: 0 0.5em;   
  21.             font-size: 20px;   
  22.          }   
  23.     
  24.          h1   
  25.          {   
  26.             text-align: center;   
  27.          }   
  28.     
  29.          .api-support   
  30.          {   
  31.             display: block;   
  32.          }   
  33.     
  34.          .hidden   
  35.          {   
  36.             display: none;   
  37.          }   
  38.     
  39.          .value   
  40.          {   
  41.             font-weight: bold;   
  42.          }   
  43.     
  44.          .author   
  45.          {   
  46.             display: block;   
  47.             margin-top: 1em;   
  48.          }   
  49.       </style>   
  50.    </head>   
  51.    <body>   
  52.       <h1>Network Information API</h1>   
  53.     
  54.       <span id="ni-unsupported" class="api-support hidden">API not supported</span>   
  55.       <span id="nio-supported" class="api-support hidden">Old API version supported</span>   
  56.     
  57.       <ul>   
  58.          <li class="new-api hidden">   
  59.             The connection type is <span id="t-value" class="value">undefined</span>.   
  60.          </li>   
  61.          <li class="old-api hidden">   
  62.             The connection bandwidth is <span id="b-value" class="value">undefined</span>.   
  63.          </li>   
  64.          <li class="old-api hidden">   
  65.             The connection is <span id="m-value" class="value">undefined</span>.   
  66.          </li>   
  67.       </ul>   
  68.     
  69.       <small class="author">   
  70.          Demo created by <a href="http://www.audero.it">Aurelio De Rosa</a>   
  71.          (<a href="https://twitter.com/AurelioDeRosa">@AurelioDeRosa</a>).<br />   
  72.          This demo is part of the <a href="https://github.com/AurelioDeRosa/HTML***PI-demos">HTML5 API demos repository</a>.   
  73.       </small>   
  74.     
  75.       <script>   
  76.          var connection = window.navigator.connection    ||   
  77.                           window.navigator.mozConnection ||   
  78.                           null;   
  79.          if (connection === null) {   
  80.             document.getElementById('ni-unsupported').classList.remove('hidden');   
  81.          } else if ('metered' in connection) {   
  82.             document.getElementById('nio-supported').classList.remove('hidden');   
  83.             [].slice.call(document.getElementsByClassName('old-api')).forEach(function(element) {   
  84.                element.classList.remove('hidden');   
  85.             });   
  86.     
  87.             var bandwidthValue = document.getElementById('b-value');   
  88.             var meteredValue = document.getElementById('m-value');   
  89.     
  90.             connection.addEventListener('change', function (event) {   
  91.                bandwidthValue.innerHTML = connection.bandwidth;   
  92.                meteredValue.innerHTML = (connection.metered ? '' : 'not ') + 'metered';   
  93.             });   
  94.             connection.dispatchEvent(new Event('change'));   
  95.          } else {   
  96.             var typeValue = document.getElementById('t-value');   
  97.             [].slice.call(document.getElementsByClassName('new-api')).forEach(function(element) {   
  98.                element.classList.remove('hidden');   
  99.             });   
  100.     
  101.             connection.addEventListener('typechange', function (event) {   
  102.                typeValue.innerHTML = connection.type;   
  103.             });   
  104.             connection.dispatchEvent(new Event('typechange'));   
  105.          }   
  106.       </script>   
  107.    </body>   
  108. </html> 

结束语

本文为大家介绍了Network Information API。在文章的***个部分,我们探讨了何谓API、它能为我们做什么。我们还了解了Network Information API公开的属性和事件。正如我在“浏览器支持”这部分中提到的,API目前未得到大力支持,不过这一方面归因于API的规范数次变化。

Network Information API用起来很简单;一旦它得到更多浏览器的支持,也没有理由不充分利用它提供的信息。你对该API有何看法?它得到更多浏览器的支持后,你会用它吗?

 

英文:http://code.tutsplus.com/tutorials/html5-network-information-api--cms-21598

责任编辑:林师授 来源: 51CTO
相关推荐

2013-01-18 10:59:44

IBMdW

2017-08-09 15:57:11

JavaScriptHtml5音频

2019-05-29 19:00:35

HTML5存储方式前端

2017-10-23 16:27:11

HTML5桌面Notificatio

2013-01-24 10:26:04

HTML5HTML 5HTML5的未来

2009-10-29 09:53:02

2012-04-12 11:11:15

HTML5APIWEB

2013-10-21 15:24:49

html5游戏

2011-05-13 17:36:05

HTML

2012-11-05 10:34:52

IBMdw

2013-01-04 13:39:51

2015-10-27 10:22:47

Html5API调用

2011-05-13 17:41:40

2011-01-14 17:53:33

HTML5cssweb

2023-03-16 09:00:00

HTML5HTML语言

2011-05-12 15:42:16

HTML5

2017-01-03 18:09:33

HTML5本地存储Web

2014-12-30 17:13:51

HTML5

2014-03-20 10:50:44

HTML5 定位技术

2013-03-22 08:59:57

HTML5移动应用Web App
点赞
收藏

51CTO技术栈公众号