Introduction to HTML5 Web Notification API

You must have noticed notification box while Gmail alerting you of a new email at the bottom right of your screen with the notification message. It can be easily accomplished with a new feature of HTML5 called as the HTML5 web notification API.

Browser Support

I thought that it would be better to start with Browser support specification on caniuse because it may happen that some folks are not interested without particular browser support so they can leave without wasting their time.

Okay so let’s get started.

How to start


var notification=new Notification(‘Notification Title',{
	body:'Your Message'
});

This code constructs the base for the notification. First argument indicates the title of the notification and second argument is an option object that can have the following properties.

  • body : A body content or the message that we want to display.
  • dir : The direction of the notification that it can be auto, ltr, or rtl
  • lang : It specify the language used within the notification.
  • tag : An ID assigned to the notification that allows to retrieve, replace or remove it if necessary
  • icon : The URL of an image to display as an icon in the notification

Getting Permission

To display notification you need to ask the user for permission. After getting permission from the user, notification appears on screen. It can have following possible values:

  • default : The user choice is unknown and therefore the browser will perform this status as if the user denied the permission (“Browser : You didn’t ask, I will not answer”)
  • denied : The user has denied the notifications to being displayed (“User : Get the hell away from my screen.”)
  • granted : The user granted the notifications. (“User : Welcome! I am too excited to see this notification”)

Notification.requestPermission(function(permission){
	//display notification here making use of constructor
});

Basic HTML to create a button


<button id="button">Read your notification</button>

CSS as it always will


#button{
  font-size:1.1rem;
  width:200px;
  height:60px;
  border:2px solid #df7813;
  border-radius:20px/50px;
  background:#fff;
  color:#df7813;
}
#button:hover{
  background:#df7813;
  color:#fff;
  transition:0.4s ease;
}

Our JavaScript snippet that should resemble as follows:


document.addEventListener('DOMContentLoaded',function(){
		document.getElementById('button').addEventListener('click',function(){
			
			if(! ('Notification' in window) ){
				alert('Sorry bro, your browser is not good enough to display notification');
				return;
			}	
			
			Notification.requestPermission(function(permission){
				var notification = new Notification("Here I am!",{body:'Thanks for clicking that button. Hope you liked.',icon:'https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/512/MetroUI_HTML5.png',dir:'auto'});
			});
		});
	});

Code shows that when notification in windows does not appear it will display the message saying ‘Sorry bro, your browser is not good enough to display notification’. After that, to create notification object we asked for permission as explained above, and once the permission granted, have your say as well with your message, title and icon.

Why user will make an effort to close the notification?

Okay then set a specific time interval so that a notification box close itself after a given time.


var notification = new Notification("Here I am!",{body:'Today too many guys got eyes on me, you did the same thing. Thanks',icon:'icon.png',dir:'auto'});
setTimeout(function(){
	notification.close(); //closes the notification
},5000);

Okay that’s it guys, this was our show for tonight, but if you want some more than you can always click the following link:

Checkout the demo on codepen

See the Pen HTML5 Notification API by Prakash (@imprakash) on CodePen.

2 thoughts on “Introduction to HTML5 Web Notification API

Comments are closed.