时间戳

首页 > 解决方案 > 是否可以在自定义服务工作者和 React 组件之间传递数据？

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

问题描述

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

 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));
});

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

标签： reactjsservice-worker

解决方案

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

正因为如此，我会尽量不去实现一些用于postMessage()在服务工作者和客户端页面（如果它是打开的）之间有条件地对话的东西，因为那是只在某些时候工作的代码。

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

推荐阅读