消息可以在后台很好地接收，但前台的人不会收到消息，只会在后台显示"此网站已更新"。
我使用了fcm文档中的代码示例。
Index.html(跳过初始化脚本(
messaging.onMessage(function(payload) {
console.log('Message received. ', payload);
notificationTitle = payload.data.title;
notificationOptions = {
body: payload.data.body,
icon: payload.data.icon
};
var notification = new Notification(notificationTitle,notificationOptions); });
sw.js
messaging.setBackgroundMessageHandler(function(payload) {
const notificationTitle = payload.data.title;
const notificationOptions = {
body: payload.data.body,
icon: payload.data.icon,
badge: payload.data.badge
};
return self.registration.showNotification(notificationTitle,
notificationOptions);
});
有人能帮忙吗？THX！
如果您想在应用程序中显示来自服务工作者的消息，请使用以下命令。
在你的sw.js中，这就是你与用户/应用程序实例对话的方式：
self.clients.matchAll().then(function(clients) {
clients.forEach(function(client) {
client.postMessage({
msg: "cached: " + event.request.url
});
});
});
然后在index.html脚本中，这就是您处理消息的方式：
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
console.log('ServiceWorker registration failed: ', err);
});
});
}
navigator.serviceWorker.addEventListener('message', function(event) {
console.log("service worker " + event.data.msg);
//you can do whatever you want now that you have this data in script.
});
这个主题很老，但我将把我的解决方案留在这里，以防有人遇到这个问题。
这个问题的解释可以在这篇文章中找到https://developers.google.com/web/fundamentals/push-notifications/handling-messages#wait_until
简而言之，推送事件不应该在CCD_ 1被解析。
以官方fcm文档提供的方式使用onBackgroundMessage揭示了同样的问题。为了理解为什么我们可以查看sw-listeners.ts中onPush函数的声明，以及在register.ts文件中如何实际调用该函数。您可以看到onPush被传递给e.waitUntil，这意味着推送事件在onPush:返回promise之前不会得到解决
self.addEventListener('push', e => {
e.waitUntil(onPush(e, messaging as MessagingService));
});
然而，当您查看onPush内部如何调用onBackgroundMessageHandler时，您会发现该调用不会返回promise或其他内容。
我找到的解决方案是这样的：
self.addEventListener('push', function (event) {
event.waitUntil(
self.clients
.matchAll({type: 'window', includeUncontrolled: true})
.then(windowClients => {
let visibleClients = windowClients.some(client => client.visibilityState === 'visible' &&
// Ignore chrome-extension clients as that matches the background pages of extensions, which
// are always considered visible for some reason.
!client.url.startsWith('chrome-extension://'));
if (!visibleClients) {
event.waitUntil(
self.registration.showNotification(data.data.title)
);
}
})
);
});
检查客户端的可见性仅提供对后台消息的处理；该检查取自库的CCD_ 9函数。