Javascript 通过react js（pwa）中的服务工作者推送通知

我正在和PWA的服务人员一起尝试推送通知。注册服务人员后。我添加了用于安装和激活的事件侦听器，在激活事件侦听器中添加了用于通过push manager订阅注册推送服务的逻辑，但问题是控制台中没有关于激活和安装事件的日志，而尝试测试推送chrome开发工具而不在此处工作是我的问题代码：

index.js

serviceWorker.register（）

worker.js

const publicVapidKey = "BOdud_KdO16dL40D56LbksLa6ElXFAJu-2XEdIKQUmehzomo6FES2jJ1niaUYrCobfI8U5rkqeQNjPB03mKZMvY"

export const register = () => {
  console.log('register called');
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/worker.js')
      .then((responseRegister) => {
        console.log('register object', responseRegister);
        window.registration = responseRegister;
      })
      .catch((err) => {
        console.log('error is ', err);
      })
  }
}

export const unregister = () => {
  console.log("unregister called");
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations()
      .then(function (registrations) {
        console.log('registrations', registrations);
        for (let registration of registrations) {
          registration.unregister()
        }
      }).catch(function (err) {
        console.log('Service Worker registration failed: ', err);
      });
  }
}

window.self.addEventListener('install', (event) => {
  console.log('service worker installed', event);
})

window.self.addEventListener('activate', (event) => {
  console.log('service worker activated', event);

  console.log('window', window);
  window.registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(publicVapidKey)
  }).then((subscription) => {
    console.log('subscription', subscription);
  })
    .catch((err) => {
      console.log('error in subscribing to push', err);
    });
})

window.self.addEventListener("push", e => {
  const data = e.data.json();
  console.log("Push Recieved...");
  window.registration.showNotification(
    data.title, {
    body: "Notified by Traversy Media!",
  });
});

function urlBase64ToUint8Array(base64String) {
  const padding = "=".repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/\-/g, "+")
    .replace(/_/g, "/");

  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

const publicVapidKey=“BOdud_KdO16dL40D56LbksLa6ElXFAJu-2xedikqumehzomo6fes2jjj1niauyrcobfi8u5rkqeqnjpb03mkzmvy”
导出常量寄存器=（）=>{
log（'register called'）；
if（导航器中的“serviceWorker”）{
navigator.serviceWorker.register（'/worker.js'）
.然后（（响应注册表）=>{
log（'register object'，responseRegister）；
window.registration=响应注册器；
})
.catch（（错误）=>{
log（'error is'，err）；
})
}
}
导出常量取消注册=（）=>{
log（“注销调用”）；
if（导航器中的“serviceWorker”）{
navigator.serviceWorker.getRegistrations（）
.然后（功能（注册）{
console.log（“注册”，注册）；
用于（注册登记）{
注册。注销（）
}
}).catch（函数（err）{
console.log（'服务工作者注册失败：'，错误）；
});
}
}
window.self.addEventListener（'install'，（事件）=>{
console.log（“安装了服务人员”，事件）；
})
window.self.addEventListener（'activate'，（事件）=>{
console.log（“服务工作人员已激活”，事件）；
console.log（'窗口'，窗口）；
window.registration.pushManager.subscribe({
userVisibleOnly:true，
applicationServerKey:urlBase64ToUint8Array（publicVapidKey）
})。然后（（订阅）=>{
console.log（'subscription'，subscription）；
})
.catch（（错误）=>{
log（'订阅推送时出错'，err）；
});
})
window.self.addEventListener（“推”，e=>{
const data=e.data.json（）；
控制台日志（“推送接收…”）；
window.registration.showNotification(
data.title{
正文：“由Traversy Media通知！”，
});
});
函数urlBase64ToUint8Array（base64String）{
常量padding=“=”。重复（（4-base64String.length%4）%4）；
常量base64=（base64String+填充）
.替换（/\-/g，“+”）
.替换（/_/g，“/”）；
const rawData=window.atob（base64）；
const outputArray=新的Uint8Array（rawData.length）；
for（设i=0；i

---

单击推送不会触发任何推送事件

如果有人在寻找解决方案，我发现了问题所在，我使用的是src/worker.js，而代码则为all self。将进入public/worker.js，不必是window.self，只需self即可