至尊技术网 - 网络状态监听
type: channel
link: https://www.zzwws.cn/tag/%E7%BD%91%E7%BB%9C%E7%8A%B6%E6%80%81%E7%9B%91%E5%90%AC/
items: JS如何检测用户是否离线？判断网络状态的4种检测技巧！

JS如何检测用户是否离线？判断网络状态的4种检测技巧！
type: item
date: 2025-06-28T09:32:02+08:00
description: 一、为何需要检测网络状态？在现代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应用鲁棒性的关键步骤。根据你的项目需求，选择合适的技术方案，并记得在真实弱网环境下测试！如果你有更巧妙的实现方式，欢迎在评论区分享讨论。 ```