通过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，所以使用时需要做兼容处理。
  
  
【如有错误还请指正】
 
 

作者：进击的程序茗
链接：http://www.jianshu.com/p/310dd7dd0255
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。