利用navigator.onLine和online/offline事件检测网络状态；2. 通过心跳请求提升检测准确性；3. 使用localStorage或IndexedDB缓存离线数据；4. 网络恢复后自动同步并处理冲突，结合Service Worker增强可靠性。
现代Web应用越来越依赖网络连接，但用户可能在弱网或完全离线的环境下使用应用。JavaScript提供了多种机制来检测网络状态并处理离线情况，确保用户体验尽可能流畅。关键在于及时感知连接变化、缓存关键数据，并在网络恢复后智能同步。
检测网络是否在线
浏览器原生提供了 navigator.onLine 属性用于判断设备是否处于联网状态。它返回一个布尔值：
- navigator.onLine === true：浏览器认为设备已连接到网络
- navigator.onLine === false：浏览器认为设备离线
这个属性虽然简单，但存在局限性——它只能检测设备是否接入了网络（如Wi-Fi或以太网），不能判断是否能真正访问远程服务器。例如，设备连上了无互联网的热点，onLine 仍可能为 true。
监听网络状态变化
通过监听 online 和 offline 事件，可以在网络切换时做出响应：
立即学习“Java免费学习笔记（深入）”；
window.addEventListener('online', () => {
console.log('网络已恢复');
// 可在此触发数据同步
});
window.addEventListener('offline', () => {
console.log('网络已断开');
// 提示用户或启用离线模式
});
这些事件全局触发，适合用来更新UI状态，比如显示“当前离线”提示条。
增强离线检测的准确性
由于 navigator.onLine 不够精确，可结合心跳请求提升判断可靠性：
- 定期向服务器发送轻量级请求（如GET /health）
- 设置超时机制，失败则视为实际不可达
- 结合本地缓存策略，优先展示旧数据而非报错
这样即使 onLine 为 true，也能识别出“假连接”场景。
离线数据同步策略
当用户在离线状态下修改了数据（如填写表单、更新记录），应暂存于本地，并在网络恢复后自动提交：
- 使用 localStorage 或 IndexedDB 存储待同步操作
- 为每条记录标记时间戳或版本号，避免冲突
- 在 online 事件中启动同步队列，逐条重发请求
- 成功后从队列移除，失败则保留并重试（可限制重试次数）
对于复杂应用，可引入 Service Worker 拦截请求，在离线时缓存写操作，恢复后自动转发。
基本上就这些。合理利用浏览器能力，配合本地存储和主动探测，就能构建出对网络波动不敏感的健壮Web应用。
