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

Posted 2023-02-22

【中文标题】如何正确设置浏览器创建的桌面通知的关闭超时

【英文标题】：How do I properly set a close timeout on desktop notifications created by the browser

【发布时间】：2015-10-31 10:00:24

【问题描述】：

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

Notification 原型确实有一个.close() 方法，该方法允许关闭先前调用的通知。我认为这与setTimeout 功能相结合可以在几秒钟后自动关闭通知。我什至找到了a guide confirming我的想法。

但是，我似乎无法让通知的范围与setTimeout 函数一起正常工作，并且每个创建的通知都没有正确调用.close() 方法。

这是我尝试过的（我使用了another answer 中的一些代码作为起点）：

按钮：

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

如果有这方面经验的人可以帮助我，我将不胜感激。

【参考方案1】：

当我将它包装成 function() 时，它可以工作：

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

看到这个小提琴：https://jsfiddle.net/drnz12n8/2/