Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with HTML5 Notification API

In this tutorial, we will learn how to use the Notifications API in HTML5 to get the alerts in the webpage of a website and also the desktop alerts.

What is the best feature that any website or application can offer you? It is nothing but the feature of alerting you with the notifications whether it is Gmail, Facebook or any other website. Normally we get the notifications pop up on the top right of the website indicating there is some message for you. Let us see with the help of this tutorial that how this notifications API works.

We all know that HTML5 is not something that has just prevailed however we need to know some of the best features of HTML5 that can be utilized to the best possible extent. HTML5 is not just limited to introducing header, footer, nav that can be used on the document. In fact there are some of the best features like working with notifications API .

In case you want to see the notifications pop up appearing on the website, make sure the website tag is open. Whenever any new message appears, there will be an alert popping up on the screen, which when clicked will display the message.

Here in this tutorial we will see how to make use of the API so that the notification messages can be created. It is important to know about which browsers this APIs supports. As of now, you will see the notification messages appearing in Chrome as well as Safari . The best would be to start off with the mentioning of browser support.

We have two objects that can be used in the Notification API. The first one is known as the notification object.

Listing 1: Objects utilized in the notification API

Notification : EventDestination {
 void display();
 void cancel();
 // this shows the event handler elements
 attribute Function onshow;
 attribute Function onissue;
 attribute Function onclose;
 attribute Function onaccess;
}

As can be seen above, we have two methods with four elements associated with them . The first method is Display, the purpose of which will be to exhibit a notification to the user. The objective of the Cancel method is used to clear out the notification if any appearing on the website. Also in case you do not see the notification appearing on the screen, it might be due to the Cancel method stopping the notification from appearing on the website.

Next comes the of elements of notifications which are ondisplay, onissue, onclose, onaccess. Let us see one by one the significance of all these Notification elements. The purpose of ondisplay is to trigger when you see the notification pop up appearing. The next one is the onissue element which is a function that will be executed at the time when there is any issue prevailing with the notification pop up. Talking about the onclose element, it is executed when the notification pop up is closed. The last element is the onaccess that is a function which is triggered when we try to click on the notification pop up.

Let us see the second object now which is known as Notification or Alert center.

Listing 2: Notification or Alert center object

NotificationCenter {
 // This displays the alert methods
 Notification createAlert(in DOMString iconUrl, in DOMString title, in DOMString body) throws(Exception);
 optional Alert createHTMLAlert(in DOMString url) throws(Exception);
 // These are the Permission values
 const unsigned int PERMISSION_ALLOWED = 0;
 const unsigned int PERMISSION_NOT_ALLOWED = 1;
 const unsigned int PERMISSION_DENIED = 2;
 // These are the Permission methods
 int checkPermission();
 void requestPermission(in Function callback);
}

The above explained object is used to come up with an alert object. This also checks for the permissions of the webpage so as to display the notification objects. The below lists the four methods that are required to be used on the above object.

  • CreatAlert- This method is used to come up with a notification object (in case there are required permissions to be displayed).
  • This object is actually populated with the content that is being passed on to it.
  • CreateHTMLAlert, which is much on the similar lines of the above stated method. This is used to come back with a populated notification. In order to make this happen, the webpage needs to have the required permissions.
  • CheckPermission is the other method that normally returns an integer according to the permission that is set on the webpage.
  • RequestPermission- This method is used to ask for the permission whether to display the notification pop up or not.

Before you make use of the notifications API, use the below code to verify if the browser that you are going to use supports this or not.

Listing 3: Verifying the browser compatibility

/**
 * To verify the browser compatibility for the support of notifications pop up
 *
 * @This would return a true value in case your browser support alerts
 */
 function browser_support_notification()
 {
        return window.webkitNotifications;
 }

Let us shed some light on how to obtain the permissions so that the notifications can be displayed to the user.

Listing 4: Obtaining Alert Permissions

/**
* Obtain Alert Permissions
*/
request_permission()
{
	// If we get 0, this signifies that we will have permission to display alerts
	if (window.checkPermission() == 0) {
	    window.createNotification();
        } else {
	    window.requestPermission();
	}
}

In addition to the notifications pop up appearing on the website, let's discuss how we can come up with a simple text notification pop up. For this, first we need to check if there are required permissions so that the notifications pop up can be displayed. The method known by the name of createNotification() can be used to achieve this by passing the parameters for the image, title and description.

Listing 5: Creating a simple text pop up

/**
* Creating a text alert pop up
*/
Function simple_text_notification(image, title, content)
{
    	if (window.checkPermission() == 0) {
    		return window.createNotification(image, title, content);
    	}
}

Now comes in the turn of showing an HTML in the alert window which is not much of a trivial task and is much on the similar lines of the simple text alert pop up. In order to achieve this, we again need to check if we have the required permissions or not. If we have the required permissions set to true, then it will be very easy to create the HTML in a notification window.

Listing 6: Notification Window

/**
 * This is to generate an html inside the alert window
 */
 function html_notification(url)
 {
	// If we get 0, this signifies that we will have permission to display alerts
    	if (window.checkPermission() == 0) {
    		return window.createHTMLNotification(url);
    	}
 }

Some Facts about Notifications API:

  • We can always enable HTML5 notifications in any specific websites by accessing the appropriate icon on the webpage. For example, if you need to enable notifications in Gmail, we can do that by accessing the icon present on the upper right corner and then navigate to the Mail settings page.
  • Also the notifications on the desktop can be enabled by accessing the “Notifications On” link present on websites. Also if need be, we can disable these notifications as per our preference. The same is the case with Chat notifications as well where you will get an alert in case someone is trying to contact you and you are not available or online.
  • We see the notifications appearing on the desktop as a very small pop-up and that too near to the lower right corner of Windows. For Google chrome, you would see these windows appearing outside even if the web browser that you are using is in a minimized mode.
  • Taking the example of Gmail, you would see the new e-mails appearing with the icon displaying for the Gmail. Also it displays the author name, the title of the e-mail and a bit of a text to give you an idea on the email purpose. As far as new chat messages are concerned, they will populate with the image of the contact, his/her name and bit of a chat message.
  • Almost all the websites opened in Google Chrome utilizes the Desktop Notification API. This desktop Notification API is built into Google Chrome. Though the tutorial just explained the working of Notifications API in Google Chrome browser, we have good amount of web browsers available now that supports HTML5 Notifications API.
  • Sometimes it may happen that the notifications are not appearing on the webpage on the desktop, this may be due to the reason that these are not enabled when we were doing the Google Chrome installation. That is why the preferences need to be checked by accessing the Options icon and then clicking on the “Under the Hood” tab. The next step would be click on the “Content Settings” button. You would see the notifications area at the lower bottom of the content settings and then from there we can enable the desktop notifications. One can also go ahead and access the “Manage Exceptions” button and validate that the website you are trying to get the notifications for is not blocked.

Conclusion

We learned today how to make use of notifications API in HTML5 to get the alerts on the webpage of a website in addition to the desktop alerts.



Software developer with more than 5 years of development on Java, HTML, CSS.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login