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:

SYNTAX:

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:

  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:

error:

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.

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().

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+.

Share:
Share on Facebook2

Share on LinkedIn0Tweet about this on TwitterShare on Google+1Buffer this pageDigg thisShare on Reddit1

Leave a Reply

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

Most Popular Posts

PHP 5 Abstract classes and Methods

Posted on 5 years ago

Bhumi

How to use ezSQL with example

Posted on 2 years ago

Bhumi

Where are the LOG of PHP,MySQL and Apache

Posted on 5 years ago

Bhumi

How to Protect file using .htaccess

Posted on 1 year ago

Bhumi

How To hide WordPress Toolbar

Posted on 9 months ago

Bhumi

Introduction to the Instagram API

Updated 4 weeks ago

Bhumi

How to Use the HTML5 Full-Screen API

Updated 1 month ago

Bhumi

What are Lambdas and Closures in PHP?

Updated 1 month ago

Bhumi

MySQL REGEXP Operator

Updated 1 month ago

Bhumi

The Reader’s Poll – June 2015

Posted on 2 years ago

Bhumi

The Reader’s Poll – August 2014

Posted on 2 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 3 years ago

Bhumi