In this example we are going to learn about HTML5 notification API.
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n[ulp id=’tgm4cmEWcKUikZNn’]
\n
\nFor this example we will use:<\/p>\n
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:<\/p>\n
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)<\/p>\n
We can create a new notification by creating an instance of the 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\u00a0to display\u00a0notification\u00a0for a given\u00a0origin\u00a0can be one of three strings:<\/p>\n You can check to see if you have permission by checking the value of the Commonly, you’ll ask for permission to display notifications when your app is first initialized, and before trying to instantiate a Notification object. noti.html<\/em><\/span><\/p>\n Note: <\/b>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\u00a0Window\u00a0object, thus polluting the global namespace. 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 Events can be fired on a notification instance. Developers can use these events to generate the required behavior.<\/p>\n These events can be tracked using the 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\u00a0been\u00a0displayed, the previous notification is closed and the new one is displayed. noti2.html<\/em><\/span><\/p>\n 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.<\/p>\nNotification<\/code> object. Let’s see how to do this below:<\/p>\nvar title=\"New Notification\";\/\/ title for the notification\r\nvar options ={\r\nbody:\"this is a new notification\",\r\nicon:\"pathtoicon\/icon.jpg\"\/\/icon to display and it is optional\r\n}\r\nnoti= new Notification(title, options);\/\/instatiate the notification object.\r\n\r\n<\/pre>\n1.2 Notification Permission<\/h3>\n
\n
Notification.permission <\/code>read only property.<\/p>\nNotification.requestPermission();\/\/it takes a callback function \r\n\r\n<\/pre>\n
\nLets see a full example below.<\/p>\n<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> \r\nHtml5 Notification API Example\r\n<\/title>\r\n<\/head>\r\n\t<body >\r\n\t<script>\r\n\twindow.addEventListener(\"load\",c);\/\/ register an eventlistener for web page onload\r\n\tfunction init(){\r\n\tvar b=document.getElementById(\"but\");\/\/get the button object\r\n\tb.addEventListener(\"click\",noti,false);\/\/register an eventlistener for when user clicks the button\r\n\t}\r\n\t\/\/ function called when the web page has loaded\r\n\tfunction c(){\r\n\tinit();\r\n\tif(window.Notification && Notification.permission!==\"granted\"){\/\/check to see if notification is granted and notification is supported\r\n\t\/\/if it is not supported request permission\r\n\tNotification.requestPermission(function(status){\r\n\tif(Notification.permission!==status){\r\n\tNotification.permission=status;\r\n\t}\r\n\t})\r\n\t}\r\n\t}\r\n\t\/\/function called when button is clicked and shows notification\r\n\tfunction noti(){\r\n\tif(Notification.permission==\"granted\"){\/\/check if we have notification permission\r\n\tvar title=\"Just Testing This App\";\/\/title for notification\r\n\tvar options={\/\/options for notification\r\n\tbody:\"it is just a test\"\r\n\t\r\n\t}\r\n noti= new Notification(title,options);\/\/permission is granted, display notification\r\n \r\n }\r\n else{\r\n alert(\"permission not granted\");\/\/alert error message : permission is not granted\r\n }\r\n\r\n\r\n}\r\n\t<\/script>\r\n\t<button id=but>\r\n\tSend Notification Now\r\n\t<\/button>\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\n
\nIn line 25 we register a web page onload event, which fires our function c()<\/code> when the web page is done loading. In line 32, inside the function c<\/code> we call the function init<\/code>. The init<\/code> function simply registers an onclick event listener for our button.<\/p>\nnoti<\/code> 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.<\/p>\n1.3 Notification Events<\/h3>\n
\n
onclick\u00a0<\/code>and onerror<\/code> handlers. You can also use the addEvenlistener<\/code> method on it.<\/p>\n1.4 Properties Of The Notification Object<\/h3>\n
\n
\nLets take a look at an example below<\/p>\n<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> \r\nHtml5 Notification API Example\r\n<\/title>\r\n<\/head>\r\n\t<body >\r\n\t<script>\r\n\twindow.addEventListener(\"load\",c);\/\/ register an eventlistener for web page onload\r\n\tfunction init(){\r\n\tvar b=document.getElementById(\"but\");\/\/get the button object\r\n\tb.addEventListener(\"click\",noti,false);\/\/register an eventlistener for when user clicks the button\r\n\t}\r\n\t\/\/ function called when the web page has loaded\r\n\tfunction c(){\r\n\tinit();\r\n\tif(window.Notification && Notification.permission!==\"granted\"){\/\/check to see if notification is granted and notification is supported\r\n\t\/\/if it is not supported request permission\r\n\tNotification.requestPermission(function(status){\r\n\tif(Notification.permission!==status){\r\n\tNotification.permission=status;\r\n\t}\r\n\t})\r\n\t}\r\n\t}\r\n\t\/\/function called when button is clicked and shows notification\r\n\tfunction noti(){\r\n\tif(Notification.permission==\"granted\"){\/\/check if we have notification permission\r\n\tvar title=\"Just Testing This App\";\/\/title for notification\r\n\tvar options={\/\/options for notification\r\n\tbody:\"it is just a test\",\r\n\ttag:\"notifications\"\r\n\t}\r\n\tvar i=0\/\/counter variable\r\n\t\/\/we generate a notification every 200 millisecond\r\n\tvar timer =setInterval(function(){\r\n\t noti= new Notification(title,options);\/\/permission is granted, display notification\r\n\t if(i>7){\/\/if the counter is greater than seven\r\n\t clearInterval(timer);\/\/ clear the timer\r\n\t }\r\n\t i++;\r\n\t},200)\r\n\r\n \r\n }\r\n else{\r\n alert(\"permission not granted\");\/\/alert error message : permission is not granted\r\n }\r\n\r\n\r\n}\r\n\t<\/script>\r\n\t<button id=but>\r\n\tSend Notification Now\r\n\t<\/button>\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\n2. Summary<\/h2>\n
3. Download the source code<\/h2>\n