navigator.onLine仅反映浏览器主观判断，非真实连通性；需监听online/offline事件响应状态变化，并用fetch+超时验证服务器可达性，PWA中须结合Service Worker行为双校验。
用 navigator.onLine 判断当前网络状态
浏览器原生提供 navigator.onLine 属性，返回布尔值：true 表示“浏览器认为”在线，false 表示离线。但它不检测真实网络连通性，只反映浏览器自身对网络的判断（比如 Chrome 在断开 WiFi 后可能仍返回 true，因为有以太网或虚拟网卡）。
实际使用时需注意：
-
navigator.onLine初始化值取决于页面加载时的状态，后续不会自动更新——必须配合事件监听 - 它无法区分「有网络但服务器不可达」和「完全断网」，仅适合做粗粒度提示（如显示“离线中…”）
- 部分旧版 Safari 在 iOS 上会忽略该 API，返回恒定
true
监听 online 和 offline 事件
这两个事件在 window 上触发，是响应式更新网络状态的关键：
window.addEventListener('online', () => {
console.log('已联网');
// 可在此重试失败请求、同步缓存数据等
});
window.addEventListener('offline', () => {
console.log('已断网');
// 可在此暂停轮询、禁用提交按钮、显示离线 UI
});
常见误区：
立即学习“前端免费学习笔记（深入）”；
- 事件不会冒泡，不能委托到父元素，必须直接绑定在
window - 首次加载页面时不会触发事件，需手动检查
navigator.onLine初始化 UI - 某些 PWA 场景下，Service Worker 可能拦截请求但
navigator.onLine仍为true，需结合 fetch 超时判断
用 fetch + 超时兜底验证真实连通性
要确认是否真能访问服务器，必须发一个轻量请求。推荐用 fetch 检查一个稳定 endpoint（如 /health 或空 GIF）：
async function checkRealConnection() {
try {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 3000);
await fetch('/favicon.ico', { method: 'HEAD', signal: controller.signal });
clearTimeout(timeoutId);
return true;
} catch (e) {
return false;
}
}
关键点：
- 避免用
GET /这类可能被 CDN 缓存或重定向的路径，HEAD请求更轻量 - 必须设超时，否则用户切到后台再切回时请求可能挂起，阻塞判断逻辑
- 不要依赖单次结果：可节流调用（如每 15 秒一次），或仅在
online事件后主动验证一次
兼容性与 PWA 场景下的特殊处理
在渐进式 Web App 中，navigator.onLine 的局限性会被放大：
- Service Worker 可缓存响应，导致
fetch成功但实际无网（尤其cache-first策略） - Android Chrome 某些版本会在锁屏后触发
offline事件，但唤醒后未触发online - Electron 应用需额外监听
webContents.isOffline()，不能只信navigator.onLine
真正可靠的方案永远是「状态 + 行为」双校验：用 navigator.onLine 做快速响应，用可控请求验证关键链路是否畅通。别让 UI 信任浏览器的“感觉”。
