是否可以在自定义服务工作者和 React 组件之间传递数据？

Question

我有一个 create-react-app，我在 public 文件夹中创建了一个自定义服务工作者。在 src 中，我有默认的 serviceWorker.js 文件。在自定义服务工作者文件的 public 文件夹中，我添加了一个推送事件监听器，如下所示：

 self.addEventListener("push", function (event) {

  const someData= event.data.text();
  const title = "Test";
  const options = {
    body: someData,
    icon: "./someIcon.png",
    badge: "./someIcon.png",
  };
    event.waitUntil(self.registration.showNotification(title, options));
});

问题是，在显示此通知之前，我需要对从事件中接收到的数据应用一些转换，为此我需要在某些 React 组件中使用此数据，在那里进行转换，然后执行此操作：event.waitUntil(self.registration.showNotification(title, options)); 将转换应用于我的数据，以便用户最终将该数据作为通知获取。有没有可能实现这样的目标？

Answer 1

这实际上不可能实现，因为您无法知道在调用 push 事件处理程序时是否会为您的来源打开网页。您的服务工作者可能会在任何时间点被从您的推送通知服务器收到的 push 事件唤醒，并且不能保证您的 Web 应用程序也会打开。

正因为如此，我尽量不去实现一些使用 postMessage() 在 service worker 和客户端页面（如果它是打开的）之间有条件地交谈的东西，因为那是代码这只会在某些时候起作用。

相反，您应该实现所有需要的代码，以便在 Service Worker 本身内部显示通知。

是否可以在自定义服务工作者和 React 组件之间传递数据？

Is it possible to pass data between custom service worker and React components?

reactjs

service-worker