DEV Community

Cover image for Send Notifications Using Pure Javascript
notHanii
notHanii

Posted on

Send Notifications Using Pure Javascript

Requesting Permission to send notifications

We use Notification.requestPermission to ask the user if he/she wants to receive notifications from our website.


Notification.requestPermission(function() {
 if (Notification.permission === 'granted') {
 // user approved.
 // use of new Notification(...) syntax will now be successful
 } else if (Notification.permission === 'denied') {
 // user denied.
 } else { // Notification.permission === 'default'
 // user didn’t make a decision.
 // You can’t send notifications until they grant permission.
 }
});


Enter fullscreen mode Exit fullscreen mode

Since Firefox 47 The .requestPermission method can also return a promise when handling the user's decision for granting permission

Notification.requestPermission().then(function(permission) {
 if (!('permission' in Notification)) {
 Notification.permission = permission;
 }
 // you got permission !
 }, function(rejection) {
 // handle rejection here.
 }
);
Enter fullscreen mode Exit fullscreen mode

Sending Notifications

After the user has approved a request for permission to send notifications, we can send a simple notification that
says *Hey *to the user:

new Notification('Hey', { body: 'Hello, world!', icon: 'url to an .ico image' });

Enter fullscreen mode Exit fullscreen mode

This will send a notification like this:

Hey
Hello, world!

Closing a notification

You can close a notification by using the .close() method.

let notification = new Notification(title, options);
// do some work, then close the notification
notification.close()

Enter fullscreen mode Exit fullscreen mode

You can utilize the setTimeout function to auto-close the notification sometime in the future.

let notification = new Notification(title, options);
setTimeout(() => {
 notification.close()
}, 5000);

Enter fullscreen mode Exit fullscreen mode

The above code will spawn a notification and close it after 5 seconds

Notification events

The Notification API specifications support 2 events that can be fired by a Notification.

  1. The click event.

This event will run when you click on the notification body (excluding the closing X and the Notifications
configuration button).

Example:

notification.onclick = function(event) {
 console.debug("you click me and this is my event object: ", event);
}
Enter fullscreen mode Exit fullscreen mode
  1. The error event

The notification will fire this event whenever something wrong will happen, like being unable to display

notification.onerror = function(event) {
 console.debug("There was an error: ", event);
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)