Question

我似乎正在按照Google实验室建议的代码来创建serviceWorker，并为pushing notifications编写了代码，但似乎没有出现。似乎来自服务器的push事件确实到达了浏览器，但是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

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

Answer 2

针对Windows 10桌面用户的一些其他建议：

不是-浏览器通知-由self.registration.showNotification引起的通知将不显示在浏览器中，正如您所期望的那样。这些通知将显示在Windows操作中心中。
焦点辅助-Windows中有一个“焦点辅助”设置，该设置（类似于上述的Apple设置）决定了向操作中心的通知是静音还是导致吐司。它没有提到行动中心。
不止一种类型的“通知” 只是令人困惑，Windows“通知”区域是一个不同但相关的功能。操作中心在任务栏通知区域中有一个图标。您可以read more here。
双监视器-如果您有多个监视器，则只能在主监视器的任务栏上看到“操作中心”图标。此外，您只会在主监视器上看到“操作中心”吐司。
现有通知会阻止举报-如果您的网站的域已在“操作中心”中列出，则您不会看到新消息的举报。但是，您仍然会在“操作中心”中看到您的网站创建的项目。清除该项目，您的下一个通知将导致敬酒。

Answer 3

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

注意：仅适用于 Macbook 用户

浏览器通知：未显示

3 个答案: