h5页面获取网络状态总结 - 网络状态API

微信开发

微信中提供了很全面的api，除了小程序的api还有WeixinJSBridge。

// 页面开发 & 小程序开发
wx.getNetworkType({
	success: res => {
		var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
	}
})   

connection

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

普通h5页面也是有api的，例如判断是否有网络 的时间onLine和onoffline（更多事件详情）;还有就是navigator.connection获取网络状况 API，兼容性有问题，现在可以使用的浏览器不是太多。

connectionInfo = navigator.connection
/*
Chrome：
downlink: 10
effectiveType: "4g"
onchange: null
rtt: 0
saveData: false
*/

type

bluetooth: 蓝牙
cellular: 蜂窝网络(e.g., EDGE, HSPA, LTE, etc.)
ethernet: 以太网
none: 无连接
mixed: 多类型混合
other: 类型可知，但不可枚举
unknown: 有链接，但类型未知
wifi: Wi-Fi
wimax: WiMAX

effectiveType

有效连接类型

'2g'
'3g'
'4g'
'slow-2'

downlink

有效带宽，M/s

downlinkMax

下行最大比特率

rtt:

往返时间（round-trip time）：表示从发送端发送数据开始，到发送端收到来自接收端的确认（接收端收到数据后便立即发送确认，不包含数据传输时间）总共经历的时间。

参考链接：

http://wicg.github.io/netinfo/
https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/connection
https://developer.mozilla.org/zh-CN/docs/Web/API/Network_Information_API
https://juejin.im/entry/5b14aecfe51d4506c95eb1ea