What are Browser Notifications?

The Side Popups which appear on the browser are called Notifications. They are only displayed when the user is opted by allowing when the browser asks for permission to allow these notifications to be displayed.

Throughout this tutorial, we’ll be doing most work on Notification class.

How does it work?

Notification API is used to display notifications. The step starts by triggering Notification.requestPermission a method that will ask for permission for enabling notification coming from the website.

And If the client has already allowed or blocked the showing of notification it will not show the dialog box again.

chrome browser show notification request permission alert box

And then for display notifications create an object from Notification a class. The browser will detect it and it will be displayed.

sample notification displayed in chrome browser

Checking if a client has given Permission to allow notifications

For permission there are three types of choices available:

• default: Represents when the browser doesn’t know whether the client is allowed or denied the notification.
• granted: Represents when a client has to allow an application to show notifications.
• denied: Represents when a client has blocked notifications from displaying.

Check permission for Notification

If you want to know whether notification permission status before you ask for notification permission. Use the Notification.permission property.

Notification.permission;

Ask for Permission to allow notifications

If a client has not granted permission you may choose the remind client for providing the necessary permissions to display notification by using Notification.requestPermission() method.

The Notification.requestPermission() will return a promise and can be evaluated using then() method or by using async and await.

Notification.requestPermission()
.then( perm => console.log("Permission:", perm))
.catch(e => console.log("error", e));

This will show the alert box and ask’s client to allow or block notification.

Show Notifications

Create an object from the class Notification and the required parameter to the constructor.

let title = "Test Title";
let body = "Test content";
let icon = "https://thecodelearners.com/wp-content/uploads/2020/12/icon.jpg"; // optional
let newNotification = new Notification(title, {
    body,
    icon
});

Triggering function on Notification Click

A method onclick will be called when the client clicks on the notification popup card.

newNotification.onclick = function(e){
    console.log("event", e);
}

Triggering function on Notification Show

A method onshow will be called when a notification is displayed.

newNotification.onshow = function(e){
    console.log("onshow event", e);
}

Triggering function on Notification close

A method onclose will be called when the notification is closed.

newNotification.onclose = function(e){
    console.log("onclose event", e);
}

Triggering function on Notification error

A method onerror will be called when the notification encounters an error.

newNotification.onerror = function(e){
    console.log("onerror", e);
}

Increase visibility time for browser notification

By default, the notification displayed expires in 5 seconds. And to increase the time duration pass requireInteraction as true.

Next time when notifications will be displayed they will be closed only after the client clicks on the close button.

Notification(title, {
    body,
    icon,
    requireInteraction: true,
})

Trigger vibrate for devices

Within the objects as a second parameter you can also pass vibrate: true to trigger vibration when the device receives a notification.

Notification(title, {
    body,
    icon,
    vibrate: true,
})

Check if Browser Supports Notification

Here is a very straightforward way to check whether your browser supports Notification by using the below snippet.

typeof Notification !== "undefined"

Cross-Browser Compatibility for Notification

Still, some modern browsers don’t support completely support sending notifications.
And here is the website caniuse.com to check which browsers do support and which don’t.

Watch Video

Click to Play Video