Hide JS Notification Object By Tag Name

Question

I'm using the notification API for my project to show browser notifications where each notification has a unique tag (ID), but I can't seem to find a way to close or hide the notification by the tag name, without calling the close function on the object, since it might be closed with other pages than where it was originated. Is this sort of thing possible?

Answer 1

You could save the notifications in localStorage and then retrieve it and close.

e.g.

// on create
var n = new Notification('Notification Title', {
        tag: _this.attr('data-notification-id')
    });
window.localStorage.setItem('data-notification-id', n);

and

// then later
var n = window.localStorage.getItem('data-notification-id');
n.close();

Answer 2

I've solved this now, but my solutions seems odd, so I'm still accepting other answers that follow a more "normal" approach.

Basically, a new notification object that is created with a tag while a notification that is currently already visible already has the same tag, the original notification is removed. So by creating a new notification object with the same tag and immediately removing it, I can "remove" the old notifications.

The link to view the notification

<a href="/some/url" data-notification-id="1234">View this notification</a>

And the jQuery

$('a[data-notification-id]').on('click', function(){
    var _this = $(this);
    var n = new Notification('Notification Title', {
        tag: _this.attr('data-notification-id')
    });
    setTimeout(n.close.bind(n), 0);
});

Answer 3

You could stringify the notification options and save to session (or local) storage using the tag as the storage key. Then you can use the stored notification options to re-create/replace it and then call close.

Create the notification:

if (("Notification" in window)) {
   if (Notification.permission === "granted") {
      var options = {
         body: sBody,
         icon: sIcon,
         title: sTitle, //used for re-create/close 
         requireInteraction: true,
         tag: sTag
      }
      var n = new Notification(sTitle, options);
      n.addEventListener("click", function (event) {
         this.close();
         sessionStorage.removeItem('notification-' + sTag);
      }, false);
      sessionStorage.setItem('notification-' + sTag, JSON.stringify(options));
   }
}

Clear the notification:

function notificationClear(sTag) {
    var options = JSON.parse(sessionStorage.getItem('notification-' + sTag));
    if (options) {
        options.requireInteraction = false;
        if (("Notification" in window)) {
            if (Notification.permission === "granted") {
                var n = new Notification(options.title, options);
                setTimeout(function () {
                    n.close();
                    sessionStorage.removeItem('notification-' + sTag);
                }, 500); //can't close it immediately, so setTimeout is used
            }
        }
    }       
}