网络状态 强网弱网环境

前端获取网络状态

navigator.onLine 获取网络环境状态

除了使用事件监听器之外，JavaScript 还提供了另一种方式来检测浏览器的网络连接状态，即使用 navigator.onLine 属性。该属性返回一个布尔值，表示浏览器是否处于联网状态。

console.log(navigator.onLine);

online 和 offline 事件及其处理函数

online 和 offline 事件是浏览器自带的两个事件，可以通过添加事件监听器来检测当前网络连接状态。当浏览器的网络连接发生变化，比如从在线状态切换到离线状态，或者从离线状态切换到在线状态时，这两个事件就会被触发。

window.addEventListener('online', () => {
  console.log('online');
});
window.addEventListener('offline', () => {
  console.log('offline');
});

navigator.connection

navigator.connection 是 Web API 中提供的一种获取网络连接相关信息的接口。

该接口返回的是一个 NetworkInformation 对象（只读），包含了多个关于用户设备网络连接状况的属性，如网络类型、带宽、往返时间等。

通过 navigator.connection API 能够获取的主要网络连接属性如下：

• downlink: 当前网络连接的估计下行速度（单位为 Mbps）
• downlinkMax: 设备网络连接最大可能下行速度（单位为 Mbps）
• effectiveType: 当前网络连接的估计速度类型（如 slow-2g、2g、3g、4g 等）和设备没有关系
• rtt: 当前网络连接的估计往返时间（单位为毫秒）
• saveData: 是否处于数据节省模式

除此之外，还有其他诸如 type、onchange 等属性，用于获取设备网络连接的类型和注册网络连接状态变化事件等功能。

使用前检查浏览器是否支持

if ('connection' in navigator) {
  // 支持 navigator.connection API
  console.log(navigator.connection);
} else {
  // 不支持 navigator.connection API
}