Web应用online/offline事件未触发的原因及可靠检测方案咨询

一、为什么online/offline事件不触发？ #

这几个是最常见的原因：

• 浏览器与系统状态同步延迟：这类事件依赖系统向浏览器发送网络状态变更通知，但部分系统操作（比如Windows禁用网络适配器）的状态信号可能无法被浏览器及时捕获，导致事件不触发。
• 本地网络干扰：如果设备连接了无互联网的本地网络（比如只连了路由器但路由器没联网），浏览器会判定为“在线”——它只检测到存在网络连接，而非能访问公网，这种情况下断外网不会触发offline事件。
• 触发路径差异：DevTools的离线模式是浏览器主动模拟的网络阻断，和真实系统网络状态变化的触发逻辑完全不同，所以能正常触发事件，但真实场景下走的是系统通知路径，容易出问题。

二、更可靠的离线模式检测方式 #

1. 结合navigator.onLine与事件监听 #

保留事件监听的同时，定期检查navigator.onLine属性作为补充，能覆盖部分事件没触发的场景：

// 保留基础事件监听
window.addEventListener("online", () => handleNetworkChange(true));
window.addEventListener("offline", () => handleNetworkChange(false));

// 定期兜底检查
setInterval(() => {
  const isOnline = navigator.onLine;
  handleNetworkChange(isOnline);
}, 3000);

function handleNetworkChange(isOnline) {
  console.log(isOnline ? "已联网" : "已离线");
}

2. 优化轮询方案（减少无效请求） #

不要固定间隔轮询，而是结合网络连接属性的变化事件触发检查，更高效：

async function checkRealOffline() {
  try {
    // 改用自己服务器的轻量资源（比如空接口或1x1图片），判断更准确
    await fetch("/api/ping", { cache: "no-store" });
    console.log("在线");
  } catch (e) {
    console.log("离线");
  }
}

// 网络连接属性（类型、带宽等）变化时触发检查
navigator.connection.addEventListener("change", checkRealOffline);
// 初始化时先检查一次
checkRealOffline();

3. 基于Service Worker的离线检测 #

如果要做完整的离线应用，Service Worker是最可靠的方案——它可以拦截所有网络请求，直接从请求层面判断是否能访问网络，还能实现资源缓存：

// 在Service Worker脚本中
self.addEventListener("fetch", (event) => {
  event.respondWith(
    fetch(event.request)
      .then((response) => {
        // 请求成功，更新缓存
        caches.open("app-cache").then((cache) => {
          cache.put(event.request, response.clone());
        });
        return response;
      })
      .catch(() => {
        // 请求失败，判定为离线，返回缓存资源或提示
        console.log("当前处于离线状态");
        return caches.match(event.request) || new Response("离线模式");
      })
  );
});

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