Does Web Push Notification Actions work on iOS 16.4 ?

I managed to get my Progressive Web App to send notifications to users via Web Push. However, it seems that the definable actions are not working. In Chrome, there is a button in the notification. If you click it, you get an overview of the available actions that the user can click. When I look at the notification on iOS, I only see the "View" action. My self-defined actions seem to be ignored and not displayed.

Also, the "notificationclick" event should be executed by the browser as soon as the notification is clicked. In the Serviceworker I listened to the event and tried to link to a specific page of the PWA.

In Chrome and Firefox this works fine. In Safari / iOS I only get to the start page of the PWA.

Are the notification actions not yet supported with WebKit 16.4 ?

Post not yet marked as solved Up vote post of PhilippBrosig Down vote post of PhilippBrosig
3.0k views

Replies

I am having the same issue. Notification actions not working, and no sound when the notification is received either.

Have raised a query to the webkit team on twitter but no response yet.

are sound, icon and badge working on your notifications?

  • Do you have any update on this? I also have the same problem with my app. I feel like push notification sound is a really important feature. It's sad that it's not working properly. I'm glad that i'm not the only one who has the problem.

  • No, Hansee……no update, as such. The basic Notifications API does not support sound, so it’s up to the browser to provide a “default” sound for notifications. Apple have decided not to make this available for web apps it seems, as the option for “Sounds” is missing from alongside banners and badges in notifications centre

  • Unfortunately, Sound, Icon and Badge do not work for me yet either.

Add a Comment

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.

I (and I assume many others) would really appreciate this feature. In the settings app, there is no option to add any sound or vibration for my testing web app. I have found no workaround for this.

Additionally, adding an on-click URL also does not work. However, at least for this issue, an easy workaround is to modify the base page of your web app.

  • With an update, it is now at least possible to use the notification tag. Since the notification actions unfortunately still do not work, I send the link to which the Progressive Web App should direct via the notification tag. In the ServiceProvider I then use the tag to open the correct page. Works so far wonderfully. However, I am eagerly waiting for the actions to work. I hope this can help you a little further.

Add a Comment

With an update, it is now at least possible to use the notification tag. Since the notification actions unfortunately still do not work, I send the link to which the Progressive Web App should direct via the notification tag. In the ServiceProvider I then use the tag to open the correct page. Works so far wonderfully. However, I am eagerly waiting for the actions to work. I hope this can help you a little further.

self.addEventListener('notificationclick', function (event) {
    return clients.openWindow(event.notification.tag); // workaround, since actions do not work currently
    event.notification.close();
})

"This message was actually considered a reply, not a comment. Therefore here for everyone again."

  • Thanks for posting this - I'm able to pass a URL in the notification.tag field like you described!

  • Tried same technique but it still opens main page, my example: self.addEventListener('notificationclick', async (event) => { const notification = event?.notification;

    return clients.openWindow(notification.tag); event.notification.close(); })

    in current scenario notification.tag is "/messages" but still opens main page of PWA. any idea?

  • Same issue here :/ any update on this?

Add a Comment

clients.openWindow(relative url) not working with me and just opens PWA, any idea guys?

Looks like it didn't work for me because I was running on localhost, after deploying to to https environment it works well there.