服务人员推送通知

Question

我希望在后台同步索引的数据库以进行脱机访问。我想在应用程序在线时执行此操作，并使其在用户甚至不知道它正在运行的后台运行

我查看了与服务人员的backgroundSync，但这似乎是供离线使用的。

我真正想要的是浏览器中的cron任务，因此我可以将数据从远程服务器同步到本地浏览器内部数据库

Answer 1

出于您的目的，您可能需要Webworker而不是Service Worker。

虽然服务工作者可以充当连接的代理，但网络工作者可以更加通用。

https://www.quora.com/Whats-the-difference-between-service-workers-and-web-workers-in-JavaScript

与浏览器对象进行交互有一定的局限性，但允许http连接和索引数据库。

在开发过程中要特别注意浏览器的缓存：即使cltr + F5也不会重新加载网络工作者代码。

Force reload/prevent cache of Web Workers

Answer 2

我相信您要使用的是渐进式Web应用程序（PWA）。

要建立在Claudio's answer上，最好由网络工作者完成后台提取。 Web worker通常是无状态的，您需要调整项目以记下最后加载的数据。但是，使用History API和（延迟）通过JavaScript加载其他页面内容意味着用户不必退出页面。

服务工作者可以监视您的应用程序处于联机状态还是脱机状态，并且可以调用方法来暂停或继续下载到索引数据库中。

作为旁注，建议仅加载用户所需的内容，因为过多的后台加载可能会激怒某些用户。

进一步阅读。

Mozilla's PWA Documentation
从Mozilla

Answer 3

服务人员推送通知

基于对cron的引用，听起来好像您想在远程客户端不一定要访问您的站点时对其进行同步。不管客户端可能打开了多少选项卡，服务工作者都是在〜1上下文中运行操作的正确答案，更具体地讲，如果客户端当时未向原始站点打开任何选项卡，则必须使用带有推送通知的服务工作者同步应该发生。

用于设置网络推送通知的资源：

有许多设置推送通知的指南，即：

https://developers.google.com/web/fundamentals/codelabs/push-notifications/

链接到测试推送服务，例如：

https://web-push-codelab.glitch.me

要在配置自己的服务器发送推送之前测试发送推送。

一旦您的测试服务人员获得基本的推送通知，就可以修改服务人员的推送处理程序以回调您的站点并进行必要的数据库同步。

通过推送触发同步到IndexedDB的示例

这是几年前的pouchdb example，用于显示pouchdb可以在推送处理程序中将其插件用于http和IndexedDB：

 self.addEventListener('push', (event) => {
  if (event.data) {
    let pushData = event.data.json();
    if (pushData.type === 'couchDBChange') {
      logDebug(`Got couchDBChange pushed, attempting to sync to: ${pushData.seq}`);
      event.waitUntil(
        remoteSync(pushData.seq).then((resp) => {
          logDebug(`Response from sync ${JSON.stringify(resp, null, 2)}`);
        })
      );
    } else {
      logDebug('Unknown push event has data and here it is: ', pushData);
    }
  }
});

这里：

服务工作者内部的Pouchdb在推送本身中仅收到对同步点的引用。
它现在具有一个后台浏览器上下文，该上下文带有注册服务工作者的服务器的来源。
因此，它可以使用其http sync wrapper来联系原始服务器通过http提供的数据库。
这用于同步其内容，这些内容通过its wrapper for IndexedDB

所以：

只要客户端同意接受推送并且具有能够与互联网连接的浏览器，服务人员就可以唤醒推送并通过http与服务器联系以同步到引用，以更新IndexedDB实现。
不同意推送但具有服务人员的客户端也可以在选项卡使用消息或选定的URL来访问站点以表示缓存的同步结果时，在服务人员上集中/后台同步操作。（对于单个选项卡SPA访问者，就背景而言，性能优势类似于web workers DB performance），但是将推送，消息和从原始位置获取消息都集中在一个上下文中，然后可以提供同步以防止重复工作。

Safari浏览器似乎已修复了其IndexedDB in service workers bug，但某些浏览器可能仍然不太可靠或存在一些不幸的情况。（例如，对数据库配额的达到情况应进行仔细测试，因为在意外情况下达到配额时可能会导致问题。）

仍然，这是使多个浏览器回叫并与服务器执行同步而无需为每个供应商分别构建自定义扩展名等的唯一可靠方法。

Answer 4

也许您尝试使用socket（PHP）和setTimeout（JS）

让我向您解释：

进入页面时，它使用indexDB，同时每30秒启动一个setTimeout，例如，并尝试与套接字通信。如果此操作成功，则网页将与indexDB同步。

我不知道你是否了解我。

我的英语很不好。对不起。

Answer 5

我看着与服务人员的backgroundSync，但这似乎是供离线使用。

不，它不仅可以离线使用！还可以回答有关PWA和服务人员的问题！

您所需要的解决方案：

您可以使用navigator.onLine来检查互联网连接

window.addEventListener('offline', function() {
    alert('You have lost internet access!');
});

如果用户失去互联网连接，他们会看到警报。接下来，我们将添加一个事件侦听器，以监视用户重新联机。

window.addEventListener('online', function() {
    if(!navigator.serviceWorker && !window.SyncManager) {
        fetchData().then(function(response) {
            if(response.length > 0) {
                return sendData();
            }
        });
    }
});

良好的检测模式

if(registration.sync) {
    registration.sync.register('example-sync')
    .catch(function(err) {
        return err;
    })
} else {
    if(navigator.onLine) {
        requestSync();
    } else {
        alert("You are offline! When your internet returns, we'll finish up your request.");
    }
}

注意：也许您需要限制离线状态下的应用程序活动

我正在尝试使用下面的获取API发送（推送到数据库）数据，但是在这里也可以使用HTML5 Apex或Socket或CacheAPI之类的东西。

requestSync() {
    navigator.serviceWorker.ready.then(swRegistration => swRegistration.sync.register('todo_updated'));
  }

Web浏览器在后台联机时执行同步操作

5 个答案:

服务人员推送通知

用于设置网络推送通知的资源：

通过推送触发同步到IndexedDB的示例