How to Create Web Notifications

Web Notifications provide ways for websites to display notifications to users e.g. alerting the user about a business event or success/failure of an asynchronous operation.
They are displayed at the system level, which means that even if you are on a different window or tab or focused out of the browser, you can still see those notifications. Notifications are supported by most of the modern browsers (chrome, firefox, edge, safari, and others).

Here is a working example of notifications.

The W3C specification for this API can be found here.

requestPermission

Notifications can be displayed only if the user grants permission to show notifications. If the user denies it, then the user can't see the notification, even if it is created.

To request permissions from the user, invoke the following:

window.Notification.requestPermission();

requestPermission returns a promise with the result of the user's selection. The result would be

• default - if the user has not chosen an option. This would behave the same as denied.
• denied - if the user has denied permission
• granted - if the user allows notifications

Once the user grants/denies the permission, she is not prompted for permissions again. The result would return the choice that was made. The result of the permissions can be accessed in the following way:

window.Notification.requestPermission().then(function(result) {
 console.log(result);
 //Perform activities based on the permission
}

Create Notification

A new notification can be created as below:

notification = new window.Notification('Notification Title', 
    {
        body: 'Notification Body',
        icon: 'https://www.codelooru.com/icon.png',
        dir: 'ltr' //or rtl
    }
);

The constructor for Notification takes title and options as the parameters.
title is a mandatory parameter. It is used as the title of the notification message.
options are optional.

• under options, you have body which is used as the body of the notification message.
• and then you have icon for displaying an icon on the notification
• dir is for direction and has values rtl for right-to-left or ltr for left-to-right

The example above would display the following notification.

Events on Notification

The following events are supported on the notifications

• onclick - occurs when the user clicks on the notification
• onshow - occurs when the notification is shown
• onclose - occurs when the user closes the notification
• onerror - occurs when there is an error showing the notification to the user

The following example of an event listener would open a new window on click:

notification.onclick = function(event) {
    window.open('http://www.codelooru.com');
    this.close();
};

Working Example

You would find a working example of notification on the page here. View the source of the page for the implementation details.

html5 Web notifications