navigator.onLine仅反映浏览器自认为的在线状态，不保证真实网络可达；需结合online/offline事件监听状态变化，并通过心跳请求验证实际连通性。
JavaScript 可以通过 navigator.onLine 属性和 online/offline 事件来检测用户的网络连接状态，但要注意它只反映浏览器是否认为自己“在线”，并不等同于真实网络可达性。
使用 navigator.onLine 判断当前状态
navigator.onLine 是一个只读布尔值，返回 true 表示浏览器认为在线，false 表示离线。它在页面加载时即有值，可立即读取：
- 大多数现代浏览器中，只要设备未启用“飞行模式”或未手动禁用网络（如 Chrome 的离线调试模式），该值就为
true - 它不发起任何网络请求，因此无法确认服务器是否真的可达、DNS 是否正常、或防火墙是否拦截
- 例如：笔记本连着 Wi-Fi 但路由器断网，
navigator.onLine仍可能返回true
监听 online 和 offline 事件
浏览器会在网络状态变化时触发全局 online 和 offline 事件，可在 window 上监听：
- 推荐在页面初始化时绑定，避免错过初始状态
- 事件不冒泡，也不可取消，但可以阻止默认行为（不过通常无默认行为）
- 示例代码：
window.addEventListener('online', () => console.log('已联网'));<br> window.addEventListener('offline', () => console.log('已离线'));
增强判断：结合心跳请求验证真实连通性
若需确认能否访问特定服务（如你的 API），应主动发起轻量请求（如 fetch('/health') 或 HEAD 请求）：
立即学习“Java免费学习笔记（深入）”；
- 建议设置较短超时（如 3–5 秒），避免阻塞体验
- 可定时轮询（如每 10 秒一次），或在网络状态变为 online 后立即试探
- 注意：不要仅依赖单次失败就判定离线，可重试 1–2 次再更新 UI 状态
实际使用中的注意事项
用户可能处于弱网、代理异常、HTTPS 混合内容被拦截等复杂情况，navigator.onLine 无法覆盖这些场景：
- iOS Safari 在某些断连情况下不会触发
offline事件，需额外降级处理 - 部分 PWA 应用会缓存
online状态，重启后需重新检查 - 不要用它替代服务端鉴权或数据同步逻辑，仅用于优化前端提示与降级策略
