Question

目前我正在为我们的项目开发Web推送通知服务。我面临的问题是我的谷歌浏览器服务工作人员收到推送信号，但不会将其显示为通知，尽管我能够将数据记录到开发控制台。我在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 v64的设备在Chrome上进行了测试，同时mines是v65.0.3325.162这两款设备都在Mac OS High Sierra 10.13.3上运行

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

Answer 1

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

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

查看此答案：https://stackoverflow.com/a/47379794/2292766

Answer 2

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

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

2 个答案: