Javascript 如何与服务人员检查是否脱机？

我一直在学习这个教程

到目前为止，我能够让我的服务人员缓存脱机页面并加载它，但我只想在没有internet访问的情况下显示这个offline.html页面。它现在的工作方式是，每次我刷新页面时，它都会显示出来，即使可以访问互联网，除非我在开发者工具的Chrome应用程序选项卡中选中

绕过网络

复选框

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

---

您可以使用navigator.onLine，它将根据网络连接返回true或false，您可以查看它可能会有所帮助。

您可以使用

navigator.onLine

。对于联机，它返回

true

，否则返回

false

window.addEventListener（'DOMContentLoaded'，function（）{
var status=document.getElementById（“状态”）；
函数updateOnlineStatus（事件）{
var条件=navigator.onLine？“onLine”：“offline”；
status.className=条件；
status.innerHTML=condition.toUpperCase（）；
}
window.addEventListener（“联机”，updateOnline状态）；
window.addEventListener（'offline'，updateOnlineStatus）；
});
#状态{
宽度：100%；
字体：粗体1em无衬线；
颜色：#FFF；
填充：0.5em；
}
.在线{
背景：绿色；
}
.离线{
背景：红色；
}
在线
切换网络连接以查看效果
导航器的可能重复。联机

如果连接到网络（例如wifi），则返回

true

，如果网络本身未连接到internet，则返回事件。