h5获取当前网络状态

HTML5获取网络状态的核心方法

HTML5提供了多种方式检测当前网络状态,主要分为以下两类：

基础检测：navigator.onLine

if (navigator.onLine) {
  console.log('设备在线');
} else {
  console.log('设备离线');
}

特性说明：

• 返回值为布尔类型,true表示在线，false表示离线
• 仅能判断基础连接状态,无法区分网络类型
• 在iOS/Android设备上，当应用进入后台时仍会保持true状态
• 部分浏览器在断网后不会立即更新状态,存在延迟

高级检测：Network Information API

const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (connection) {
  console.log(`网络类型：${connection.type}`); // wifi/4g/ethernet等
  console.log(`有效带宽：${connection.downlinkMax}Mbps`); // 最大下行带宽
  console.log(`网络变化时间：${connection.updateTime}`); // 上次状态更新时间戳
} else {
  console.log('浏览器不支持Network Information API');
}

关键属性：

• type：网络连接类型（wifi/4g/3g/2g/ethernet）
• downlinkMax：最大下行带宽（单位Mbps）
• rtt：往返时延（单位毫秒）
• saveData：用户是否开启省流模式（Chrome特有）

网络状态变化监听机制

基础状态监听

window.addEventListener('online', () => {
  alert('网络已连接');
});
window.addEventListener('offline', () => {
  alert('网络已断开');
});

注意：

• online事件在设备恢复网络时触发
• offline事件在设备断网时触发
• 事件触发存在系统级延迟（通常3-10秒）

高级状态监听（Network Information API）

const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (connection) {
  connection.addEventListener('change', () => {
    console.log(`网络类型变化：${connection.type}`);
    console.log(`当前下行带宽：${connection.downlink}Mbps`);
  });
}

特性对比：
| 特性 | 基础检测 | 高级检测 |
|———————|————————–|———————————–|
| 网络类型识别 | | （wifi/4g/ethernet等） |
| 带宽估算 | | （downlinkMax/downlink） |
| 时延测量 | | （rtt属性） |
| 省流模式检测 | | （saveData属性，Chrome特有） |
| 状态更新频率 | 低（依赖系统通知） | 高（可配置阈值检测） |

跨浏览器兼容性处理方案

基础检测的Polyfill方案

function checkOnlineStatus() {
  return new Promise((resolve) => {
    let isOnline = navigator.onLine;
    // 创建隐藏的Image对象进行验证
    const testImage = new Image();
    testImage.onload = testImage.onerror = () => {
      resolve(testImage.height ? true : false); // 部分浏览器会拒绝加载图像
    };
    testImage.src = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png';
    setTimeout(() => {
      resolve(isOnline);
    }, 3000); // 3秒超时验证
  });
}

高级检测的兼容性处理

function getNetworkInfo() {
  const connection = navigator.connection || 
                    navigator.mozConnection || 
                    navigator.webkitConnection || 
                    { type: 'unknown' };
  return {
    type: connection.type || 'unknown',
    downlink: connection.downlink || null,
    rtt: connection.rtt || null,
    saveData: connection.saveData || false
  };
}

典型应用场景实现

场景1：离线数据缓存

if (!navigator.onLine) {
  // 启用本地缓存策略
  cacheDataLocally();
} else {
  // 同步云端数据
  syncWithServer();
}

场景2：动态内容加载优化

const connection = getNetworkInfo();
if (connection.type === 'wifi' && connection.downlinkMax > 5) {
  loadHighResolutionImages();
} else {
  loadLowResolutionImages();
}

场景3：实时通信质量监控

const rttThreshold = 200; // 毫秒
const connection = navigator.connection;
if (connection && connection.rtt > rttThreshold) {
  switchToLowQualityStream();
} else {
  switchToHighQualityStream();
}

性能优化建议

1. 节流处理：对网络状态变化事件进行节流，避免频繁触发重绘

   let throttleTimeout;
   window.addEventListener('online', () => {
     clearTimeout(throttleTimeout);
     throttleTimeout = setTimeout(() => {
       // 执行耗时操作
     }, 2000);
   });

2. 异步检测：使用Web Workers处理复杂检测逻辑

   const worker = new Worker('network-detector.js');
   worker.postMessage({ action: 'check' });
   worker.onmessage = (e) => {
     if (e.data.status === 'offline') {
       showOfflinePage();
     }
   };

3. 预加载策略：在网络空闲时预加载关键资源

   if (navigator.onLine) {
     preloadResources(['style.css', 'framework.js']);
   }

安全与隐私注意事项

1. 权限控制：部分API需要用户授权（如精确位置获取）
2. 数据保护：离线数据缓存需遵守隐私政策
3. 异常处理：需处理API不可用的情况（如旧版浏览器）
4. 省流模式：尊重用户的省流设置（Chrome特有）

FAQs

Q1：如何区分移动网络和Wi-Fi连接？
A1：可以使用Network Information API的type属性进行判断，当type值为wifi时表示Wi-Fi连接，4g/3g等表示移动网络，示例代码：

const connection = navigator.connection;
if (connection.type === 'wifi') {
  console.log('当前使用Wi-Fi网络');
} else if (connection.type === '4g') {
  console.log('当前使用4G网络');
} else {
  console.log('其他网络类型');
}

注意：该API在部分浏览器中可能返回ethernet（有线网络）或bluetooth等类型。

Q2：如何处理网络状态频繁切换的情况？
A2：建议采用以下策略：

1. 设置状态检测间隔：使用定时器控制检测频率（如每5秒检测一次）
2. 状态确认机制：在状态变化后等待3秒进行二次确认，避免误判
3. 操作队列管理：将网络请求放入队列，根据在线状态批量处理
   示例代码：

   let networkStatus = navigator.onLine;
   setInterval(() => {
   const newStatus = navigator.onLine;
   if (newStatus !== networkStatus) {
    setTimeout(() => { // 二次确认
      if (navigator.onLine === newStatus) {
        networkStatus = newStatus;
        // 执行状态切换逻辑
      }
    }, 3000);
   }
   }, 5000); // 每5秒检测一次