How to remove a web push notification

Let's say that you have sent a notification to a recipient and then you want to remove it: how can you do that?

Removing a notification automatically from a device could be useful for different reasons: for example you can revoke a wrong message, dismiss a legacy alert that is already solved or maybe synchronize the notifications on the different devices of a user.

Unfortunately it is not possible to revoke a web push notification.

The only thing that you can do is to close it from Javascript:

serviceWorkerRegistration.getNotifications({ tag: 'mynotification' }).then(function(notifications) {
  for (let i = 0; i < notifications.length; i += 1) {
    notifications[i].close();
  }
});

However your website needs to be activated in some way in order to run that Javascript code. The most obvious solution would be to send a silent push message that does exactly that: instead of displaying a notification, it activates a push event that runs the above code and closes the notifications. However this is not a viable solution because silent push is not allowed - i.e. a push message must always display a notification, otherwise the browser will display a default notification.

The only alternative, which can be useful in some cases, is to replace a notification with another one. This is simple: you just need to use the same tag and any previous notification with that tag will be replaced by the new notification.

serviceWorkerRegistration.showNotification('Example', { tag: 'mynotification' });
serviceWorkerRegistration.showNotification('This will replace example', { tag: 'mynotification' });

However this does not delete a notification, it actually replaces it with a new one.