使用 service worker 检测离线或在线

Question

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

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

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

    }
})

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

2. 我试图在self.addEventListener("fetch", {...})方法中 ping url ，如此处所示https://stackoverflow.com/a/24378589/6756827 。 这将在new XMLHttpRequest();中带来错误。 object。

3. 我试图在self.addEventListener("fetch", {...})方法中加载在线资源（图像），如此处所示https://stackoverflow.com/a/29823818/6756827 。 控制台显示new Image(); .

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

Answer 1

在服务人员中，您无权访问导航器 object，因此无法访问在线属性或事件。

相反，当 fetch 引发异常时，您知道自己处于脱机状态。 只有当设备无法连接到 Internet/网络时，提取会引发异常。

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 将在线/离线 state 的消息与 UI 同步：

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