应结合 navigator.onLine 与心跳检测实现断网提示：前者快速响应系统级网络切换，后者验证真实连通性；需手动校验初始状态、防浮层重复、加自动消失与刷新入口。
可以利用 navigator.onLine 监听网络状态变化，配合自定义事件（如 online / offline）在全局触发提示浮层，但需注意其局限性并做合理兜底。
理解 navigator.onLine 的行为特点
navigator.onLine 返回布尔值，但它不检测真实网络连通性，只反映浏览器是否认为自己“在线”——例如 Chrome 在断开 WiFi 后可能仍返回 true（尤其在有本地缓存或代理时）。它仅在明确切换（如禁用网卡、拔网线、关闭 WiFi）时可靠触发变化。
- 页面加载时的初始值可能不准（如离线打开页面，但
navigator.onLine === true） - 无法区分“能连 DNS”、“能通服务器”、“API 接口可用”等细粒度状态
- 建议搭配一次轻量级心跳请求（如 GET
/health或空图片）做二次验证
注册原生 online/offline 事件监听
浏览器原生支持 window.addEventListener('online') 和 'offline'，无需 polyfill，可直接用于状态感知：
const showOfflineTip = () => {
// 插入或显示浮层 DOM（见下节）
};
const hideOfflineTip = () => {
// 移除或隐藏浮层
};
window.addEventListener('offline', showOfflineTip);
window.addEventListener('online', hideOfflineTip);
⚠️ 注意：这些事件不会在页面初始化时触发，所以需手动检查初始状态：
if (!navigator.onLine) {
showOfflineTip();
}
实现轻量可控的全局提示浮层
浮层应简洁、非阻断、可自动消失，并避免重复插入：
- 使用固定定位 + 低 z-index（如
z-index: 9998），确保覆盖所有内容但不遮挡关键操作 - 文字建议为：“网络已断开，部分功能可能不可用” + 一个刷新按钮（
location.reload()） - 添加 CSS 过渡（如
opacity和transform）提升体验 - 浮层出现 3–5 秒后自动淡出（若仍离线，下次事件再触发）
- 用
document.getElementById或 class 标记控制唯一性，防止多次监听导致多个浮层
增强可靠性：结合心跳检测兜底
仅靠 navigator.onLine 不足以应对“假在线”（如 DNS 故障、服务端宕机、防火墙拦截）：
- 启动一个定时器（如每 10s），fetch 一个极简资源（如
/ping?_t=${Date.now()}） - 超时（
AbortSignal.timeout(3000)）或响应非 2xx 时，视为“实际离线”，主动触发自定义事件 - 可派发自定义事件统一管理：
window.dispatchEvent(new Event('real-offline'))，让浮层监听该事件 - 恢复时同样用心跳成功作为“真实重连”信号，比原生
online更可信
不复杂但容易忽略细节：初始状态校验、浮层去重、心跳防抖、用户主动刷新入口。把 navigator.onLine 当作快速开关，用心跳当事实依据，两者结合才能做到真正友好的断网提示。
