英文:
Didn't receive message in messaging.onMessage event when loosing the focus firebase with react
问题
SW 文件中的代码用于处理后台消息，它在 messaging.onBackgroundMessage 事件中接收消息。你想知道如何将从 SW 文件中接收的数据传递到 Notification 文件以进行显示。
在 Notification 文件中，你已经使用 messaging.onMessage 事件监听消息，但似乎你没有在事件处理程序中使用从 SW 文件传递的数据。要将数据从 SW 文件传递到 Notification 文件，你可以将数据作为参数传递给 showNotification 函数，然后在 Notification 文件中使用这些参数来显示通知。
以下是一个示例：
// SW File
const messaging = firebase.messaging();
messaging.onBackgroundMessage((payload) => {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
const notificationTitle = 'new notification';
const notificationOptions = {
body: payload.body, // 传递消息内容
icon: payload.icon, // 传递图标
};
return self.registration.showNotification(notificationTitle, notificationOptions);
});
// Notification file:
messaging?.onMessage((payload) => {
console.log(payload, 'payload');
// 这里你可以访问 payload 中的数据，例如 payload.body 和 payload.icon
// 使用这些数据来显示通知
});
这样，你就可以在 Notification 文件中使用从 SW 文件传递的数据来显示通知。
英文:
When I lose focus I didn't receive message in messaging.onMessage event however I receive the message in event messaging.onBackgroundMessage in SW file which is included in the public folder.
The question here is how can I pass the data from SW file to Notification file to display it
SW File:
const messaging = firebase.messaging();
messaging.onBackgroundMessage((payload) => {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
const notificationTitle = 'new notification';
const notificationOptions = {
body: '',
icon: '',
};
return self.registration.showNotification(notificationTitle,
notificationOptions);
});
Notification file:
messaging?.onMessage((payload) => {
console.log(payload, 'payload');
});
答案1
得分: 0
我遇到了同样的问题，我通过从onBackgroundMessage传递消息到客户端并在客户端代码中监听来自Service Worker的消息来解决它。
以下是我所做的：
messaging.onBackgroundMessage(messaging, payload => {
self.clients
.matchAll({
type: 'window',
includeUncontrolled: true,
})
.then(all =>
all.forEach(client => {
client.postMessage(payload);
})
);
...
在客户端代码中：
navigator.serviceWorker.addEventListener('message', function handler(event) {
console.log(event)
});
英文:
I had the same issue and I fixed it by passing message from onBackgroundMessage to the client and in client code I listened to the message from service worker
here is what I did :
messaging.onBackgroundMessage(messaging, payload => {
self.clients
.matchAll({
type: 'window',
includeUncontrolled: true,
})
.then(all =>
all.forEach(client => {
client.postMessage(payload);
})
);
...
and in client code :
navigator.serviceWorker.addEventListener('message', function handler(event) {
console.log(event)
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论