隐藏以前的 HTML 桌面通知

Question

我目前正在使用以下代码为我的控制台生成HTML5桌面通知。

<script type="text/javascript">
$(document).ready(function() {
    $('#show_button').click(function(e) {
          e.preventDefault();
          window.webkitNotifications.requestPermission();
        }); 
    if (window.webkitNotifications.checkPermission() == 0) {
        notification = window.webkitNotifications.createNotification('favicon.ico', 'New orders!', 'You have new orders.');
        notification.show();
        setTimeout(function() {
            notification.cancel();
        }, '5000');
    }
   });
</script>

通知在 5 秒

后再次出现和消失，但是如果我在 5 秒之前单击新页面或关闭窗口，则通知不会关闭。由于页面设置为每 5 分钟刷新一次，这可能会导致出现许多通知，然后需要手动关闭每个通知。

有没有一种方法可以在 Javascript 中检查是否有任何以前的通知在等待并关闭它们，或者确保即使窗口关闭，通知也会消失？

Answer 1

根据：可靠地消除 Webkit 通知

使用 window.onunload 或 window.onbeforeunload 处理程序在页面关闭时清除干扰。但是，这不会保留三秒钟的延迟，因为通知将在页面关闭时立即关闭。

另一种选择（保留了三秒钟的延迟）是使用 createHTMLNotification（url） 从 HTML 页面创建通知。通过在通知 HTML 文档中包含类似 setTimeout（window.close， 3000） 之类的脚本，使通知页面自行关闭。在这种情况下，显然，您不需要在主页中进行 setTimeout 调用，因为它已经包含在通知中。

此代码有效：但是，在Chrome上，它仅在更改或关闭页面时有效，似乎在刷新时不起作用。这是 Chromium 维基中记录的错误，所以我认为这将很快得到修复......

$(window).on('beforeunload', function() {
  notification.cancel();
});