需求场景

有时需要监听网络状态变化，从而通知用户注意，或根据网络状态程序内部做某些逻辑处理。也常常见到，在网络掉线或网络状态较差，会提示用户网络掉线注意修复或退出高清视频切换清晰度的场景，那么这样的需求，在web前端可以通过navigator.onLine和navigator.connection结合监听online、offline事件实现。

Navigator.onLine 属性

onLine 属性是一个只读的布尔值，声明了系统是否处于脱机模式，如果系统属于脱机状态，则返回 false，否则返回 true。

除navigator.onLine属性之外，为了更好地确定网络是否可用，HTML5还定义了两个事件：online和offline。当网络从离线变为在线或者从在线变为离线时，分别触发这两个事件。这两个事件在window对象上触发。

window.addEventListener('offline', function(e) { console.log('offline'); });

window.addEventListener('online', function(e) { console.log('online'); });

为了检测应用是否离线，在页面加载后，最好先通过navigator.onLine取得初始的状态。然后，就是通过上述两个事件来确定网络连接状态是否变化。当上述事件触发时，navigator.onLine属性的值也会改变，不过必须要手工轮询这个属性才能检测到网络状态的变化。

navigator.connection

Navigator.connection 是只读的，提供一个NetworkInformation对象来获取设备的网络连接信息。包括:downlink（网络下行速度）、 effectiveType（网络类型）、onchange（有值代表网络状态变更）、rtt（估算的往返时间）、saveData（打开/请求数据保护模式）

console.log(navigator.connection);
NetworkInformation :{
  downlink: 0.65,
  effectiveType: "4g",
  onchange: null,
  rtt: 250,
  saveData: false
}

可以通过检测用户网路变化提示用户做不同操作

// 通过navigator.connection获取当前网络状态，可对connection进行监听，从而及时获取网络状态的变更
function getNetworkConnectionChange () {
  // connection 的兼容性较低
  const connection = navigator.connection || navigator.webkitConnection || navigator.mozConnection
  console.log('网络状态：' + connection.effectiveType)

  // 对connection变更监听
  connection.addEventListener('change', () => {
    // connection.effectiveType返回的是具体的网络状态：4g/3g/2g
    console.log('网络状态：' + connection.effectiveType)
  })
}

注意事项：

navigator.online和navigator.connection浏览器兼容性如下，可以看到connection的兼容性较低，实际开发应当谨慎使用。