使用 Service Worker 检查用户是否重新在线

Question

有没有办法检测用户是否已使用 Service Worker 连接回 network/online？

我想在用户返回网络时获取一些数据。

它可能在获取事件处理程序中完成，但我更喜欢不那么骇人听闻的解决方案。

我想出的 hacky 解决方案的伪代码：

self.addEventListener('fetch', function(event) {
     event.respondWith(
         fetch(event.request)
              .then(function(res) {
                   // check previous status
                   // if previous status == offline, user is back online
                   // do back online stuff...
                   // set status to online if previous status is offline
              })
              .catch(function(err) {
                   // set status to offline
              })
        );
});

Answer 1

Service Worker本身无法检测到从离线状态回到在线状态的时刻（事件）。但是，如果您对此特别感兴趣，可以使用 window 对象中的 online 和 offline 事件。换句话说，您可以在页面（不在 SW 中）的常规 JavaScript 代码运行中为这些事件添加事件侦听器，无论何时发生，都通过 postMessage API 通知 SW .这样，页面上的 JS 会检测到 online/offline 更改并通知 SW，之后 SW 可以将该信息用于任何它想要的目的。

需要注意的一件事：如果浏览器关闭或用户未查看页面，这些 online/offline 事件不会触发，因为它们发生在页面的 JS 执行上下文中。这是设计使然：您不应该能够创建持续跟踪用户连接状态的 Service Worker。

正如其他人所指出的，这取决于您真正感兴趣的内容（"when does the connectivity change happen" 与 "how to check if online/offline in SW"），这可能是一个重复的问题，我建议您阅读链接的答案。

根据您的要求，我想您希望在客户端和服务器之间进行某种同步，是吗？如果是这样，我建议您阅读至少 Chrome 支持的 Background Sync API，它可能会对您有所帮助。下面是一些使用 Workbox 库的示例 https://developers.google.com/web/tools/workbox/modules/workbox-background-sync

使用 Service Worker 检查用户是否重新在线

Check if user is back online with Service Worker

javascript

service-worker

progressive-web-apps

service-worker-events