浏览器监听网络状态

Navigator：connection

Navigator.connection 只读属性返回一个包含有关系统网络连接信息的 NetworkInformation 对象，例如用户设备的当前带宽或连接是否按流量计费。
这可以用于基于用户的连接状态来选择高清晰度内容或低清晰度内容。

connection返回的基本属性有：

• downlink：下载速度，单位Mb/s
• effectiveType：网络类型，是根据下载速度和带宽延迟来决定，不准但具有参考意义
• rtt：返回了当前连接下评估的往返时延，单位毫秒，表示网络延迟

Navigator：onLine

返回true表示在线

编码示例：

/**
 * 获取网络状态
 * @returns {{type: string}|{rtt: *, downlink: *, type: *}}
 */
function getNetworkInfo() {
  let info;
  if (navigator.onLine) {
    info = {
      type: navigator.connection.effectiveType,
      rtt: navigator.connection.rtt,
      downlink: navigator.connection.downlink,
    };
  } else {
    info = {
      type: 'offLine',
    };
  }
  return info;
}

export function updateInfo() {
  const info = getNetworkInfo();
  console.log(info);
  //做一些提示网络离线之类的更新操作
}

//在线或离线的时候更新网络状态
window.addEventListener('online', updateInfo);
window.addEventListener('offline', updateInfo);
//网络变化时更新网络状态
navigator.connection.addEventListener('change', updateInfo);

//更细一点可以使用定时器