时间戳

首页 > 解决方案 > 无法在 React 脚本中注册 Service Worker

reactjs - 无法在 React 脚本中注册 Service Worker

问题描述

我正在使用 ReactJS 制作一个基本的 Web 应用程序来创建推送通知。我想让用户可以通过单击按钮手动注册服务人员。但是什么也没发生（控制台中没有成功的消息）。我在某个地方犯了错误吗？

在标准的 js 文件中，注册服务工作者的代码有效（虽然没有按钮），但在反应文件中无效。

注册服务工作者的代码： 在此处输入图像描述

和按钮上的事件监听器： 在此处输入图像描述

提前致谢 ！

标签： reactjsservice-worker

解决方案

我看到的主要问题是您将 EventListener 附加到window它将在“加载”时执行。由于您可以单击按钮，因此很可能已经触发了此事件，因此未加载 SW。尝试删除事件处理程序部分以直接调用注册函数。然后它看起来像这样：

function registerSW() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js')
    //...
  }
}

我看到的另一个问题是您尝试通过直接分配来设置状态。在反应中，您不应该像这样访问状态，而应该this.setState像这样调用：

// ...
.then(swReg => {
  console.log('SW registered');
  this.setState({ swReg: swReg });
})
// ...

推荐阅读