如何与服务工作者一起检查是否离线?

Question

我一直在遵循本教程 https://codelabs.developers.google.com/codelabs/offline/#7

到目前为止，我能够让我的服务工作者缓存离线页面并加载它，但我想仅在无法访问互联网时才显示此离线.html页面。它现在的工作方式是，即使可以访问互联网，每次刷新页面时都会显示它，除非我选中开发人员工具中 Chrome 应用程序选项卡中的Bypass for network复选框。

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

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 的信息

Answer 2

您可以使用navigator.onLine根据网络连接返回 true 或 false，您可以查看它 在服务工作进程中检测脱机状态的最佳做法可能会有所帮助。