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