如何使用 JavaScript 检测用户的网络状态 (Network Information API)？

推荐答案

// www.javascriptcn.com code example
// 检查浏览器是否支持 Network Information API
if ('connection' in navigator) {
  const connection = navigator.connection;

  // 获取当前的网络连接类型
  function getNetworkType() {
    return connection.effectiveType; // 返回 "slow-2g", "2g", "3g", "4g" 或 "unknown"
  }

  // 获取当前的网络是否启用节省数据模式
  function isDataSaverEnabled() {
      return connection.saveData; // 返回 true 或 false
  }
  
  // 获取当前的网络延迟
  function getRoundTripTime() {
    return connection.rtt; // 返回延迟毫秒数
  }

    // 获取当前下行速度
  function getDownlinkSpeed() {
      return connection.downlink; // 返回下行速度（Mbps）
  }
    
    // 获取最大下行速度
  function getMaxDownlinkSpeed() {
    return connection.downlinkMax; // 返回最大下行速度（Mbps）
  }

    //  网络类型变化监听
   function onNetworkChange(callback) {
       connection.addEventListener('change', callback);
   }


  // 使用示例
  console.log("Network Type:", getNetworkType());
  console.log("Data Saver Enabled:", isDataSaverEnabled());
  console.log("Round Trip Time (RTT):", getRoundTripTime());
    console.log("Downlink Speed:", getDownlinkSpeed());
    console.log("Max Downlink Speed:", getMaxDownlinkSpeed());
  onNetworkChange(() => {
    console.log("Network Changed, Type:", getNetworkType());
  });

} else {
  console.log("Network Information API not supported in this browser.");
}

本题详细解读

Network Information API 介绍

Network Information API 提供了一种方法来获取用户设备网络连接的相关信息，例如网络连接类型、是否启用数据节省模式、延迟以及下行速度。这对于优化 Web 应用的性能，特别是针对不同的网络环境做出适应调整非常有用。例如：

• 根据网络类型加载不同质量的图片或视频： 在低速网络下，可以加载较低分辨率的资源以节省带宽。
• 限制数据传输： 如果用户启用了数据节省模式，应用可以减少数据传输，例如延迟同步或加载更轻量级的内容。
• 提供更好的用户体验： 可以向用户显示网络状态信息，并根据当前网络状况提供合适的提示和操作。

核心属性和方法

1. navigator.connection: 这是 Network Information API 的入口，返回一个 NetworkInformation 对象，其中包含网络连接的相关信息。
2. connection.effectiveType: 返回网络连接的有效类型，可能的值为：
   • 'slow-2g'
   • '2g'
   • '3g'
   • '4g'
   • 'unknown'
3. connection.saveData: 返回一个布尔值，指示用户是否启用了数据节省模式。true 表示启用，false 表示未启用。
4. connection.rtt: 返回一个数字，表示往返时间（Round Trip Time）的毫秒数，代表网络延迟。
5. connection.downlink: 返回一个数字，表示下行速度（Mbps）
6. **connection.downlinkMax:**返回一个数字，表示最大下行速度（Mbps）
7. connection.addEventListener('change', callback): 用于监听网络连接状态变化。当网络连接类型、数据节省模式等发生变化时，会触发回调函数。

代码解析

1. 检查 API 支持: 代码首先检查浏览器是否支持 Network Information API ('connection' in navigator)。如果不支持，则输出错误消息。
2. 获取 connection 对象: 如果支持，则获取 navigator.connection 对象，并将其赋值给 connection 变量。
3. 定义辅助函数: 定义了 getNetworkType(), isDataSaverEnabled(), getRoundTripTime(),getDownlinkSpeed(), getMaxDownlinkSpeed() 和 onNetworkChange() 函数来封装 API 的使用。这些函数分别返回当前的网络连接类型，是否启用了数据节省模式，延迟，下行速度，最大下行速度以及监听网络状态变化的函数。
4. 示例用法: 在示例用法中，代码演示了如何调用定义的辅助函数来获取网络信息，并监听网络状态变化。当网络状态改变时，控制台会输出新的网络类型。
5. 错误处理: 当浏览器不支持 Network Information API 时，提供错误提示信息。

注意事项

• API 支持度: Network Information API 不是所有浏览器都支持，因此在使用前需要进行特性检测。
• 隐私问题: 需要注意，过度依赖 Network Information API 并过度利用网络信息可能会引起用户的隐私担忧，因此需要谨慎使用。
• 网络信息变化: 用户的网络连接状态可能会随时改变，因此建议监听 change 事件，以便及时做出调整。
• 数值的精准性： 该API所返回的值并非都是精确的，例如rtt延迟的值可能存在误差。