Question

我正在使用Service Worker检查发出请求时用户是在线还是离线。这是我采取的一些方法：

在服务工作者中使用这种方法

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

    }
})

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

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

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

Answer 1

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

相反，您知道在获取引发异常时您处于脱机状态。提取操作只会在设备无法连接到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将在线/离线状态的消息与UI同步：

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

使用服务人员检测离线或在线

1 个答案: