如何检测互联网连接状态？能否订阅navigator.online数据？

1. 能否订阅navigator.online的状态变化？ #

完全可以，没必要用setInterval轮询，浏览器原生支持online和offline事件，直接监听就能精准捕获状态变化：

let isOnline = navigator.onLine;

// 监听设备上线事件
window.addEventListener('online', () => {
  if (!isOnline) {
    isOnline = true;
    console.log("Back online!");
  }
});

// 监听设备下线事件
window.addEventListener('offline', () => {
  if (isOnline) {
    isOnline = false;
    console.log("Lost connection!");
  }
});

这种事件驱动的方式比轮询更高效，触发时机也更准确。

2. 如何检测真实的互联网连接状态？ #

navigator.online的核心局限是：它只能判断设备是否连接到本地网络（比如Wi-Fi、蜂窝数据），但无法确认是否能正常访问互联网——比如本地网没连外网、网络被防火墙拦截，navigator.online依然会返回true。

要检测真实的互联网连通性，最可靠的方式是向一个稳定、体积极小的资源发起请求，比如1x1透明像素图、空白文本文件。示例代码如下：

async function checkRealInternet() {
  try {
    // 请求base64编码的1x1透明图，无需额外服务器，设置3秒超时
    const response = await fetch('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=', {
      method: 'HEAD',
      mode: 'no-cors',
      signal: AbortSignal.timeout(3000)
    });
    return true;
  } catch (err) {
    return false;
  }
}

// 结合事件监听，在设备网络状态变化时验证真实连通性
window.addEventListener('online', async () => {
  const isReallyOnline = await checkRealInternet();
  if (isReallyOnline) {
    console.log("已成功连接到互联网！");
  } else {
    console.log("仅连接到本地网络，无法访问互联网");
  }
});

关键注意点： #

• 优先选择无需额外依赖的资源（比如上述base64图片），避免第三方服务器故障导致误判
• 设置合理的超时时间，平衡检测准确性和用户体验
• 可以根据业务需求，定时执行检测（比如每隔30秒），或者在用户发起关键网络请求前预检测

内容的提问来源于stack exchange，提问作者Vino