直接监听window的online/offline事件并配合navigator.onLine获取初始状态即可实现网络检测，但其仅反映接口层连通性，不保证业务可用，需结合心跳请求提升精度。
直接监听 window 上的 online 和 offline 事件即可，这是浏览器原生支持、无需第三方库的最简方案。
绑定两个核心事件
这两个事件触发时机明确，且只在状态真正切换时才触发：
- offline：浏览器从“能联网”变为“检测不到网络接口”，比如断开 Wi-Fi、拔掉网线、飞行模式开启
- online：浏览器重新检测到可用网络接口，比如连回 Wi-Fi、关闭飞行模式
代码示例：
window.addEventListener('offline', () => {
console.log('已离线');
// 例如：禁用表单提交按钮、显示离线横幅、暂停轮询
});
window.addEventListener('online', () => {
console.log('已上线');
// 例如：重试失败请求、恢复数据同步、隐藏离线提示
});
必须配合 navigator.onLine 获取初始状态
页面刚加载时，事件尚未触发，但 UI 需立刻反映当前状态。此时应读取 navigator.onLine：
立即学习“Java免费学习笔记（深入）”；
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 它是一个只读布尔值，页面加载后即可访问
- 返回
true表示浏览器认为已连接网络（如接入局域网、Wi-Fi） - 返回
false表示浏览器明确检测不到任何网络接口
典型初始化写法：
const statusEl = document.getElementById('net-status');
function updateUI() {
const isOnline = navigator.onLine;
statusEl.textContent = isOnline ? '✅ 在线' : '⚠️ 离线';
statusEl.className = isOnline ? 'online' : 'offline';
}
// 页面加载时立即设置
updateUI();
// 后续状态变化时更新
window.addEventListener('online', updateUI);
window.addEventListener('offline', updateUI);
注意它的局限性：不等于能访问服务器
navigator.onLine 只反映设备网络接口层是否连通，不是业务层可用性判断：
- 连接了无外网的校园网，仍可能返回
true - 路由器故障或 DNS 异常时，
navigator.onLine仍为true，但 API 请求全部失败 - 部分安卓 WebView 或旧版 iOS 浏览器对此属性支持不稳定
若需更高精度，建议补充轻量心跳请求（如每 30 秒 fetch('/health')），仅当 navigator.onLine === true 且心跳失败时，才判定为“业务不可用”。
避免常见误区
这些做法实际效果差或已被弃用：
- 不用定时轮询
navigator.onLine—— 事件机制已足够，轮询浪费资源 - 不要依赖
visibilitychange或页面焦点事件代替网络检测 —— 用户切后台 ≠ 断网 - 不推荐仅靠
fetch报错就标记“离线” —— 单次请求失败可能是临时抖动，需结合多次失败+超时策略
