网络推送通知未在 Chrome 中显示

Posted 2023-02-24

【中文标题】网络推送通知未在 Chrome 中显示

【英文标题】：Web push notifications not showing in Chrome

【发布时间】：2018-03-22 11:49:35

【问题描述】：

目前我正在为我们的项目开发网络推送通知服务。我面临的问题是我在 Google Chrome 中的服务人员收到推送信号，但不会将其显示为通知，尽管我能够将数据记录到开发控制台。我在 Firefox 和其他设备的 Chrome 上尝试过它，它确实有效。我试图恢复 chrome 设置，但没有帮助。这是我的服务人员代码：

'use strict';

self.addEventListener('push', function(event) 
console.log('[Service Worker] Push Received.');
console.log(`[Service Worker] Push had this data: "$event.data.text()"`);

var payloadJson = JSON.parse(event.data.text());

const title = payloadJson.title;
const options = 
    body: payloadJson.message,
    icon: 'img/img.png',
    badge: 'img/img2.png'
;

event.waitUntil(self.registration.showNotification(title, options));
);

推送服务工作者按预期记录消息后： Dev tools console log

正如我所提到的，我在 Chrome 上使用另一台具有 Chrome v64 的设备对其进行了测试，而我的设备是 v65.0.3325.162 两台设备都在 Mac OS High Sierra 10.13.3 上运行

编辑： 所以我发现了一些奇怪的行为，在完全删除带有所有缓存文件的 chrome 并重新安装它之后，我能够让它工作，但现在的问题是，如果我等到通知消失，下次就不会显示了。在我点击关闭通知之前一切正常。

【问题讨论】：

你找到解决办法了吗？

【参考方案1】：

我发现如果showNotification() 的options 参数无效，即icon 或image 字段中指定的文件不存在，则方法调用会静默解决而不引发错误或任何事情。这可能就是您看到push 事件进入但没有看到通知本身的原因。不过，我不确定与您在重新安装服务人员后解释的行为有什么联系。

【参考方案2】：

要发送通知，有效负载必须使用notification key：

var payload = 
    notification: 
        title: 'My Title',
        body : 'TEST'
    
;

看到这个答案：https://***.com/a/47379794/2292766