使用 Service Worker 检测离线或在线

Question

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

在service worker的这个方法中，

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

    }
})

navigator.onLine 仅当您 check/uncheck 检查元素中的离线复选框时才有效。但是当我切换设备的互联网 on/off 时，无论是离线还是在线，它总是 return 真。而且从我在其他答案中看到的情况来看，如果您连接到本地网络，即使您的本地网络没有互联网连接，navigator.onLine 也会 return 为真。

我已尝试在 self.addEventListener("fetch", {...}) 方法中 ping url，如此处所示。这将在 new XMLHttpRequest(); 对象中带来错误。
我已尝试在 self.addEventListener("fetch", {...}) 方法中加载在线资源（图像），如此处所示。控制台显示 new Image();.
错误

因为 none 这些方法有效，我们如何在发出请求时检查用户是在线还是离线？

Answer 1

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

取而代之的是，当提取抛出异常时，您知道自己处于离线状态。只有当设备无法连接到 Internet/Network.

时，提取才会抛出异常

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:

将 online/offline 状态的消息与 UI 状态的消息同步

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

使用 Service Worker 检测离线或在线

detect offline or online using service worker

javascript

reactjs

progressive-web-apps

service-worker

offline