时间戳

首页 > 解决方案 > 检查用户是否与 Service Worker 重新联机

javascript - 检查用户是否与 Service Worker 重新联机

问题描述

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

当用户回到网络时，我想获取一些数据。

它可能在 fetch 事件处理程序中完成，但我更喜欢不那么 hacky 的解决方案。

我想出了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
              })
        );
});

标签： javascriptservice-workerprogressive-web-appsservice-worker-events

解决方案

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

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

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

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

推荐阅读