直接监听window的offline/online事件是零依赖、响应最快的网络状态感知方案，需用addeventlistener注册，配合navigator.online初始化并用轻量探测验证服务可达性，辅以fallback机制确保兼容性。

直接监听 window 上的 offline 和 online 事件，是浏览器原生支持、零依赖、响应最快的方案。它不轮询、不发请求，靠系统网络层信号触发，适合绝大多数 Web 应用的实时状态感知需求。

基础监听写法

两个事件都挂载在 window 对象上，推荐使用 addEventListener 注册：

• window.addEventListener('offline', () => { /* 用户断网，如关闭 WiFi、拔网线 */ })
• window.addEventListener('online', () => { /* 系统检测到联网，立即触发，不等页面连通服务器 */ })

注意：不要用 window.onoffline = ... 这类属性赋值方式，它只能绑定一个回调，不利于模块化管理。

别只信 navigator.onLine 的初始值

navigator.onLine 是只读布尔值，页面加载时可读取一次作为首屏状态依据，但它不会自动更新，也不能替代事件监听：

• 初始化 UI 时可用：useState(navigator.onLine)（React）或 ref(navigator.onLine)（Vue）
• 但后续状态变化必须靠 online/offline 事件来同步更新，否则会滞后甚至错判
• 在 file:// 协议下该值恒为 true，务必用 HTTP/HTTPS 环境测试

online 事件不等于服务可达

系统显示“已联网”，可能只是连上了无外网的局域网或热点，此时调接口仍会失败：

• 在 online 回调里，不要立刻重发所有失败请求
• 应先发起一次轻量探测，例如：fetch('/health', { method: 'HEAD', cache: 'no-store' })
• 成功后再执行数据同步、刷新缓存等操作；失败则维持离线态提示
• 探测超时建议设为 2–3 秒，避免阻塞用户操作

兼顾兼容性与降级策略

现代浏览器及 IE10+ 均支持这两个事件，但在部分旧安卓 WebView 或嵌入式环境可能失效：

• 建议搭配一个 fallback 探测机制：每 10–15 秒 fetch 一个稳定资源（如 CDN 上的 1x1 图片或 /ping 接口）
• 将事件结果与探测结果合并，对外暴露统一的 isConnected 状态和变更通知
• 对关键操作（如表单提交），前端状态仅用于体验优化，服务端仍需做幂等与容错处理