通过JS判断网络状态调研及实例demo说明

官方文档

English Document

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	weibo	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	weibo	7.7.0	type:wifi	支持
华为P9	A6.0	UC	11.0.4	type:5(wifi)	支持
华为P9	A6.0	QQ	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	QQ	7.1.5	type:未知 NetType wifi	支持
三星Note5	A6.0	原生	5.4	type:wifi	支持
三星Note5	A6.0	weibo	6.12.3	type:wifi	支持
vivo X9	A6.0	weibo	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	weibo	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，所以使用时需要做兼容处理。

【如有错误还请指正】