How to show notifications in JavaScript

You can display a notification on your website using the Notification API.

You only need to follow four simple steps to show system notifications:

1. Check if the browser supports notifications.

2. Ask the user for permission to show the notification.

3. Once the user grants permission, create a Notification object.

4. Show the notification with your custom message.

Check browser support

typeof Notification !== "undefined"

Ask for user permission

Before asking permission, let’s check if the permission was already granted. To get the notification permission, you can use:

Notification.permission

This can have 3 possible values:

denied → Permission denied to show a notification.

granted → Permission granted to show a notification.

default → The user choice is unknown, so the browser will act as if the value was denied.

Consider that Notification.permission is the default. Now, you need to ask permission from the user to show a notification.

The requestPermission method in Notification is used to raise a request to the user. This will return a promise, which resolves to one of three permissions.

Notification.requestPermission().then(function (permission) {

    console.log(permission);

});

Display a notification

To display a notification, we need 2 things:

• title → Title to display within the notification.

• message → Body text of the notification that is displayed below the title.

Optionally, we can include:

• icon → URL of an icon to be displayed in the notification.

The above options are the most commonly used, but you can view the full list here.

let title = "JavaScript Jeep";

let icon = 'https://homepages.cae.wisc.edu/~ece533/images/airplane.png';

let body = "It's Your boarding time";

var notification = new Notification(title, { body, icon });

You can only choose to display the notification if the user is not in the current tab. To check the current tab, you can use document.visibilityState.

If the visiblityState != visible, show the notification.

let showNotification = document.visibilityState !== "visible";

if(showNotification) {
   // Notification code
}

Close the notification

If the user comes back to the browser tab and it triggers the notification, you need to close the notification using close().

notification.close();

The close method will hide the notification.

Events on the notification

click → The user clicks on the notification.

close → The notification is closed.

error → The notification couldn’t be displayed for some reason.

show → The notification is displayed to the user.

Focus the tab on clicking the notification

You can change the current tab to the tab that displays the notification using window.parent.focus().

let notification = new Notification('Travel');
notification.onclick = function(){
    window.parent.focus();
    notification.close();
}

Put it all together

let permission = Notification.permission;

if(permission === "granted"){
   showNotification();
} else if(permission === "default"){
   requestAndShowPermission();
} else {
  alert("Use normal alert");
}

Request the notification from the user.

function requestAndShowPermission() {
    Notification.requestPermission(function (permission) {
        if (permission === "granted") {
            showNotification();
        }
    });
}

And finally, show the notification.

function showNotification() {
   //if(document.visibilityState === "visible") {
     //  return;
   //   }
   let title = "JavaScript Jeep";
   let icon = 'https://homepages.cae.wisc.edu/~ece533/images/airplane.png';
   let body = "Message to be displayed";
   var notification = new Notification('Title', { body, icon });
   notification.onclick = () => {
        notification.close();
        window.parent.focus();
   }
}

Implementation

If you’re on a Mac, make sure you have enabled notifications for the browser in the Notification Settings.