HTML5 判断是否有网络

HTML5 可通过 navigator.onLine 属性判断是否有网络，返回布尔值。

在现代Web开发中,网络状态的实时监测已成为提升用户体验的关键技术，HTML5提供的一系列网络检测API，使开发者能够精准感知网络环境变化，并作出智能响应，本文将系统解析这些技术的实现原理、应用场景及最佳实践。

navigator.onLine属性深度解析

1 核心特性

navigator.onLine作为HTML5标准中的布尔型属性，其本质是设备网络接口的连接状态指示器，当设备处于：

有效Wi-Fi连接
蜂窝数据连接（4G/5G）
以太网连接时返回true，反之返回false。

2 典型应用场景

// 基础网络状态检测
if (navigator.onLine) {
  enableDataSync(); // 启用数据同步功能
} else {
  showOfflineBanner(); // 显示离线提示
}

3 注意事项

缓存延迟：部分浏览器每60秒更新一次状态
局域网限制：无法区分内网与互联网连接
设备差异：移动设备可能因省电模式提前标记离线

建议结合以下代码进行状态校验：

function isReallyOnline() {
  return navigator.onLine && window.navigator.connection.saveData !== undefined;
}

online/offline事件机制

1 事件触发原理

事件类型	触发条件	典型场景
online	网络从断开到恢复	WiFi重新连接、飞行模式关闭
offline	网络从可用到不可用	断开VPN、进入无信号区域

2 高级用法

// 网络状态变化监控器
const networkStatus = document.getElementById('network-status');
window.addEventListener('online', () => {
  networkStatus.textContent = '在线';
  networkStatus.style.color = 'green';
  scheduleDataSync();
});
window.addEventListener('offline', () => {
  networkStatus.textContent = '离线';
  networkStatus.style.color = 'red';
  pauseBackgroundTasks();
});

精确网络检测方案

1 XHR心跳检测

function checkNetwork(url = 'https://www.google.com') {
  return new Promise((resolve) => {
    const xhr = new XMLHttpRequest();
    xhr.open('HEAD', url + '/favicon.ico?rand=' + Math.random(), false); // 添加随机参数避免缓存
    xhr.timeout = 3000;
    xhr.onload = () => resolve(xhr.status >= 200 && xhr.status < 400);
    xhr.onerror = () => resolve(false);
    xhr.send();
  });
}

2 Fetch API检测优化

async function checkNetworkStatus() {
  try {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 3000);
    const response = await fetch('https://www.gstatic.com/generate_204', {
      method: 'HEAD',
      signal: controller.signal,
      cache: 'no-store'
    });
    clearTimeout(timeoutId);
    return response.ok;
  } catch {
    return false;
  }
}

3 对比分析

指标	XHR方案	Fetch方案
兼容性	IE7+	Modern browsers
代码简洁度	中等	高
错误处理	显式回调	Promise链式
性能	较低	较高

综合应用策略

1 多维度检测方案

function getNetworkStatus() {
  const primaryStatus = navigator.onLine;
  const secondaryCheck = checkNetworkStatus(); // 使用Fetch检测
  if (primaryStatus && secondaryCheck) {
    return 'full-connectivity';
  } else if (!primaryStatus && !secondaryCheck) {
    return 'complete-offline';
  } else {
    return 'limited-connectivity'; // 伪连接状态
  }
}

2 动态内容加载策略

// 根据网络状态调整内容策略
const contentPolicy = {
  full: loadFullContent,
  limited: loadBasicContent,
  offline: loadCachedContent
};
const currentStatus = getNetworkStatus();
contentPolicy[currentStatus]();

3 PWA优化实践

// Service Worker网络检测
self.addEventListener('online', () => {
  clients.matchAll({includeUncontrolled: true}).forEach(client => {
    client.postMessage('resync');
  });
});

移动端专项优化

1 网络状态变化特征

信号波动：移动网络切换时的短暂中断
节能模式：安卓设备可能提前标记离线
网络类型：通过navigator.connection获取网络类型

2 适配策略

// 网络类型检测
if ('connection' in navigator) {
  const connection = navigator.connection;
  console.log(`网络类型：${connection.effectiveType}`); // 4g/wifi等
  console.log(`网络带宽：${connection.downlinkMax}Mbps`);
}

未来技术展望

1 Network Information API（草案）

// 检测网络类型示例（Chrome实验性支持）
if ('getNetworkInformation' in navigator) {
  navigator.getNetworkInformation().then(info => {
    console.log(`连接类型：${info.type}`); // wifi/cellular等
    console.log(`信号强度：${info.strength}dBm`);
  });
}