网络状态监听与事件驱动：online/offline事件、navigator.onLine、重连检测

网络状态感知是离线同步的起点。UI 需要在网络中断时立即切换为离线模式，在网络恢复时触发数据回传与 UI 更新。本章讲解浏览器原生网络事件与 navigator.onLine 的准确含义、典型陷阱以及重连检测策略。

3.1 浏览器网络状态 API 概览

3.2 事件驱动架构：注册与取消

以下代码展示在 Vue 3 Composition API 中注册网络事件监听，并利用 onUnmounted 完成清理，避免内存泄漏。

import { ref, onMounted, onUnmounted } from 'vue'

const isOnline = ref(navigator.onLine)

function handleOnline() {
  isOnline.value = true
  console.log('[Net] 网络恢复')
  // 触发离线队列同步
  syncOfflineQueue()
}

function handleOffline() {
  isOnline.value = false
  console.log('[Net] 网络断开')
  // UI 切换为离线模式
  enterOfflineMode()
}

onMounted(() => {
  window.addEventListener('online', handleOnline)
  window.addEventListener('offline', handleOffline)
})

onUnmounted(() => {
  window.removeEventListener('online', handleOnline)
  window.removeEventListener('offline', handleOffline)
})

3.3 navigator.onLine 的常见陷阱

• 操作系统差异： macOS 下 Wi-Fi 连接但无互联网时，Chrome 可能仍返回 true；Android 下断开移动数据后通常会正确返回 false。
• 浏览器兼容： 部分老旧浏览器（IE 9 以下）不支持 navigator.onLine，需要降级为定时探测。
• 304 / DNS 缓存： 即便网络已断开，浏览器可能因缓存未失效而短暂认为在线。
• 事件重复触发： 网络状态频繁切换时，online/offline 可能连续触发多次，需要防抖处理。

3.4 重连检测策略

仅靠原生事件无法满足离线同步的可靠性要求，通常需要结合以下策略实现更精准的重连检测：

1. 心跳探测： 定期向服务端发送 HEAD 或 GET 请求（例如每 10s），若连续 n 次超时则判定离线。
2. 业务请求回退： 使用 fetch 或 axios 的 timeout 配置，将超时视为离线，触发队列暂存。
3. 指数退避重试： 重连失败后，等待时间依次增加（1s、2s、4s、8s…），避免高频无效请求。
4. 优先级队列： 恢复连接后，按数据重要性依次同步，先同步元数据（如 刷新），再同步业务数据。

3.5 流程图：网络状态变化与 UI 响应

3.6 调试与验证方法

• 浏览器 DevTools Network 面板： 勾选 Offline 复选框模拟网络断开，观察事件触发情况。
• Chrome DevTools 的 Network conditions： 可模拟不同网络类型（3G、慢速 4G）以及离线状态。
• 控制台日志： 在 handleOnline / handleOffline 中加入 console.timeStamp()，精确记录事件发生时刻。
• 自定义离线测试页： 使用 window.dispatchEvent(new Event('offline')) 手动触发事件，验证 UI 响应逻辑。

3.7 常见错误与优化

3.8 小结