Question

I’m currently using the following code to generate HTML5 desktop notifications for my console.

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

The notifications appear and disappear again after 5 seconds, however if I click onto a new page or close the window before the 5 seconds are up, then the notification doesn’t close. Since the page is set to refresh every 5 minutes, this can result in many notifications appearing, and each of these then need to be closed manually.

Is there a method to check in Javascript if there are any previous notifications waiting behind and close them, or to make sure a notification goes away even if the window is closed?

Answer 1

As per: Reliably Dismissing Webkit Notifications

Use a window.onunload or window.onbeforeunload handler to clear the noifications when the page is closed. This does not preserve the three-second delay, however, since notifications will be closed immediately when the page closes.

Another option (that does preserve the three-second delay) is to create the notifications from HTML pages using createHTMLNotification(url). Have the notification page close itself by including a script like setTimeout(window.close, 3000) within the notification HTML document. In this case, obviously, you don’t need a setTimeout call in your main page, since it is already included in the notification.

This code works: However, on Chrome, it only works when changing or closing a page, it doesnt seem to work on refresh. It’s a recorded bug in the Chromium wiki so i assume this will get fixed soon…

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