使用 service worker 检测离线或在线答案

【问题标题】：detect offline or online using service worker使用 service worker 检测离线或在线
【发布时间】：2020-08-19 04:07:01
【问题描述】：

我正在使用 service worker 来检查用户在发出请求时是在线还是离线。以下是我采取的一些方法：

在服务工作者的这个方法中，

self.addEventListener("fetch", (event) => {
    if (navigator.onLine){

    }
})

navigator.onLine 仅在您选中/取消选中 Inspect Element 中的离线复选框时有效。但是当我打开/关闭设备的互联网时，无论我离线还是在线，它都会返回 true。而且从我在其他答案中看到的情况来看，即使您的本地网络没有互联网连接，如果您连接到本地网络，navigator.onLine 也会返回 true。

我尝试在self.addEventListener("fetch", {...}) 方法中ping 一个url，如下所示https://stackoverflow.com/a/24378589/6756827。这将在new XMLHttpRequest(); 对象中带来错误。
我尝试在self.addEventListener("fetch", {...}) 方法中加载在线资源（图像），如https://stackoverflow.com/a/29823818/6756827 所示。控制台显示new Image(); 的错误。

由于这些方法都不起作用，我们如何在发出请求时在 Service Worker 中检查用户是在线还是离线？

【问题讨论】：

作为一般规则，在某个特定时刻知道是否已建立 Internet 连接的唯一方法是尝试与其他主机联系并获得响应。这就是互联网的运作方式。

标签： javascript reactjs progressive-web-apps service-worker offline

【解决方案1】：

在服务工作者中，您无权访问导航器对象，因此无权访问在线属性或事件。

相反，当 fetch 引发异常时，您知道自己处于离线状态。只有当设备无法连接到 Internet/网络时，fetch 才会抛出异常。

self.addEventListener( "fetch", function ( event ) {

event.respondWith(

    handleRequest( event )
    .catch( err => {
        //assume offline as everything else should be handled
        return caches.match( doc_fallback, {
            ignoreSearch: true
        } );

    } )

);

});

对于更复杂的情况处理，您可以使用消息 API 将在线/离线状态的消息与 UI 同步：

self.addEventListener( "message", event => {
    //handle message here
}

【讨论】：