浏览器通知：未显示答案

【问题标题】：Browser Notification: not showing up浏览器通知：未显示
【发布时间】：2018-08-18 10:49:15
【问题描述】：

我似乎按照 Google 实验室建议的代码创建 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。我还缺少其他一些设置吗？谢谢

【问题讨论】：

标签： push-notification notifications progressive-web-apps

【解决方案1】：

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

【讨论】：

我刚刚在这上面浪费了一个小时。如果没有这个答案，它会更多。谢谢！

【解决方案2】：

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

不是 -browser- 通知 - 由self.registration.showNotification 引起的通知将不会如您预期的那样显示在浏览器中。这些通知显示在 Windows 操作中心。
Focus Assist - Windows 中有一个“Focus Assist”设置（类似于上面提到的 Apple 设置）确定发送到操作中心的通知是静默还是触发.它没有提到行动中心。
不止一种类型的“通知” 只是为了混淆，Windows 的“通知”区域是一个不同但相关的功能。操作中心在任务栏通知区域中有一个图标。你可以read more here。
双显示器 - 如果您有多个显示器，您只会在主显示器的任务栏上看到操作中心图标。此外，您只会在主监视器上看到操作中心 toast。
现有通知禁止 Toasts - 如果您网站的域已在操作中心中列出，您将不会看到新消息的额外 Toast。但是，您仍会在操作中心看到您的站点创建的项目。清除该项目，您的下一个通知将导致祝酒。

【讨论】：

我在使用showNotification方法，我看到浏览器中出现了很多应用通知，那么如果他们不使用这个他们使用什么？
这个！我必须右键单击屏幕的右下角并关闭对焦辅助。我所有的通知都被默默地存储在操作中心

【解决方案3】：

检查 MacOS notifications settings -> google chrome -> allow notification

注意：仅适用于 Macbook 用户

【讨论】：