I'm having a similar problem. I'm implementing Web Push for a web app, and I've been testing it on Safari 16.4 for macOS, and as a Home Screen web app on iOS 16.4.
I've been following the example code from the Meet Web Push for Safari video from WWDC22.
In the video, the engineer Bray Eidson talks about a use case where the webkit.org site is notifying a user about a new blog post, and clicking on the notification takes the user to that specific post.
I have a similar use case, where I want to notify users about new content, and I would like to be able to pass specific URLs into the notification so that the user is taken to that URL when they click on the notification.
The example push event listener contains a field actions, which is a list of objects, each with action and title strings:
window.addEventListener('push', (event) => {
let pushMessageJSON = event.data.json();
// Our server puts everything needed to show the notification
// in our JSON data.
// This triggers the notification, which should happen ASAP when push is received.
event.waitUntil(self.registration.showNotification(pushMessageJSON.title, {
body: pushMessageJSON.body,
tag: pushMessageJSON.tag,
actions: [{
action: pushMessageJSON.actionURL,
title: pushMessageJSON.actionTitle,
}]
}));
})
Then, in the notificationclick event listener, the action field is used as a URL to take the user to a specific page in the web app:
window.addEventListener('notificationClick', async function(event) {
if (!event.action)
return;
// This always opens a new browser tab,
// even if the URL happens to already be open in a tab.
clients.openWindow(event.action);
});
When I test, notifications are successfully delivered on macOS and iOS, but the URL data isn't making it all the way through to the notificationclick event.
As the OP saw, in the lower-right-hand corner of the notification instead of a drop-down of different user actions, there's just a button called "View". If I leave the example notificationclick handler as-is, nothing happens whether I click on the "View" button, or in the body of the notification.
To see what fields are available on the notificationclick event, I converted the event to JSON and logged it, using console.log(JSON.stringify(event));. Here's the output:
{
"isTrusted": true
}
None of the data from the notification appears to be passed into this event. MDN says that the notificationclick event can contain the properties action, which returns the string ID of the notification button the user clicked, and notification, which is a Notification object representing the notification that the user clicked: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/notificationclick_event
Does it seem like I'm doing something wrong, or is this a known limitation of the way Web Push is set up in Safari? The WWDC video indicates that passing URLs is possible, but it doesn't seem to be working.
