如何设置浏览器创建的桌面通知的关闭超时时间?

How do I properly set a close timeout on desktop notifications created by the browser

本文关键字：通知 桌面 超时 时间 创建 何设置 设置 浏览器      更新时间：2023-09-26

我正在使用标准的通知API为我的web应用程序处理桌面通知。出于我最初开发的目的，我使用的是Google Chrome。在Chrome中，当页面创建Notification对象时，通知将永远留在桌面上。

Notification原型确实有一个.close()方法，允许关闭先前调用的通知。我认为，结合setTimeout功能，这将使在几秒钟后自动取消通知变得轻而易举。我甚至找到了一个向导来证实我的想法。

然而，似乎我无法使通知的范围与setTimeout函数正常工作，并且.close()方法不能为每个创建的通知正确调用。

这是我尝试过的(我使用了一些在另一个答案中找到的代码作为起点):

按钮:

<button onclick="notifyMe()">
  Notify me! 
</button>
JavaScript: 

<script>
// request permission on page load
document.addEventListener('DOMContentLoaded', function () {
  if (Notification.permission !== "granted")
    Notification.requestPermission();
});
function notifyMe() {
  if (!Notification) {
    //alert('Desktop notifications not available in your browser. Try Chromium.'); 
    return;
  }
  if (Notification.permission !== "granted")
    Notification.requestPermission();
  else {
    var notification = new Notification('Notification');
    notification.onclick = function () {
        window.focus();
    };
    setTimeout(notification.close, 2000);
    // Result: Uncaught TypeError: Illegal invocation
    // also tried.....
    // setTimeout(notification.close(), 2000);
    // Result: notification stays open forever
    // setTimeout('notification.close', 2000);
    // Result: ReferenceError: notification is not defined
  }
}
</script>

如果有经验的人能帮助我，我将不胜感激。

当我将其包装成function() {}时，它可以工作:

setTimeout(function() { notification.close() }, 2000);

查看此提琴:https://jsfiddle.net/drnz12n8/2/

相关文章：