html5通过navigator.online和online/offline事件实现轻量级网络状态监听，可实时感知设备联网状态但无法判断服务器可达性；需结合心跳请求与离线缓存提升健壮性。
HTML5 提供了轻量、原生的网络状态监听能力，能实时感知设备是否接入网络。它不依赖后端请求或第三方库，响应快、兼容性好（主流浏览器均支持），但要注意：它检测的是操作系统级的网络连接状态，不是服务器可达性。
用 navigator.onLine 获取当前状态
这是最直接的方式，返回一个布尔值：
- true 表示设备已连接到网络（Wi-Fi、蜂窝、以太网等）
- false 表示设备确认无网络连接
注意：页面刚加载时该值即生效，适合初始化界面状态（比如禁用提交按钮）。但它不会自动更新——想“实时”反映变化，必须配合事件监听。
监听 online 和 offline 事件
这两个事件绑定在 window 上，是实现“实时检测”的核心：
- offline：当系统判定网络断开时立即触发（如关掉 Wi-Fi、拔网线、飞行模式开启）
- online：当系统重新检测到网络连接时触发
推荐写法（避免覆盖已有 handler）：
window.addEventListener('offline', () => {<br> console.log('已离线');<br> // 例如：显示提示、暂停同步、禁用表单提交<br>});<br><br>window.addEventListener('online', () => {<br> console.log('已恢复联网');<br> // 例如：重试失败请求、恢复定时同步、启用按钮<br>});
注意边界情况和局限性
这个机制很实用，但有几点必须清楚：
- 它无法区分“连着网但打不开你的网站”（比如 DNS 故障、防火墙拦截、服务宕机）
- 部分浏览器（尤其旧版 Safari 或某些 WebView）对 offline 的触发可能延迟或不准确
- 如果用户打开页面时已断网，
navigator.onLine初始为 false，但不会自动触发 offline 事件（因为没发生“变化”） - 单纯靠它不能测网速或信号强度；如需更精细信息（如 4G/5G/Wi-Fi 类型、RTT、有效带宽），需结合
navigator.connection（注意兼容性）
增强健壮性的建议做法
真实场景中，建议组合使用：
- 页面加载时读取
navigator.onLine设置初始 UI - 全程监听 online/offline 事件更新状态
- 对关键操作（如表单提交、数据同步）增加一次轻量级心跳请求（如 GET /health），验证服务可达性
- 离线期间缓存用户操作，联网后自动重发，避免数据丢失
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
