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?

are you referring to closing a notification created by another window in the browser itself? Im a bit confused with the sentence *"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"* — ug_, Jun 18 '15 at 03:35
The notification API here http://www.w3.org/TR/notifications/, and what I mean by that is I know I can create a new notification object and then call the close method on the object, but the action I want to close the notification might happen on a page where the object wasn't created, so the only thing about it would be to close the notification by tag name, but I can't seem to find the documentation anywhere for that — Brian Leishman, Jun 18 '15 at 13:29

score 2 · Answer 1 · answered Jun 18 '15 at 16:22

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);
});

score 2 · Accepted Answer · answered Jun 23 '15 at 11:27

2

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();

answered Jun 23 '15 at 11:27

Scott Anderson

1,363
1
10
19

I was not aware that a thing like this existed, and I'm stunned that it's super compatible (of course not in IE 7, but I couldn't care less about IE 7). Thanks! – Brian Leishman Jun 23 '15 at 13:09
This does not work in current browsers. window.localStorage.setItem allows you to set a name and value pair of DOMString types, not a Notifcation object. – DrewF Dec 03 '20 at 22:22

score 0 · Answer 3 · answered Dec 04 '20 at 02:16

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
            }
        }
    }       
}

Hide JS Notification Object By Tag Name

3 Answers3