JavaScript Online/Offline 检测

navigator.onLine检测网络状态在线/离线布尔值、online/offline事件监听window.addEventListener('online'/'offline')、网络状态在PWA中的应用(切换离线模式/排队离线操作待上线同步) · 难度：入门 · +10XP

JavaScript Online/Offline 检测 —— 判断网络状态

navigator.onLine可以检测浏览器是否联网。配合online/offline事件，可以在断网时提醒用户或切换离线模式。

基本用法

console.log(navigator.onLine ? '在线' : '离线');
window.addEventListener('online', () => {
  console.log('网络恢复了！');
  syncPendingData(); // 同步离线时积压的数据
});
window.addEventListener('offline', () => {
  console.log('网络断开了，切换离线模式');
  showOfflineBanner(); // 显示离线提示条
});

注意：navigator.onLine只表示浏览器是否连接到网络，不能保证互联网连接正常（可能连上了路由器但路由器没网）。

动手练习

1. 基础练习：在页面上显示当前网络状态的指示器。
2. 进阶应用：做一个离线优先的待办应用——断网时保存到localStorage，联网时同步。
3. 项目实战：在PWA应用中实现网络状态感知。