Cancel sent Web Push notifications - progressive-web-apps

Question

I'm sending push notifications to my website users when they (for example) receive a private message.
That notification goes to all browsers subscribed for that user. So could be desktop, mobile, work computer etc.
What I would like to do is close all the sent notifications once the user has a read a message.
So user logs in on mobile, reads the private message - at this point I want all the previously sent notifications for that PM to be closed/cancelled.
Is this possible?
Thanks in advance!
Matt

Answer 1

Yes this is possible, but not silently. For example, Chrome will replace the notification with a new one saying "This site has been updated in the background".
There are two separate APIs: the Push API which "gives web applications the ability to receive messages pushed to them from a server", and the Notification API which "is used to configure and display desktop notifications to the user".
The Notification API provides Notification.close(), which cancels the display of a notification.
You can use the Push API to trigger Notification.close(). Here's a sample which should go in your service worker:
self.addEventListener('push', async event => {
const data = event.data.json();
if (data.type === 'display_notification') {
self.registration.showNotification(data.title, data.options);
} else if (data.type === 'cancel_notification') {
const notifications = await self.registration.getNotifications({
tag: data.notificationTag
});
for (notification of notifications) {
notification.close();
}
} else {
console.warn("Unknown message type", event, data);
}
});
However! This design means that your cancel_notification message won't display a notification. This violates some browser policies, for example Chrome will display a new notification saying "This site has been updated in the background".