Understanding The JavaScript Notifications API

Introduction

 

The Notifications API is an interface that comes bundled with most modern web browsers which lets us display notifications to the user even when the web application or the website is not active or open in the web browser. In this article, we'll learn how we can utilize this API to construct and display notification messages to the user.

 

Asking for Permission

 

Before displaying anything in the web browser we need to get the user's persmission to display the notifications and if the user provides that permission then only we'll be able to display the notification messages.

 

To ask for user's permission we need to use the requestPermission method that is located on Notification object. 

Notification.requestPermission();

The Notification object comes bundled with the web browser. Hence you don't need any third party library to use it.

 

The above code will trigger the notification panel.

 

 

If the user has already granted the permission to display the notifications, this method will not trigger the panel.

 

Determine if the user has granted the permission

 

The Notification object consists of a permission property the could be used to determine if user has granted the permission to display the notification messages.

console.log(Notification.permission);

This property can have one of the three potential values,

1. denied - If the user has denied the permission.
2. granted - If the user has granted the permission.
3. default - If you haven't asked for permission yet.

The requestPermission method returns a promise and we can pass a callback to this promise that accepts a parameter. This parameter also contains one of the three values the permission property could have. You could use this promise to perform some action based on whether the user has granted the permission.

Notification.requestPermission().then(status => {
    if (status === 'granted') {
        // do something
    }
});

As you can see in the above code, the callback function to the promise accepts a status parameter which could have one of the two values granted if user clicks the allow button or denied if the user clicks the block button. You can simply compare these values using a dead simple if condition and perform some action based on user's selection. 

 

Displaying the notifications

 

To display the notifications you need to simply use the Notification object as a constructor function with new keyword.

new Notification('Hello World!');

The above code will produce following notification,

 

 

You could also add body to your notification by passing an object as a second parameter.

new Notification('Hello World!', {
    body: 'This is a sample notification'
});

The appearance and specific functionality of the notifications may vary depending on user's web browser. To learn more about Notification API and browser support visit,

 

https://developer.mozilla.org/en-US/docs/Web/API/notification 

 

Closing the Notification

 

To close the Notification first you need to save its reference inside a variable.

const hello = new Notification('Hello World!');

Next thing you need to do is to call the close method on that reference.

hello.close();

Adding onclick event to Notification

 

You could add more interactivity to your Notifications by adding an onclick event to them. Let's take a look at an example to understand this in detail,

let hello = new Notification('Hello World!');
hello.onclick = (event) => {
    event.preventDefault();
    window.open('https://www.c-sharpcorner.com', '_blank');
    hello.close();
}

In the above code, we're first saving the reference to our notification in hello variable. Then we're adding an onclick event to this reference. When the user clicks on the Notification pop-up, the callback for the onclick event simply opens a new tab that navigates to C# Corner's home page and then hides the notification using the close method.

 

Quick Tip

 

To determine if user's browser supports the Notification API you could simply use an if statement.

if (window.Notification || Notification.permission !== 'denied') {
    Notification.requestPermission().then(status => {
        if (status === 'granted') {
            const hello = new Notification('Hello World');

            setTimeout(() => hello.close(), 2000);
        }
    });
}

The above code first checks if the window object contains the Notification object i.e. if the browser supports the Notification API. Next, it checks if the permission is not already denied and at last it asks for permission. If the user grants the permission, he/she will be presented with a Notification which will close automatically after 2 seconds.

 

And that's it! 

 

I hope you enjoyed this article. In case you've any queries or feedback, feel free to drop a comment in the comment section.