来源：前端-网络课程

online和offline事件

online和offline事件是浏览器自带的两个事件，可以通过添加事件监听器来检测当前网络连接状态

当浏览器的网络连接发生变化，比如从在线状态切换到离线状态，或者从离线状态切换到在线状态时，这两个事件就会被触发

1
2
3
4
5
6
7
window.addEventListener('online', () => {
  console.log('Online')	// 在线状态
})

window.addEventListener('offline', () => {
  console.log('Offline') // 离线状态
})

除了使用事件监听器之外，还可以使用navigator.onLine属性检测浏览器的网络连接状态

该属性返回一个布尔值，表示浏览器是否处于联网状态

1
2
3
4
5
if (navigator.onLine) {
  console.log('Online')
} else {
  console.log('Offline')
}

但navigator.onLine属性只能检测当前的网络连接状态，而不能监听网络连接状态的变化

使用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 API之前，需要先进行是否支持的判断：

1
2
3
4
5
if ('connection' in navigator) {
  // 支持 navigator.connection API
} else {
  // 不支持 navigator.connection API
}

navigator.connection的返回值是一个只读对象，因此不能直接修改其中的属性值

在某些浏览器中可能会出现某些属性不被支持的情况，需要根据实际需求进行选择和测试

案例，获取当前设备的网络连接信息并输出：

1
2
3
4
5
6
7
8
9
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，可以针对用户当前的网络环境进行优化，从而提高应用程序的性能和用户体验