时间戳

首页 > 解决方案 > 如何组合两个服务人员？

javascript - 如何组合两个服务人员？

问题描述

我的应用程序中有两个服务人员。

第一个由 create-react-app 通过工作箱自动生成，负责缓存静态构建资产，例如编译后的 javascript 和 css 文件。

第二个是我手动创建的，负责在用户在应用程序中收到新消息时发送推送通知。

问题是这两个都需要访问根范围，而我最近发现两个服务人员不能共享一个范围。

我该如何调和这个？第二个服务工作者（用于推送通知）仅在用户单击以允许应用程序内的推送通知时注册，如下所示：

function subscribeUserToPush(cb) {
  if ('Notification' in window && navigator.serviceWorker) {
    return navigator.serviceWorker.register('/sw-notifications.js').then(function(registration) {
      let subscribeOptions = {
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array('the-code-qc=')
      };

      return registration.pushManager.subscribe(subscribeOptions);
    }).then(cb);
  }
}

除非它们在根范围内，否则两者都不起作用。当限制只有一个服务人员可以使用每个范围时，我怎样才能让它们都工作？

标签： javascriptgoogle-chromecreate-react-appservice-worker

解决方案

我建议使用create-react-appv4以及cra-template-pwa.

这将为您提供一个基于 Workbox 的服务工作者，可以使用其他逻辑完全自定义，例如您的推送通知代码。

不幸的是，早期版本c-r-a在这方面是不可定制的。

推荐阅读