网络状态 以及 强网弱网

前端如何获取在线和离线状态

online 和 offline 事件

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

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

在上述代码中，我们分别添加了 online 和 offline 事件监听器，并在触发事件时输出相应的信息到控制台。

navigator.onLine

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

if (navigator.onLine) {
  console.log('Online');
} else {
  console.log('Offline');
}

在上述代码中，我们使用了 navigator.onLine 属性来检测当前的网络连接状态，并根据返回的布尔值输出相应信息到控制台。需要注意的是，navigator.onLine 属性只能检测当前的网络连接状态，而不能监听网络连接状态的变化。

如何通过前端获取更多的网络信息 navigator.connection

什么是 navigator.connection？

navigator.connection 是 Web API 中提供的一种获取网络连接相关信息的接口。该接口返回的是一个 NetworkInformation 对象，包含了多个关于用户设备网络连接状况的属性，如网络类型、带宽、往返时间等。

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

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

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

如何使用 navigator.connection？

在使用 navigator.connection API 之前，需要先进行是否支持的判断。可以通过以下方式判断浏览器是否支持该 API：

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

如果返回结果为 true，则表示当前浏览器支持 navigator.connection API。

使用 navigator.connection API 需要注意的是，该接口的返回值是一个只读对象，因此不能直接修改其中的属性值。同时，在某些浏览器中可能会出现某些属性不被支持的情况，需要根据实际需求进行选择和测试。

以下是一个示例代码，用于获取当前设备的网络连接信息并将其输出到控制台：

if ('connection' in navigator) {
  const networkInfo = navigator.connection;
  console.log('Network downlink:', networkInfo.downlink);
  console.log('Network effective type:', networkInfo.effectiveType);
  console.log('Network round-trip time:', networkInfo.rtt);
  console.log('Network data saving mode:', networkInfo.saveData);
} else {
  console.log('navigator.connection is not supported.');
}

总结

navigator.connection API 是一种用于获取用户设备当前的网络连接状态信息的 JavaScript 接口，能够提供多种有助于优化网络应用程序的关键性能指标，如带宽、往返时间等。通过该 API 您可以针对用户当前的网络环境进行优化，从而提高应用程序的性能和用户体验。值得注意的是，由于不同浏览器兼容性问题的存在，需要在使用前进行检测以保证代码正常运行。