在开发支持离线体验的 Web 应用时，很多开发者都会第一时间想到使用 window.addEventListener('online') 和 offline 事件。代码写得漂亮，逻辑也清晰，可一测试却发现——事件根本没触发！
明明关了 Wi-Fi，拔了网线，甚至开了飞行模式，控制台却一片寂静。难道浏览器'失聪'了？其实，并非事件失效，而是我们对'离线'的理解与浏览器的判断标准存在偏差。
今天，我们就来揭开这个'监听不到'的谜团，并提供一套可靠的调试与适配方案。
一、浏览器如何定义'在线'？
关键点在于：
navigator.onLine 的值由操作系统提供，而非通过 ping 某个服务器得出。
这意味着：
- 只要系统认为'有物理或无线连接'，哪怕无法访问互联网（比如连上了没有外网的 Wi-Fi），onLine 仍可能为 true。
- 反之，只有当操作系统明确报告'无任何网络接口可用'时，才会设为 false，并触发 offline 事件。
所以，单纯关闭 Wi-Fi 并不一定等于'离线'——如果你的电脑还插着网线，或者虚拟机/蓝牙共享了网络，系统依然会认为'在线'。
二、为什么你的'断网操作'无效？
❌ 场景 1：直接关闭 Wi-Fi 或拔网线
- 问题：操作系统可能仍有其他活跃网络接口（如以太网、虚拟网卡、Docker 网络等）。
- 结果：
navigator.onLine保持true，offline事件不触发。
❌ 场景 2：双击 HTML 文件用 file:// 协议打开
- 问题：出于安全策略，Chrome 等浏览器在
file://下始终返回navigator.onLine = true。 - 结果：无论你怎么断网，事件都不会触发。
❌ 场景 3：在后台标签页测试
- 问题：部分浏览器会限制后台页面的事件响应，延迟或忽略状态变更。
- 结果：切换回页面时才发现状态已变，但事件未被记录。
三、正确测试方法：用 DevTools 模拟离线
最可靠、最一致的测试方式，不是动硬件，而是用开发者工具：
- 打开 Chrome DevTools（F12）
- 切换到 Network（网络）面板
- 在顶部下拉菜单中选择 'Offline'
✅ 此时：
navigator.onLine立即变为falseoffline事件被触发- 所有网络请求自动失败（模拟真实断网）
💡 这是前端开发中唯一推荐的离线测试方式，因为它绕过了操作系统的不确定性，直接由浏览器引擎模拟状态变更。
四、本地开发必须用 HTTP 服务
再次强调：不要用 file:// 测试网络状态！
启动一个本地服务器，哪怕是最简单的：
工具形式： 使用 Live Server（VS Code 插件），默认 5500 端口
代码形式：
# Python
python3 -m http.server 8080
# Node.js (若安装了 serve)
npx serve
然后访问 http://localhost:8080，再配合 DevTools 的 Offline 模式，就能稳定复现 事件。
