灏天阁

前端的网络状态

· Yin灏

online  和  offline  事件

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

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

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

除了使用事件监听器之外，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 您可以针对用户当前的网络环境进行优化，从而提高应用程序的性能和用户体验。值得注意的是，由于不同浏览器兼容性问题的存在，需要在使用前进行检测以保证代码正常运行。

- Book Lists -