Hello everyone,
I've been working on implementing push notifications for the web PWA using JavaScript, and I've encountered an issue specifically with Safari on Mac and iOS devices. While my code snippet works perfectly fine in Chrome, I'm facing a problem with the clients.openWindow function. It doesn't seem to perform any actions or provide any errors.
Here's the code snippet for reference:
self.addEventListener('push', (event) => {
const notification = JSON.parse(event.data.text());
console.log(notification);
const title = notification?.notification?.title;
const body = notification?.notification?.body;
const data = notification?.data;
const options = {
body,
data,
icon: '/favicon.ico',
badge: '/favicon.ico',
vibrate: [100, 50, 100],
actions: [
{
action: onNotificationAction(notification['data']),
title: notification.notification.title,
},
],
};
event.waitUntil(self.registration.showNotification(title, options));
});
self.addEventListener('notificationclick', (event) => {
console.log(event, 'event');
const notification = event?.notification;
event.notification.close();
event.waitUntil(
clients
.matchAll({
type: 'window',
})
.then((clientList) => {
for (const client of clientList) {
if (client.url === '/' && 'focus' in client) return client.focus();
}
if (clients.openWindow) return clients.openWindow('/messages');
}),
);
});
After thorough testing, I've determined that the issue lies specifically with the clients.openWindow function. Unfortunately, I haven't been able to identify any errors or determine why it isn't functioning as expected. The goal is to open a new window or focus on an existing one when a notification is clicked.
I would greatly appreciate any assistance or insights into resolving this issue. Has anyone else encountered a similar problem with Safari and iOS? Are there any alternative approaches or workarounds that could achieve the desired functionality?
Thank you in advance for your help and suggestions!
0
2
1.4k