悠悠楠杉
网站页面
JS如何检测用户是否离线？判断网络状态的4种检测技巧！
06/28
一、为何需要检测网络状态？
在现代Web开发中，离线功能已成为用户体验的重要指标。当用户网络不稳定时，通过JavaScript及时检测离线状态，可以：
- 显示友好的离线提示
- 启用本地缓存功能
- 避免无效的API请求
- 同步数据时避免冲突
下面详细介绍4种实现方案。
二、4种网络状态检测技巧
1. Navigator.onLine基础检测（最简单）
浏览器原生提供navigator.onLine属性，直接返回布尔值：
javascript
if (navigator.onLine) {
console.log("用户在线");
} else {
console.log("用户已离线");
}
优缺点：
- ✅ 零配置，一行代码即可
- ❌ 只能检测局域网连接状态，无法判断真实互联网连通性
2. 在线/离线事件监听（实时响应）
通过online和offline事件监听网络变化：
```javascript
window.addEventListener('online', () => {
alert("网络已恢复！");
});
window.addEventListener('offline', () => {
alert("网络连接中断，部分功能受限");
});
```
实际应用场景：
- PWA应用中显示浮动通知
- 表单提交失败时自动保存草稿
3. Service Worker + Fetch检测（精准判断）
通过Service Worker拦截请求，实现真实网络检测：
javascript
// service-worker.js
self.addEventListener('fetch', event => {
if (!navigator.onLine) {
return caches.match(event.request);
}
// 正常网络请求...
});
进阶技巧：
- 配合Cache API实现离线优先策略
- 可自定义超时逻辑（如2秒无响应视为离线）
4. WebSocket心跳检测（持续监控）
建立WebSocket长连接，定期发送心跳包：
```javascript
const socket = new WebSocket('wss://your-server.com');
setInterval(() => {
if (socket.readyState === WebSocket.OPEN) {
socket.send('ping');
} else {
handleOffline();
}
}, 30000);
```
适用场景：
- 实时协作工具（如在线文档）
- 金融类需要高及时性的应用
三、如何选择最佳方案？
| 方案 | 适用场景 | 可靠性 | 复杂度 |
|---------------------|------------------|--------|--------|
| Navigator.onLine | 简单状态展示 | ★★☆ | 低 |
| 事件监听 | 用户交互提示 | ★★★ | 中 |
| Service Worker | PWA/离线应用 | ★★★★ | 高 |
| WebSocket | 实时性要求高 | ★★★★★ | 最高 |
推荐组合使用：
1. 先用navigator.onLine快速判断
2. 添加事件监听应对突发断网
3. 关键功能使用Service Worker兜底
四、延伸思考：网络质量检测
除了离线/在线状态，还可通过以下方式评估网络质量：
- navigator.connection API获取带宽信息
- 计算Image/Font等资源加载耗时
- 使用RTCPeerConnection测量延迟
这些技术适用于视频流、大型文件上传等场景。
结语
网络状态检测是提升Web应用鲁棒性的关键步骤。根据你的项目需求，选择合适的技术方案，并记得在真实弱网环境下测试！如果你有更巧妙的实现方式，欢迎在评论区分享讨论。
```
