html5判断网络类型

HTML5判断网络类型的方法

使用Network Information API

HTML5提供了Navigator.connection接口，用于获取当前网络连接的信息，该API可以检测网络类型（如WiFi、4G、5G等）、带宽、延迟等数据。

关键属性：
| 属性 | 说明 |
|——————–|——————————|
| navigator.connection | 返回NetworkInformation对象 |
| effectiveType | 当前网络类型（如wifi、4g） |
| downlink | 下行带宽（单位Mbps） |
| downlinkMax | 最大下行带宽 |
| rtt | 往返时间（单位毫秒） |

示例代码：

if ('connection' in navigator) {
  const connection = navigator.connection;
  console.log('网络类型:', connection.effectiveType); // 输出: wifi/4g/5g等
  console.log('下行带宽:', connection.downlink, 'Mbps');
  console.log('RTT延迟:', connection.rtt, 'ms');
} else {
  console.log('当前浏览器不支持Network Information API');
}

监听网络状态变化

通过window对象的online和offline事件,可以实时监测网络连接状态的变化。

示例代码：

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

判断连接类型（WiFi/蜂窝网络）

部分浏览器支持通过navigator.connection.effectiveType判断连接类型,但需注意兼容性。

兼容处理：

function getConnectionType() {
  if ('connection' in navigator) {
    const type = navigator.connection.effectiveType;
    if (type === 'wifi') {
      return 'WiFi';
    } else if (type === '4g' || type === '3g') {
      return '蜂窝网络';
    }
    return '未知类型';
  }
  return '不支持检测';
}
console.log(getConnectionType());

兼容性说明

相关问题与解答

问题1：如何区分4G和5G网络？

解答：
HTML5的Network Information API目前无法直接区分4G和5G，effectiveType仅返回4g或3g，若需精确判断,可结合以下方法：

1. 通过navigator.connection.downlinkMax估算带宽（5G通常>100Mbps）。
2. 使用第三方库（如mobile-detect）结合设备信息推断。
3. 依赖后端API通过IP地址或网络指纹识别。

问题2：网络断开后如何自动重试请求？

解答：
可通过监听online事件,在网络恢复时重新发起请求。

let pendingRequests = [];
// 监听网络恢复
window.addEventListener('online', () => {
  pendingRequests.forEach(req => req());
  pendingRequests = [];
});
// 封装请求函数
function fetchWithRetry(url) {
  if (navigator.onLine) {
    fetch(url).then(/ 处理响应 /);
  } else {
    pendingRequests.push(() => fetch(url));
  }