使用 Service Worker 时检测在线状态不起作用答案

【问题标题】：Detecting online status when using service worker does not work使用 Service Worker 时检测在线状态不起作用
【发布时间】：2020-06-22 18:56:13
【问题描述】：

我正在使用 google workbox 使服务人员可以离线使用某些内容。离线部分按预期工作。但是当客户端再次具有网络访问权限时，我想给用户一条消息（例如带有弹出窗口或）。我试图通过浏览器的在线事件监听器来实现这一点。我用 chrome 打开了页面，然后我将 chrome 置于离线模式。之后，我导航到 index2.htm 并显示脱机内容（=works）。然后我再次将chrome置于在线模式，但没有触发在线事件。有谁知道为什么以及如何解决这个问题？

我的文件：

sw.js

importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');
if (workbox) {
    precaching.precacheAndRoute([{
        url: 'https://playground.test/index2.htm',
        revision: 1
    }]);
    self.addEventListener('fetch', (event) => {
        fetch(event.request)
            .catch(function (e) {
                return caches.match(event.request);
            });
    });
}

index.htm

<!DOCTYPE html>
<html>
<head>
    <title>Page 1</title>
</head>
<body>
    <a href="index2.htm">Index2</a>
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js');
            });
        }
    </script>
</body>
</html>

index2.htm

<!DOCTYPE html>
<html>
<head>
    <title>Page 2</title>
    <script src="offline.js"></script>
</head>
<body>
    <h1>Page 2</h1>
</body>
</html>

离线.js

window.addEventListener('load', () => {
    const handleNetworkChange = () => {
        if (navigator.onLine) {
            alert('You are online again!');
        }
    };
    window.addEventListener('online', handleNetworkChange);
});

【问题讨论】：

标签： javascript service-worker offline-caching

【解决方案1】：

我有同样的问题，我用这个代码解决了这个问题：

  const hasInternet = (url = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png?x=' + Math.random()): Promise<boolean> => {
return new Promise(resolve => {

  let img = new Image();
  img.onload = function () { resolve(true); };
  img.onerror = function () { resolve(true); };

  img.src = url;
  setTimeout(function () { resolve(false); }, 5000);
});
}

【讨论】：