javascript - 网络推送通知未显示

Question

我注册了一个服务人员，并试图在浏览器中测试一个网络通知。 Chrome(和 Firefox)声称 service worker 已成功注册。

在加载 React 应用程序时，我已授予接收通知的权限。

在我的 sw.js , 我正在收听 push事件，并尝试从 Chrome 应用程序选项卡发送示例推送消息，如上面的屏幕截图所示。

self.addEventListener("push", receivePushNotification);

点击 Push 时在 Chrome 应用程序选项卡中， push事件触发，调用 receivePushNotification .但是，当我尝试在浏览器中显示通知时，没有任何 react ，也没有报告错误。

function receivePushNotification(event) {
  // This prints "Test push message from DevTools."
  console.log("[Service Worker] Push Received.", event.data.text());

  var options = {
    body: "This notification was generated from a push!"
  };

/*****
  I would expect the following line to display a notification, since I've already 
  granted permission to allow for notifications. Yet, nothing happens and there is 
  no error in the console.
*****/

  event.waitUntil(self.registration.showNotification("Hello world!", options));
}

Answer 1

您似乎在单独定义函数/未将其定义为异步函数方面走得太远了。您也没有将事件传递给函数调用。
如果你这样重写它会发生什么？

self.addEventListener("push", function(event) {
  console.log("[Service Worker] Push Received.", event.data.text());
  var options = {
    body: "This notification was generated from a push!"
  };
  event.waitUntil(self.registration.showNotification("Hello world!", options));
});