通过标签名称隐藏 JS 通知对象

Question

我正在为我的项目使用通知 API 来显示浏览器通知，其中每个通知都有一个唯一的标签 (ID)，但我似乎找不到关闭或隐藏通知的方法通过标签名称，而不调用对象上的关闭函数，因为它可能会被其他页面而不是它的来源页面关闭。这种事情可能吗？

Answer 1

我现在已经解决了这个问题，但我的解决方案看起来很奇怪，所以我仍然接受遵循更 "normal" 方法的其他答案。

基本上，创建一个带有标签的新通知对象，而当前已经可见的通知已经具有相同的标签，原始通知将被删除。因此，通过创建一个具有相同标签的新通知对象并立即删除它，我可以 "remove" 旧通知。

link查看通知

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

和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 2

您可以将通知保存在 localStorage 中，然后检索并关闭。

例如

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

和

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

Answer 3

您可以将通知选项字符串化并使用标签作为存储键保存到会话（或本地）存储。然后你可以使用存储的通知选项 re-create/replace 它然后调用关闭。

创建通知：

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

清除通知：

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

通过标签名称隐藏 JS 通知对象

Hide JS Notification Object By Tag Name

javascript

notifications

web-notifications