前端js监听浏览器网络变化

浏览器网络变化"/>

前端js监听浏览器网络变化

使用的是navigator.onLine或navigator.connection.rtt

根据我实际测试所得，

navigator.onLine 无法及时获取真实网络状态，比如手动把网线，使用定时器获取navigator.onLine，始终是true，过很久才变成false(差不多相当于一个ajax的timeout时间)

navigator.connection 可以实时监听到网络变化（延迟2-5秒），但是获取到的网络是一个模糊值 比如navigator.connection.rtt 是请求预估延迟xx ms,有时候是0毫秒的延迟，却恰恰是已经断网了。

所以我做了一下判断：

const netWorkDownlink = navigator.connection.downlink; // 预估下载速度m/sif (navigator.connection && navigator.connection.onchange === null) {navigator.connection.onchange=() => {if (netWorkDownlink !== navigator.connection.downlink || navigator.connection.rtt === 0) {//网络断开  可做相应弹窗提示} else if (netWorkDownlink === navigator.connection.downlink || navigator.connection.rtt !== 0) {//连接到网络}}
}