检查用户是否通过 Service Worker 重新上线

Question

有没有办法检测用户是否已使用服务人员连接回网络/在线？

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

它可能可以在 fetch 事件处理程序中完成，但我更喜欢更少的 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 本身从离线状态恢复到在线状态的时刻（事件）。但是，如果您对此特别感兴趣，则可以利用对象中的online和offline事件window。换句话说，您可以在页面（而不是软件中）运行的常规 JavaScript 代码中为这些事件添加事件侦听器，并且每当它们发生时，通过postMessage API. 这样，页面上的 JS 就会检测到在线/离线更改并通知软件，之后软件就可以将该信息用于其想要的任何目的。

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

正如其他人指出的那样，根据您真正感兴趣的内容（“连接变化何时发生”与“如何检查软件中是否在线/离线”），这可能是一个重复的问题，我建议您阅读链接回答。

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