Back to Top

How To Use The HTML5 Notification API

How To Use The HTML5 Notification API

HTML5 comes with very useful features for the web development. HTML5 comes with lots of new APIs like Geolocation, Notification, File, etc and those are very useful to improve the user interaction using HTML. One of good API HTML5 added is the Notification API which provides a totally different way of notification to users.

You all are accustomed to the notifications in the browser. Now, You can generate and display a notification to the user on the browser at the top of all open windows with HTML5 Notifications API. So in this article, we learn how to use the HTML5 Notification API, then to apply it in practice.

Keep in mind, HTML5 new features and APIs will work on HTML5 supported browsers only and if the browser does not support the HTML5, you can’t use new features and APIs of HTML5. Today I am going to share the HTML5 notification API. The HTML5 Notification API will work correctly on Chrome, Mozilla, and Safari.

What is HTML5 Notification?

HTML5 Notification is kind of notification which we can provide to the user on certain events or even user is on another tab of the browser. This notification can be useful for events like New Mail, New Tweet, etc.

How HTML5 Notification API works?

There are several steps to work with Notification API. First, we need to take permission from the user to show notification or not. We can show notification only if a user has given the permission for the same.

You can show notification only if a user has given the permission for the same.

So for the first time this code will ask for permission instead of showing the notification. Now Let’s understand the HTML5 notification API.

Notifications API Constructor

To create a new notification API to the user, You need to create a new instance of the Notification object with two parameters:


var myNotification = new Notification(title, options);


  • title – The title for the notification;
  • options –This option allows you to set custom notification. This options have following possible properties:
    • dir : Dir is for direction specifies in which corner will display notification.The allowed values are auto, ltr and rtl.
    • lang : This property is for notification’s language. You can specify a language of notification using this property.
    • body : This property is string parameter defines the body text of the notification.
    • tag : ID of the notification which allows various manipulations with the notification.
    • icon : This property contains the URL of an icon for use as image display in the notification.

Notifications API Methods

There are two types of methods supported by Notifications API.

Static methods

These methods are only available for the Notification() object:

Notification.requestPermission () – This method is used to ask the user for permission to display notifications.

Instance methods

These methods are available for an instance of Notification() object:

Notification.close () – This method allows you to programmatically dismiss a notification.

Notification object also support inherited methods EventTarget interface (EventTarget.addEventListener, EventTarget.removeEventListener and EventTarget.dispatchEvent).EventTarget is an interface implemented by objects that can receive events and may have listeners for them.

Notifications API Properties

There are two types of properties supported by Notifications API.

Static properties

These properties as well as static methods are available only to the Notification() object :

Notification.permission – This property contains a string for the current resolution to display notifications. Possible values are:

  1. Denied – If the user refuses to use the notification.
  2. Granted – If the user allows the use of the notification.
  3. Default – This dedault value is if selection of the user is unknown and therefore the browser will act as a value of denied.

Instance properties

These properties are read at the instance of Notification() object:

Notification.dir – obtain the value of the direction specified in the parameters.
Notification.lang – language code defined in the constructor.
Notification.body – content of the notification to the constructor.
Notification.tag – ID of the notification defined in the constructor.
Notification.icon – an icon of the notification in the constructor.

Notifications API Event handlers

Notification() object has following event handlers:


Notification.onerror – This handler is useful when an error occurs. You can activate it every time when a failure is detected in the notification.


Notification.onclick – This handler is for the click event. It is activated every time the user clicks on the notification.


Notification.onclose – This handler for the closing event. It is triggered when the user closes the notification.


Notification.onshow – This handler for the event display. It triggered when the notice begins to appear;

Notifications API support

First of all, check if HTML5 Notifications API is supported by a browser. You can write a simple line of code to check browser support Notifications API.

if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");

Get Permissions To Display Alert

You must need a user permission to display notifications to the user. So, first get permission to display any notifications to the user. To get permission to display all you have to do is use the method requestPermission().

Notification.requestPermission(function (permission) {
    // Whatever the user answers, make sure you store the information
    if(!('permission' in Notification)) {
        Notification.permission = permission;
    // If the user granted permission, let's create a notification
    if (permission === "granted") {
        var notification = new Notification("Hi there! This is TheCreativeDev");

NOTE: window.webkitNotifications has already been deprecated and removed.

Create HTML5 Notification API

Here is the HTML code of the HTML5 Notification API.Let’s create a button to display a notification when click. You can display a notification on page load.

Here is the JavaScript code for the HTML5 notification API. I have created a function notifyMe() and written code in that so can use the function whenever required.

Now You have a beautiful feature of Web Notification API in HTML5 with which you can simply send a notification.That’s all. This only expect the full support of this technology on all browsers!

If you already use HTML5 Notification API, to share your experience in the comment section. If you like the article, don’t forget to share with your friends on Twitter, facebook, and Google+.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

How BlockChain and Ethereum works?

Posted on 1 year ago


How to use Mixins in LESS CSS?

Posted on 4 years ago


How to use HTML5 Constraint Validation

Posted on 4 years ago


Hello world

Updated 1 month ago

Nick Carter

In depth Understanding of Laravel Core

Updated 3 months ago


ECMAScript 6 New Features – 2

Updated 1 year ago


The Reader’s Poll – June 2015

Posted on 4 years ago


The Reader’s Poll – August 2014

Posted on 5 years ago


The Reader’s Poll – June 2014

Posted on 5 years ago


The Readers’ Poll – May 2014

Posted on 5 years ago


The Readers’ Poll – August 2013

Posted on 6 years ago