官方文档
demo地址
[demo]http://mjs.sinaimg.cn/wap/online/cms/article/cm/network.html)
demo来源于地址http://www.w3cmark.com/2016/442.html
摘要
在设备的使用中，这个Network Information API用于 web 尝试处理网络连接信息。
用例与需求
本文档尝试处理来自于Review of Apps that Use Network Information的需求，如下：
- 提供获取当前网络连接的类型在系统与网络有交互的时候,这个信息需要在页面加载完毕立刻被提供，或者在尽可能接近加载完毕状态提供
- 提供一种脚本可以被通知到的方式如果这个连接类型有改变。这样就可以允许开发者动态的改变DOM且或者通知用户他们的网络类型有变化（这种变化会在某种程度上影响这他们）
使用用例（官方文档）
EXAMPLE 1
//得到网络链接类型
var type = navigator.connection.type;
// 在第一次网络跳跃的时候得到下行最大比特率
var max = navigator.connection.downlinkMax;
function changeHandler(e) {
// 网络链接改变时处理函数
}
// 注册网络链接改变事件
navigator.connection.onchange = changeHandler;
// 另一种注册方式
navigator.connection.addEventListener('change', changeHandler);
连接类型
- bluetooth
蓝牙连接 - cellular
A cellular connection (e.g., EDGE, HSPA, LTE, etc.). - ethernet
以太网链接
none - No network connection.
没有网络链接.等同于navigator.onLine === false - mixed
用户代理用的多个链接类型 - other
链接类型未知 - unknown
用户代理建立了链接，但是不能够或者不愿意确定潜在的网络连接类型 - wifi
wifi连接 - wimax
wifimax连接
以上的链接类型都可以通过ConnectionType枚举
ConnectionType枚举
enum ConnectionType {
"bluetooth",
"cellular",
"ethernet",
"mixed",
"none",
"other",
"unknown",
"wifi",
"wimax"
};
以上为尝试翻译的官方文档前几行
个人测试说明:
由于在业务中最为关心当前网络状态是否为wifi，所以仅判断了当前APP是否支持navigator.connection.type判断其是否可以正则匹配到wifi
测试结果整理表格如下：
| 机型 | 系统版本 | 浏览器 | 版本 | 结论 | |
|---|---|---|---|---|---|
| 小米5 | A7.0 | weixin | 6.5 | type:wifi | 支持 |
| 小米5 | A7.0 | 7.5 | type:wifi | 支持 | |
| 小米5 | A7.0 | UC | 11.6.2 | type:wifi | 支持 |
| 华为MT7 | A5.1.1 | UC | 11.6.2 | type:wifi | 支持 |
| 华为P9 | A6.0 | 7.7.0 | type:wifi | 支持 | |
| 华为P9 | A6.0 | UC | 11.0.4 | type:5(wifi) | 支持 |
| 华为P9 | A6.0 | 6.6.8 | type:wifi | 支持 | |
| 红米Note | A5.0.2 | UC | 11.6.1 | type:wifi | 支持 |
| iPhone | 10_3_2 | weixin | 6.5.12 | type:未知 NetType wifi | 支持 |
| iPhone | 10_3_2 | 7.1.5 | type:未知 NetType wifi | 支持 | |
| 三星Note5 | A6.0 | 原生 | 5.4 | type:wifi | 支持 |
| 三星Note5 | A6.0 | 6.12.3 | type:wifi | 支持 | |
| vivo X9 | A6.0 | 7.7.0 | type:wifi | 支持 | |
| vivo X9 | A7.0 | weixin | 6.5 | type:wifi | 支持 |
当前测试初步结论：
-
navigator.connectionAPI不支持：
iphone（微信、微博、UC、QQ浏览器、百度浏览器）安卓（QQ浏览器） - 支持navigator.connection但不能获取到具体网络type：
安卓（百度浏览器） - 支持navigator.connection且可获取到type(大多数)：
安卓(UC、微信、微博)
当前测试特例
支持navigator.connection且可获取到type(大多数)中特例如下：
| 机型 | 系统版本 | 浏览器 | 版本 | 结论 |
|---|---|---|---|---|
| 红米Note | 5.0 | 7.7.1 | type:unknown 不支持 |
[type:unknown]属于支持navigator.connection但不能获取到具体网络type
华为p9不返回wifi字样 而是通过数字标识
| 机型 | 系统版本 | 浏览器 | 版本 | 结论 | |
|---|---|---|---|---|---|
| 华为P9 | A6.0 | UC | 11.0.4 | type:5(wifi) | 支持 |
| 华为P9 | A6.0 | UC | 11.0.4 | type:2(4g) | 支持 |
当前测试结论：
由于测试手机有限，并未覆盖到安卓各种版本与机型,若有错误还请提出
暂认为安卓UC、微博支持较好
微信在安卓和ios另有可以获取的方式
微信/QQ获取状态说明
微信和qq我们可以通过另一种方式在安卓、IOS拿到网络状态
微信UA如下：
/*
* 微信ua
*/
Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_2 like Mac OS X) AppleWebKit/603.2.4 (KHTML, like Gecko) Mobile/14F89 MicroMessenger/6.5.12 NetType/WIFI Language/zh_CN
/*
* QQua
*/
Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_2 like Mac OS X) AppleWebKit/603.2.4 (KHTML, like Gecko) Mobile/14F89 QQ/7.1.5.428 V1_IPH_SQ_7.1.5_1_APP_A Pixel/750 Core/UIWebView NetType/WIFI QBWebViewType/1
Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_2 like Mac OS X) AppleWebKit/603.2.4 (KHTML, like Gecko) Mobile/14F89 QQ/7.1.5.428 V1_IPH_SQ_7.1.5_1_APP_A Pixel/750 Core/UIWebView NetType/2G QBWebViewType/1
从UA中看到我们可以通过如下方式进行判断:
if(/NetType/.test(ua)){
var type = ua.match(/NetType\/(\S*)/);
network_state = type[1];
}
其它补充
官方文档中给了其它的方法，但是基本都不支持，所以也就没有进行方法的使用和测试，对应的文档也没有翻译但是其中的onchange事件是可以被支持的，通过监控onchange事件监控到网络的改变。
通过枚举navigator.connection属性发现：UC浏览器只支持ontypechange，其它有的使用onchange，有的使用ontypechange，所以使用时需要做兼容处理。
【如有错误还请指正】
