I am working with desktop notifications for my web application using the standard Notification API. For the purposes of my initial development, I am using Google Chrome. With Chrome, when a page creates a Notification object, the notification will stay on the desktop forever.

The Notification prototype does have a .close() method which allows for the closing of a notification that has been previously invoked. I figured that this, in conjunction with the setTimeout function would make automatically dismissing notifications after a couple seconds a piece of cake. I even found a guide confirming my idea.

However, it seems that I am unable to get the scope of the notification to work properly with the setTimeout function, and the .close() method does not get called properly for each created notification.

Here is what I have tried (I used some code found in another answer as a starting point):

Button:

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

I would appreciate it if anyone who has experience with this could help me.

I am working with desktop notifications for my web application using the standard Notification API. For the purposes of my initial development, I am using Google Chrome. With Chrome, when a page creates a Notification object, the notification will stay on the desktop forever.

The Notification prototype does have a .close() method which allows for the closing of a notification that has been previously invoked. I figured that this, in conjunction with the setTimeout function would make automatically dismissing notifications after a couple seconds a piece of cake. I even found a guide confirming my idea.

However, it seems that I am unable to get the scope of the notification to work properly with the setTimeout function, and the .close() method does not get called properly for each created notification.

Here is what I have tried (I used some code found in another answer as a starting point):

Button:

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

I would appreciate it if anyone who has experience with this could help me.

• javascript
• google-chrome
• settimeout

1 Answer 1

When I wrap that into a function() {} it works:

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

See this fiddle: https://jsfiddle/drnz12n8/2/