如何检查使用Service Worker时是否离线？

Question

我一直在跟进这个教程：https://codelabs.developers.google.com/codelabs/offline/#7。目前，我已经成功使我的服务工作者缓存了离线页面并加载了它，但我想只有在没有网络访问时才显示这个offline.html页面。现在的情况是，每次刷新页面时都会显示它，即使有网络访问，除非我在Chrome的开发者工具中的应用程序选项卡中勾选“绕过网络”复选框。

self.addEventListener('fetch', function(event) {
    console.log(event.request.url);
    event.respondWith(
        fetch('https://mysite/offline.html')
    );;
});

- nived

---

可能是在服务工作者中检测离线状态的最佳实践的重复问题。 - Riad ZT

Answer 1

您可以使用 navigator.onLine。它返回 true 表示在线，返回 false 表示离线。

window.addEventListener('DOMContentLoaded', function() {
  var status = document.getElementById("status");

  function updateOnlineStatus(event) {
    var condition = navigator.onLine ? "online" : "offline";

    status.className = condition;
    status.innerHTML = condition.toUpperCase();
  }
  window.addEventListener('online',  updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});

#status {
  width: 100%;
  font: bold 1em sans-serif;
  color: #FFF;
  padding: 0.5em;
}

.online {
  background: green;
}

.offline {
  background: red;
}

<div id="status" class="online"> ONLINE </div>
<p> Toggle your network connection to see the effect </p>

在 MDN 上阅读更多信息

- Abk

Answer 2

您可以使用navigator.onLine来检测网络连接状态，它将返回true或false。您可以查看最佳实践：在服务工作者中检测离线状态以获取更多帮助。

- ravi

---

如果设备连接到网络（例如Wi-Fi），则navigator.onLine返回true，即使网络本身未连接到互联网。 - Mosh Feu