navigator.online仅反映浏览器对网络接口的感知状态，不可靠；需结合online/offline事件监听与轻量探测请求（如fetch /health）验证真实业务可达性。
navigator.onLine 是浏览器提供的轻量级网络状态检测 API，但它仅反映浏览器是否“认为”已连接（基于系统网络接口状态），不保证能访问服务器或互联网。因此，真正友好的断网提示与恢复体验，需要将 navigator.onLine 作为第一层快速感知，再结合网络请求失败、定时探测和事件监听，形成分层响应机制。
监听 online / offline 事件，实现即时状态感知
浏览器会在网络连接状态变化时触发 window 上的 online 和 offline 事件，这是响应用户网络切换（如关闭 Wi-Fi、拔掉网线）最及时的方式：
- 在页面初始化时注册监听，避免遗漏首次加载时的状态
- 用
navigator.onLine初始化 UI 状态，避免白屏等待事件 - 建议配合 CSS 类控制提示区域显隐，而非直接操作 DOM，便于维护
示例代码片段：
window.addEventListener('online', () => showStatus('online'))window.addEventListener('offline', () => showStatus('offline'))
// 初始化
showStatus(navigator.onLine ? 'online' : 'offline')
主动探测网络连通性，弥补 onLine 的误判缺陷
navigator.onLine 在以下场景常返回 true 却实际无法通信：
— 电脑连着未上网的局域网路由器
— 代理配置错误但系统显示“已连接”
— 移动端飞行模式关闭但信号极弱
因此需定期发起轻量探测（如请求一个静态资源）验证真实可达性：
- 推荐探测
/favicon.ico或一个无缓存头的空 JSON 接口（如/healthz） - 设置超时（建议 3–5s），避免阻塞主线程或误判慢网为断网
- 失败时不要立即覆盖
onLine状态，而是标记“疑似离线”，连续失败 2–3 次再触发断网提示 - 成功后清除“疑似离线”标记，并在下次探测前暂停 30s 避免频繁请求
拦截关键请求失败，提供上下文化反馈
用户操作（如提交表单、刷新列表）时的请求失败，是最需友好提示的时刻。此时不应只依赖全局在线状态，而应结合具体请求结果：
- 对 fetch / axios 请求统一封装：捕获
TypeError: Failed to fetch（典型断网/跨域/取消）及 HTTP 0 状态码 - 若此时
navigator.onLine === false，显示“网络已断开，请检查连接” - 若
navigator.onLine === true但请求失败，提示“请求超时，请稍后重试”并提供“重试”按钮 - 对非核心请求（如埋点、头像预加载）可静默忽略，避免干扰主流程
设计渐进式提示与自动恢复逻辑
提示不是弹窗轰炸，而是分层级、可交互、有记忆：
- 顶部横幅（非模态）提示“⚠️ 当前网络不可用”，带“重试”按钮和自动关闭（5s）
- 用户点击“重试”时，先执行一次探测，再重发最近一次失败请求
- 恢复在线后，自动重发已缓存的待提交数据（如草稿、离线点赞），并提示“已同步 {n} 条操作”
- 本地存储当前状态（如
localStorage.setItem('lastOnlineAt', Date.now())），重启页面后仍能延续体验
