可通过监听 window 的 offline/online 事件实时感知网络切换，该方案轻量原生；需注意 online 仅表示接入网络而非服务可达，建议配合健康探测与 fallback 机制提升可靠性。
可以通过监听 window 的 offline 和 online 事件来实时感知用户网络状态切换，这是浏览器原生支持的轻量级方案，无需额外请求或轮询。
监听 offline/online 事件的基本写法
这两个事件触发在 window 对象上，直接绑定即可：
- 使用
addEventListener注册事件（推荐） -
offline在浏览器检测到断网时触发（如关闭 WiFi、拔掉网线） -
online在恢复网络连接后立即触发（不等页面重连完成，仅基于系统网络层判断）
示例代码：
window.addEventListener('offline', () => {
console.log('已离线');
// 可在此提示用户、暂停同步、启用缓存模式等
});
window.addEventListener('online', () => {
console.log('已联网');
// 可在此尝试重发待同步数据、刷新过期状态等
});
注意 online 事件的“假阳性”问题
online 事件只反映设备是否接入了某个网络（如连上了无互联网的局域网），不代表能真正访问服务器。实际中常出现“显示在线但接口 503 或超时”的情况。
- 建议在
online触发后，主动发起一次轻量探测（如fetch('/health')或HEAD请求）确认服务可达性 - 避免在
online回调里直接重试所有失败请求，应先验证网络有效性再执行业务逻辑 - 可配合
navigator.onLine初始值做首屏状态判断（但该值也存在不准问题，仅作参考）
兼容性与降级处理
现代浏览器均支持，IE10+ 也支持，但部分旧安卓 WebView 或特定嵌入式环境可能不触发。稳妥做法是：
- 监听事件的同时，保留一个 fallback 机制：比如每 10 秒用
fetch探测一个稳定资源（如 CDN 上的小图片或 /ping 接口） - 将事件监听 + 主动探测结果合并为统一的网络状态管理器，对外暴露
isConnected状态和变更回调 - 对关键操作（如提交表单）仍需服务端兜底，前端状态仅用于体验优化
常见误用提醒
不要依赖 navigator.onLine 单次读取判断全局状态——它不会自动更新，也不响应变化；必须配合事件监听才有效。
- 避免在
offline中立刻禁用所有按钮，应允许用户继续编辑、保存草稿到 localStorage - 不要在
online中强制刷新整个页面，优先做增量同步 - 移动端切后台再切回时，有时会延迟触发
online，可结合visibilitychange做补充检查
