浏览器通知：未显示

Question

我似乎按照 Google Labs 的建议创建serviceWorker并编写了代码pushing notifications，但它似乎没有出现。来自服务器的推送事件似乎确实到达了浏览器，但是该showNotification功能被忽略了。

// in sw.js
self.addEventListener('push', function(event) {
 console.log('Push Received'); // this shows up
 event.waitUntil(self.registration.showNotification('Hello World'));
 // tried  self.registration.showNotification('Hello World') but still does not show up
});

进一步检查showNotification我是否已将以下内容放入main.js.

//in main.js
console.log(Notification.permission) // shows granted
if (Notification.permission == 'granted') {
 console.log('will show notification') // this gets logged
 navigator.serviceWorker.getRegistration().then(function(reg) {
   Console.log('reached here'); // this too gets logged
   reg.showNotification('Hello world!');
 });

最后我遇到了这个网站，有些人用来测试

https://gauntface.github.io/simple-push-demo/

也

https://web-push-book.gauntface.com/demos/notification-examples/

允许来自该站点的通知后，我发现使用屏幕或给定的 curl 命令没有出现任何通知。

我在 Chrome 和 Firefox 中都尝试过，结果是一样的。我在 Mac OS 10.13.6 上使用 Chrome 68.x 和 Firefox 61.x

我发现我使用的网站在 Chrome 设置（高级部分）中启用了通知。即使单击secure地址栏的一部分，也会显示通知已设置为allow。我还缺少其他一些设置吗？谢谢

Answer 1

检查MacOSnotifications settings -> google chrome -> allow notification

注意：仅适用于 Macbook 用户

Answer 2

这是一个如此愚蠢的错误。Mac OS X 有一个通知设置（我认为是默认设置）设置为“请勿打扰”。禁用显示推送通知。认为其他人，比如我，可能没有意识到这一点应该知道。

Answer 3

针对 Windows 10 桌面用户的一些额外建议：

• 不是-browser-通知-所造成的通知，self.registration.showNotification将不会在浏览器中显示为你所期望的。这些通知显示在 Windows 操作中心。

• Focus Assist - Windows 中有一个“Focus Assist”设置（类似于上面提到的 Apple 设置）决定操作中心的通知是静音还是导致吐司。它没有提到行动中心。

• 不止一种类型的“通知”只是为了混淆视听，Windows 的“通知”区域是一个不同但相关的功能。操作中心在任务栏通知区域中有一个图标。您可以在此处阅读更多内容。

• 双显示器- 如果您有多个显示器，您只会在主显示器的任务栏上看到操作中心图标。此外，您只会在主监视器上看到操作中心 Toast。

• 现有通知抑制 toast - 如果您站点的域已在操作中心中列出，您将不会看到新消息的额外 toast。但是，您仍会在操作中心看到您的站点创建的项目。清除该项目，您的下一个通知将导致祝酒。