推送通知在 Firefox 中有效，但在 React 应用程序中的 Chrome 中无效

Question

I am working on implementing push notifications for my React app. It is working fine in Firefox - ie the notification popup appears, but the notification popups do not appear in Chrome. Here is my code that handles receiving a notification:

function receivePushNotification(event) {
  console.log("====> Service worker received notification"); // This logs out in Chrome and Firefox
  event.waitUntil(self.registration.showNotification("Sample title", {}));
}

The console.log in the function prints fine so I know for a fact that the notification made it into the browser. I am not sure why event.waitUntil(self.registration.showNotification("Sample title", {})); does not show the notification in Chrome.

After looking at similar SO posts, I have tried the following:

• Deployed my server that actually sends the notification behind a https domain
• Made sure that the public key is correct
• Made sure that Chrome allows notifications:

I am not sure what else I can do or check. Does anyone have any ideas on what else I can do or check? Any help would be greatly appreciated!

Answer 1

OK so it appears that in addition to enabling notifications in the browser, I also had to enable notifications on my computer (mac) itself:

System Preferences > Google Chrome > ALLOW NOTIFICATIONS FROM GOGOLE CHROME :