Question

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

Answer 1

我现在已经解决了这个问题，但我的解决方案似乎很奇怪，所以我仍然接受其他更“正常”的方法。

基本上，使用标记创建的新通知对象在当前已经可见的通知已具有相同标记时，原始通知将被删除。因此，通过创建具有相同标记的新通知对象并立即将其删除，我可以“删除”旧通知。

查看通知的链接

<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中，然后将其检索并关闭。

e.g。

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

您可以对通知选项进行字符串化，然后使用标记作为存储键将其保存到会话（或本地）存储中。然后，您可以使用存储的通知选项重新创建/替换它，然后调用close。

创建通知：

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通知对象

3 个答案: