Блог

В моем приложении есть два сервисных работника.

Первый автоматически генерируется create-react-app через workbox и отвечает за кэширование статических ресурсов сборки, таких как скомпилированные файлы javascript и css.

Второй был создан мной вручную и отвечает за рассылку push-уведомлений, когда пользователь получает новое сообщение в приложении.

Проблема в том, что для обоих из них требуется доступ к корневой области, и я только недавно узнал, что два работника службы не могут совместно использовать область.

Как мне это согласовать? Второй работник службы (для push-уведомлений) регистрируется только тогда, когда пользователь нажимает, чтобы разрешить push-уведомления в приложении, например:

 function subscribeUserToPush(cb) {
  if ('Notification' in window amp;amp; 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);
  }
}
  

Оба не работают, если они не находятся в корневой области. Как я могу заставить их обоих работать, когда существует ограничение, что только один работник службы может использовать каждую область?

Я бы рекомендовал использовать create-react-app v4 вместе с cra-template-pwa .

Это даст вам service worker на основе Workbox, который можно полностью настроить с помощью дополнительной логики, например, кода push-уведомления.

Более ранние версии c-r-a , к сожалению, не настраиваются в этом отношении.