--- theme: channing-cyan highlight: a11y-dark --- # 亲，你断网啦?!前端如何监听网络状态变化 ## 一、需求场景概述有时需要监听网络状态变化，从而通知用户注意，或根据网络状态程序内部做某些逻辑处理。许多国民级别的软件，也常常见到，在网络掉线或网络状态较差，会提示用户网络掉线注意修复或退出高清视频切换清晰度的场景，那么这样的需求，在web前端可以通过navigator.onLine和navigator.connection结合监听online、offline事件实现。 ## 二、实现思路分析 1.上线（连网）监听。addEventListener监听online事件，网络连接上时会触发该事件，此时通过navigator.onLine可以查看网络在线状态，通过navigator.connection获取网速等网络状态信息。 2.下线（断网）监听。addEventListener监听offline事件，网络连接断开时会触发该事件，此时通过navigator.onLine可以查看网络在线状态，通过navigator.connection获取网速等网络状态信息。 3.监听到网络状态变更时，可以按需提示用户或做某些特殊处理。 ## 三、相关技术点介绍 ### 1.online基本使用 > online = window.navigator.onLine; > > online是一个布尔值true或false。 > > 要监听查看网络状态的变化，请使用 addEventListener 监听和上的事件window.online，window.offline > > 如下例所示： > > window.addEventListener('offline', function(e) { console.log('offline'); }); > > window.addEventListener('online', function(e) { console.log('online'); }); ### 2.connection的基本使用 > connectionInfo = navigator.connection > > 返回网络连接状态NetworkInformation对象，包括.downlink（网络下行速度） > > effectiveType（网络类型） onchange（有值代表网络状态变更） rtt（估算的往返时间） > > saveData（打开/请求数据保护模式） ### 3.注意事项： navigator.online和navigator.connection浏览器兼容性如下，可以看到connection的兼容性较低，实际开发应当谨慎使用。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7becf7b8743244cca44770dcda04bd35~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/56844176cc754a799d8c6ff25aae0a74~tplv-k3u1fbpfcp-watermark.image?) ## 四、完整Demo **1.Demo效果图** ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0d967e90fe95406ba68baf951d9c8bd8~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/850a6fe9143448efb12c0fb128532f11~tplv-k3u1fbpfcp-watermark.image?) **2.完整Demo代码** ```html js实现查看网络状态

改变网络状态测试效果

获取网络在线状态：

获取网络具体状态：

获取网络速度：

```