使用navigator.onLine属性和online/offline事件可实现Web应用的网络状态检测，示例包括实时提示用户网络变化、离线缓存数据及恢复后同步，但需结合心跳请求提升准确性。
在现代Web应用中，实时检测用户的网络连接状态对提升用户体验非常重要。JavaScript提供了原生API来帮助开发者判断设备是否在线或离线，从而做出相应处理，比如暂停请求、提示用户或自动重连。
使用navigator.onLine检测网络状态
navigator.onLine 是浏览器提供的一个布尔属性，用于快速判断当前设备是否处于联网状态。
它返回两个值：
- true：表示设备认为自己在线（有网络）
- false：表示设备认为自己离线
示例代码：
if (navigator.onLine) {
console.log("设备已连接网络");
} else {
console.log("设备当前离线");
}
监听网络状态变化事件
仅检查一次状态是不够的，通常需要持续监听网络变化。浏览器提供了两个事件：
- online：当网络从离线变为在线时触发
- offline：当网络从在线变为离线时触发
你可以绑定这些事件来响应状态变化：
window.addEventListener('online', () => {
console.log("网络已恢复");
// 可在此处尝试重发未完成的请求
});
window.addEventListener('offline', () => {
console.log("网络断开，请检查连接");
// 提示用户或暂停数据同步
});
注意：onLine的局限性
navigator.onLine 并不真正检测网络质量或能否访问外网。它的判断依据是操作系统级别的网络状态，可能存在误判：
- Wi-Fi已连接但无法访问互联网（如需登录认证页面），此时 onLine 仍可能返回 true
- 某些移动设备切换网络时存在延迟更新
因此，建议结合以下方式增强判断准确性：
- 发送一个小的HEAD或GET请求（如到 /ping 或 CDN 资源）验证真实连通性
- 使用 setInterval 定期探测服务端心跳接口
- 在关键操作前主动检查可用性
实际应用场景建议
常见用途包括：
- 表单提交失败时，先检查网络再提示用户
- 离线时将数据暂存 localStorage，恢复后自动同步
- 展示“您已离线”或“重新连接成功”的UI提示
示例：简单的网络状态提示
const showStatus = (isOnline) => {
const status = isOnline ? "在线" : "离线";
document.getElementById("status").textContent = status;
document.getElementById("status").style.color = isOnline ? "green" : "red";
};
// 初始化状态
showStatus(navigator.onLine);
// 监听变化
window.addEventListener('online', () => showStatus(true));
window.addEventListener('offline', () => showStatus(false));
基本上就这些。利用 navigator.onLine 和 online/offline 事件，可以实现基础但有效的网络状态感知。虽然它不能100%反映真实网络可达性，但在大多数场景下足够实用，配合服务端探测可进一步提升可靠性。
