navigator.onLine 不可靠，仅反映浏览器网络层连接状态而非真实服务器可达性；需配合同源 HEAD 请求（如 /healthz）实时探测，且不可依赖 online/offline 事件。
不能直接用 HTML 文件本身判断在线状态 —— navigator.onLine 是 JavaScript API，必须配合脚本执行；仅靠 index.html 静态文件无法主动检测或响应网络变化。
为什么 navigator.onLine 不可靠
这个属性只反映浏览器的“网络层连接状态”，不是真实服务器可达性：
- 返回
true时，可能 DNS 失败、代理中断、防火墙拦截，或目标服务器宕机 - 返回
false时，可能只是断开了 Wi-Fi，但手机热点仍可用（部分浏览器不更新） - Chrome/Firefox 在离线后不会自动触发
online事件，除非用户手动刷新或切换标签页 - 桌面端某些系统（如 Windows）会把“飞行模式”误判为“有线连接”，导致
onLine持续为true
如何在 index.html 中安全使用 navigator.onLine
必须嵌入 <script>，且需搭配心跳探测才实用：
<script>
function checkRealOnline() {
return fetch('/healthz', { method: 'HEAD', cache: 'no-store' })
.then(() => true)
.catch(() => false);
}
window.addEventListener('load', () => {
const status = document.getElementById('status');
status.textContent = navigator.onLine ? '在线（待验证）' : '离线';
// 初始校验
if (navigator.onLine) {
checkRealOnline().then(isOk => {
status.textContent = isOk ? '在线' : '网络异常';
});
}
// 监听系统级事件（仅作参考，不可依赖）
window.addEventListener('online', () => {
status.textContent = '检测到 online 事件';
// 这里仍需调用 checkRealOnline()
});
window.addEventListener('offline', () => {
status.textContent = '已离线';
});
});
</script>
关键点：
立即学习“前端免费学习笔记（深入）”；
-
/healthz必须是同源路径，且服务端要快速响应（建议 500ms 内） - 用
HEAD避免传输冗余 body，减少带宽和延迟 - 加
cache: 'no-store'防止 Service Worker 或浏览器缓存伪造成功 - 不要只信
online事件——它可能延迟数秒，甚至完全不触发
Service Worker 场景下更要注意
如果项目用了 Service Worker，navigator.onLine 的行为会被进一步干扰：
- SW 可能缓存了失败请求，让
fetch()看似成功，但实际未触达网络 - SW 的
fetch事件中无法访问navigator.onLine（无navigator对象） - 必须在主页面 JS 中做真实探测，并把结果 postMessage 给 SW 同步状态
- 常见错误：在 SW 里监听
online事件并重载缓存——这毫无意义，因为 SW 本身不感知页面网络状态
真正有效的在线判断永远需要一次真实的、非缓存的、同源的网络请求。所有基于 navigator.onLine 的 UI 提示，都该标注“可能不准确”，并在用户操作前（比如提交表单）再做一次实时探测。
