关闭 WiFi 时 navigator.onLine 仍为 true，设置“离线工作”时为 false在浏览器中

Question

当我关闭 Wi-Fi（OS X 笔记本上的 Airport）时，navigator.onLine 仍然返回 true。这是违反直觉的行为。但是当我在像 Firefox 这样的浏览器中设置“离线工作”时，它正确地返回 false。这是预期的吗？

alert(navigator.onLine ? "online" : "offline");

Answer 1

是的。浏览器不会向页面提供网络连接信息，而是使用脱机工作的状态作为值。

Answer 2

使用 window.addEventListener 检测网络更新：

window.addEventListener('online',  amIOnline);
window.addEventListener('offline', amIOffline);

function amIOnline(){
    console.log('online');
}

function amIOffline(){
    console.log('offline');
}

Answer 3

我在 Google Chrome 中遇到了这个问题，并找到了Electron 的在线/离线事件检测 页面（基于 Google Chrome）。事实证明，虚拟化软件和网络适配器可以阻止您的浏览器检测到它何时离线。

就我而言，我打开和关闭 Wifi，但 navigator.onLine 始终返回 true。问题是我连接到了 VPN，即使在我关闭 Wifi 后，VPN 仍然注册为“已连接”（我想它可能最终发现它已断开连接，但在我的测试中它从未注册过） 。如果我手动断开与 VPN 的连接，则打开和关闭 Wifi 会立即开始反映在 Google Chrome 中，并且 navigator.onLine 将正确返回 false。

因此，对于遇到此问题的人来说，答案是您的计算机上可能有其他一些软件阻止您的浏览器检测正确的网络状态。这可能是 VPN，也可能是虚拟化软件等。

对于开发 Web 应用程序的人来说，这提出了令人烦恼的挑战。我注意到 Firebase 的 Firestore 服务（专有产品）如果 10 秒后无法连接到服务器，就会假设它处于离线状态并进入“离线模式”。我想它这样做是因为没有任何可靠的方法可以仅通过 javascript 检测在线/离线状态。

来自 MDN 的其他详细信息

在 Chrome 和 Safari 中，如果浏览器无法连接到局域网 (LAN) 或路由器，则表示浏览器处于离线状态；所有其他条件返回 true。因此，虽然您可以假设浏览器在返回 false 值时处于离线状态，但您不能假设 true 值一定意味着浏览器可以访问互联网。您可能会收到误报，例如计算机运行的虚拟化软件具有始终“连接”的虚拟以太网适配器。因此，如果你真的想确定浏览器的在线状态，你应该开发额外的手段来检查。