Reputation: 81
I'm currently working on a Progressive Web App (PWA) with push notification functionality, and I'm facing an issue specifically on iOS. I have implemented a service worker that listens for the 'notificationclick' event, which is fired when a user clicks on a notification. However, on iOS PWAs, this event doesn't seem to be triggered, and I'm unable to handle the notification click. Also onMessage event from firebase/messaging isn't logging anything, while app is activated. this problem exists only on iOS. here is the code snippets i wrote
self.addEventListener('notificationclick', (event) => { // firebase-messaging-sw.js
debugger;
console.log(event, 'event');
const notification = event?.notification?.data?.['FCM_MSG'];
event.notification.close();
event.waitUntil(
clients
.matchAll({
type: 'window',
})
.then(() => {
return clients.openWindow(onNotificationAction(notification['data']));
}),
);
});
onMessage(messaging, (payload) => { // app.component.ts
console.log('Message received. ', payload);
});
I would appreciate any guidance or suggestions. Thank you in advance!
Tried to listen all the events on serviceWorker, looks like it only fires install and activated events when notifications are registered.
Upvotes: 2
Views: 1230
Reputation: 81
Looks like it works, just the webpage should be hosted on an HTTPS environment.
this is payload i send
{ "to": "tokenId", "notification": { "title": "Background Message Title", "body": "Background message body" }, "data": { "badge": 20, "notificationType": "Test.Type", "silent": false, "title": "Background Message Title", "body": "Background message body" } }
I send all the necessary info to data and i generate link based on that data in notificationClick method, here is the code snippet
self.addEventListener('notificationclick', async (event) => {
const notification = event?.notification?.data?.FCM_MSG;
event.notification.close();
event.waitUntil(
clients.matchAll({ type: 'window', includeUncontrolled: true, userVisibleOnly: true }).then(function (clientList) {
// Check if the PWA is already open and focus on it
for (let i = 0; i < clientList.length; i++) {
let client = clientList[i];
if ('url' in client && client.url.includes('generate or get URL from data')) && 'focus' in client)
return client.focus();
}
// Open a new window with the provided URL
if (clients.openWindow) {
clients.openWindow('generate or get URL from data');
}
}),
);
});
Upvotes: 0