HTML5：Network Information API详解

网页设计领域讨论最热烈的概念之一就是，响应式网页设计。响应式网页设计方面的文章已有成千上万，因此我在本文中不准备讨论。不过，响应式网页设计有一个重大局限。那就是响应式网页设计在很大程度上取决于浏览器视口（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和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的支持很简单，如下所示：

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

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

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

结束语

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

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

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