Home » HTML5 » HTML5 Notification Example

About Olayemi Odunayo

I am a programmer and web developer, who has experience in developing websites and writing desktop and mobile applications. I have worked with both schematic and schemaless databases. I am also familiar with third party API and working with cloud servers. I do programming on the client side with Java, JavaScript, html, Ajax and CSS while I use PHP for server side programming.

HTML5 Notification Example

In this example we are going to learn about HTML5 notification API.
 
 
 
 
 
 
 
 
 
 
 
 

 
For this example we will use:

  • A computer with a modern browser installed.
  • notepad++.
  • Wamp Server: You can actually use any server, the most important thing is that your app has to be hosted on an http server or else HTML5 notifications will not work.

1. Getting Started

HTML5 notification API provides a way to notify or alert users outside the context of a webpage. HTML5 notification API is displayed at the system level. This means the way notification are displayed depends on the computer or device OS(operating system), just imagine the way desktop computers or mobile devices display notification. An HTML5 notification may appear in any of the following places:

  • A corner of the user’s display.
  • An area within the chrome of the user agent.
  • The “home” screen of a mobile device.

Some of the important applications of this technology is in web based email systems or internet relay chat (IRC), where there is a need to notify users about new messages that has arrived (when the user is currently not using the browser application)

1.1 The Notification Object

We can create a new notification by creating an instance of the Notification object. Let’s see how to do this below:

var title="New Notification";// title for the notification
var options ={
body:"this is a new notification",
icon:"pathtoicon/icon.jpg"//icon to display and it is optional
}
noti= new Notification(title, options);//instatiate the notification object.

1.2 Notification Permission

Before a webpage can send notifications it needs to be granted permission to do so. The user needs to grant the application permission at least once. The permission to display notification for a given origin can be one of three strings:

  • default: This is equivalent to “denied”, but the user has made no explicit choice thus far.
  • denied: This means the user does not want notifications.
  • granted: This means notifications can be displayed.

You can check to see if you have permission by checking the value of the Notification.permission read only property.

Notification.requestPermission();//it takes a callback function 

Commonly, you’ll ask for permission to display notifications when your app is first initialized, and before trying to instantiate a Notification object.
Lets see a full example below.

noti.html

<!DOCTYPE html> 
<html lang=en>
	<head>
	<style>
	html, body{
	width:100%;
	height:100%;
	margin:0%;
	font-family:"helvetica","verdana","calibri", "san serif";
	overflow:visible;
	padding:0%;
	border:0%;
	}
	 
	</style>
	 		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
	
	<title> 
Html5 Notification API Example
</title>
</head>
	<body >
	<script>
	window.addEventListener("load",c);// register an eventlistener for web page onload
	function init(){
	var b=document.getElementById("but");//get the button object
	b.addEventListener("click",noti,false);//register an eventlistener for when user clicks the button
	}
	// function called when the web page has loaded
	function c(){
	init();
	if(window.Notification && Notification.permission!=="granted"){//check to see if notification is granted and notification is supported
	//if it is not supported request permission
	Notification.requestPermission(function(status){
	if(Notification.permission!==status){
	Notification.permission=status;
	}
	})
	}
	}
	//function called when button is clicked and shows notification
	function noti(){
	if(Notification.permission=="granted"){//check if we have notification permission
	var title="Just Testing This App";//title for notification
	var options={//options for notification
	body:"it is just a test"
	
	}
 noti= new Notification(title,options);//permission is granted, display notification
  
 }
 else{
 alert("permission not granted");//alert error message : permission is not granted
 }


}
	</script>
	<button id=but>
	Send Notification Now
	</button>
	</body>
	</html>

Note: inline JavaScript should be avoided because it makes the markup bigger and less readable. The content, structure and behavior are not well-separated, thus making a bug harder to find. Furthermore, usage of event attributes almost always causes scripts to expose global functions on the Window object, thus polluting the global namespace.
In line 25 we register a web page onload event, which fires our function c() when the web page is done loading. In line 32, inside the function c we call the function init. The init function simply registers an onclick event listener for our button.

In line 32 (through an IF statement) we check if the browser running the code supports HTML5 notification. in that same line we check if the user has given the webpage notification permission. If the first condition returns true and the second condition returns false, we ask the user for notification permission(this is usually shown as dialog box with a message at the top and a yes and no button below.). If the “show me notification” button is clicked the noti function is called. The function checks if the web page has permission for notification, if it has permission we show a notification else alert the user about the error.

1.3 Notification Events

Events can be fired on a notification instance. Developers can use these events to generate the required behavior.

  • click: This event is triggered when a user clicks the notification.
  • error: This event is triggered, when for some reasons the notification cannot be displayed.

These events can be tracked using the onclick and onerror handlers. You can also use the addEvenlistener method on it.

1.4 Properties Of The Notification Object

  • Notification.permission: It is a static property, this means it is only available on the notification Object and not its instance. It defines the current permission status and be either granted, denied or default.
  • Notification.body: The body string of the notification as specified in the options parameter of the constructor.
  • Notification.lang: The language code of the notification as specified in the options parameter of the constructor.
  • Notification.tag: This represents the tag of the notification and it is declared or specified in the options parameter of the notification constructor.
  • Notification.icon: This defines the URL of the image used as an icon of the notification as specified in the options parameter of the constructor.
  • Notification.icon: This is the URL of an image to be displayed as part of the notification, as specified in the options parameter of the constructor.
  • Notification.timestamp: This holds the time at which is created.
  • Notification.title: This holds the title of the notification as specified in the first parameter of the constructor.

Your app can become a nuisance if it sends a lot of notification to the user in a short time. To avoid spamming the user with too much notification, it is possible to add a tag to a new notification. If a notification already has the same tag and has not been displayed yet, the new notification replaces that previous notification. If the notification with the same tag has already been displayed, the previous notification is closed and the new one is displayed.
Lets take a look at an example below

noti2.html

<!DOCTYPE html> 
<html lang=en>
	<head>
	<style>
	html, body{
	width:100%;
	height:100%;
	margin:0%;
	font-family:"helvetica","verdana","calibri", "san serif";
	overflow:visible;
	padding:0%;
	border:0%;
	}
	 
	</style>
	 		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
	
	<title> 
Html5 Notification API Example
</title>
</head>
	<body >
	<script>
	window.addEventListener("load",c);// register an eventlistener for web page onload
	function init(){
	var b=document.getElementById("but");//get the button object
	b.addEventListener("click",noti,false);//register an eventlistener for when user clicks the button
	}
	// function called when the web page has loaded
	function c(){
	init();
	if(window.Notification && Notification.permission!=="granted"){//check to see if notification is granted and notification is supported
	//if it is not supported request permission
	Notification.requestPermission(function(status){
	if(Notification.permission!==status){
	Notification.permission=status;
	}
	})
	}
	}
	//function called when button is clicked and shows notification
	function noti(){
	if(Notification.permission=="granted"){//check if we have notification permission
	var title="Just Testing This App";//title for notification
	var options={//options for notification
	body:"it is just a test",
	tag:"notifications"
	}
	var i=0//counter variable
	//we generate a notification every 200 millisecond
	var timer =setInterval(function(){
	 noti= new Notification(title,options);//permission is granted, display notification
	 if(i>7){//if the counter is greater than seven
	 clearInterval(timer);// clear the timer
	 }
	 i++;
	},200)

  
 }
 else{
 alert("permission not granted");//alert error message : permission is not granted
 }


}
	</script>
	<button id=but>
	Send Notification Now
	</button>
	</body>
	</html>

2. Summary

In this example we learnt about HTML5 notifications. We learnt about HTML5 Notification object, its properties and methods. We also learnt how to use and work with this object.

3. Download the source code

Download
You can download the full source code of this example here: html5notificationapi

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

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

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Phill
Phill
5 years ago

what is ‘chrome of the user agent’