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!
Post
Replies
Boosts
Views
Activity
I am currently facing an issue with PWA (Progressive Web App) push notifications on iOS and would greatly appreciate your assistance in resolving it.
The problem I am experiencing is that when attempting to open a specific link from the notificationclick method using clients.openWindow('/messages'), the expected redirection to the "messages" page does not occur. Instead, the PWA opens without navigating to the desired destination. I want to emphasize that this issue is unique to iOS devices.
If you have encountered a similar issue or have any suggestions on how to resolve it, please share your thoughts.
Thank you in advance for your support and valuable suggestions.