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:
SYNTAX:
1 2 3 | var myNotification = new Notification(title, options); |
Here,
- 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:
- Denied – If the user refuses to use the notification.
- Granted – If the user allows the use of the notification.
- 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.
click
Notification.onclick – This handler is for the click event. It is activated every time the user clicks on the notification.
close
Notification.onclose – This handler for the closing event. It is triggered when the user closes the notification.
show
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.
1 2 3 4 5 |
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().
1 2 3 4 5 6 7 8 9 10 11 12 | // 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.
1 2 3 4 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <script> function notifyMe() { // Let's check if the browser supports notifications if (!("Notification" in window)) { alert("This browser does not support desktop notification"); } // Let's check if the user is permitted to get some notification else if (Notification.permission === "granted") { // if yes, let's create a notification var notification = new Notification("Hi there! This is TheCreativeDev"); } // Otherwise, we need to ask the user for permission // Note, Chrome does not implement the permission static property // So we have to check for NOT 'denied' instead of 'default' else if (Notification.permission !== 'denied') { 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"); } }); } // At last, if the user already denied any notification, and you // want to be respectful there is no need to bother him any more. } </script> |
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+.
