PWA 中检测网络状态依赖 navigator.onLine 属性和 online/offline 事件，可实时监听连接变化并更新 UI，但仅反映设备联网状态而非服务器可达性，需结合 fetch 验证实际请求。
在 PWA 中检测网络连接状态变化，核心依赖浏览器原生的 navigator.onLine 属性和 online/offline 事件。它不依赖第三方库，轻量且兼容性好，但需注意其判断逻辑是“设备是否连上网络”，而非“能否访问你的服务器”。
基础状态检查
页面加载后可立即获取当前状态：
-
navigator.onLine返回布尔值，true 表示系统认为已联网（如 Wi-Fi、蜂窝数据已开启）；false 表示系统判定断网 - 该属性是只读的，不能手动设置，且部分浏览器（如 Chrome）在离线模式下仍可能返回
true，需结合实际请求验证 - 适合做初始 UI 判断，比如加载时显示“正在连接…”或直接启用离线缓存内容
监听状态变化
用事件监听器响应实时切换：
- 注册
window.addEventListener('online', handler)：当系统恢复网络连接时触发，适合重试失败请求、刷新缓存、恢复同步等 - 注册
window.addEventListener('offline', handler)：当系统断开连接时触发，适合禁用提交按钮、显示离线提示、暂停轮询 - 这两个事件冒泡到
window，无需额外委托，也不需要 Service Worker 参与 - 建议在
DOMContentLoaded或load后绑定，避免遗漏首次状态
结合 UI 反馈用户
把状态映射到界面，提升体验透明度：
立即学习“Java免费学习笔记（深入）”；
- 给根元素添加 class，例如
document.body.classList.toggle('offline', !navigator.onLine) - 配合 CSS 控制提示区域显隐：
.offline .network-hint { display: block; } - 避免仅依赖文字提示，可加图标、颜色变化（如红色边框/绿色状态条）和轻微动效
- 注意：不要仅靠此状态决定是否发送请求——真正可靠的方式是发起一次 fetch 并处理
NetworkError
进阶补充：配合 Service Worker 使用
单纯前端检测有局限，PWA 中常与 Service Worker 协同增强鲁棒性：
- Service Worker 的
fetch事件中，可通过event.request.destination区分资源类型，并根据navigator.onLine决定走缓存还是网络 - 离线时，可返回缓存兜底页（如
/offline.html），比白屏更友好 - 若需判断“能否访问特定 API”，应在 fetch 失败后捕获异常，再结合
navigator.onLine做归因，而不是反向推断
