Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 818
Christian Avatar asked Aug 07 '15 20:08

Christian


People also ask

How do I set a timeout for Windows 10 notifications?

Launch the Settings app from the Start menu. Click the "Ease of Access" category. Choose a timeout from the "Show notifications for" dropdown menu, under "Simplify and personalise Windows."

How do I change the display time for drop down menu notifications?

Open Settings. Click on Ease of Access. Click on Display. Under the "Simplify and personalization Windows" section, use the Show notification for drop-down menu and select the option for how long you want notifications to appear on the screen. Options include: 5 seconds. 7 seconds. 15 seconds.

How do I change the default time limit for notifications?

1 Launch the Settings app from the Start menu. 2 Click the "Ease of Access" category. 3 Choose a timeout from the "Show notifications for" dropdown menu, under "Simplify and personalise Windows." See More...

How to change the duration of notifications on Windows 10?

How to Change the Duration of Notifications on Windows 10 1 Open Settings 2 Click on Ease of Access. 3 Click on Display. 4 Under the "Simplify and personalization Windows" section, use the Show notification for drop-down menu and select the option for how long you want notifications to appear on the screen. ... See More....


1 Answers

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

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

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

like image 132
geekonaut Avatar answered Sep 24 '22 17:09

geekonaut