{"id":642,"date":"2014-10-22T15:37:15","date_gmt":"2014-10-22T10:07:15","guid":{"rendered":"http:\/\/codeforgeek.com\/?p=642"},"modified":"2021-06-20T06:04:22","modified_gmt":"2021-06-20T00:34:22","slug":"desktop-notification-like-facebook-using-html5","status":"publish","type":"post","link":"https:\/\/codeforgeek.com\/desktop-notification-like-facebook-using-html5\/","title":{"rendered":"Desktop Notification Like Gmail using HTML5"},"content":{"rendered":"<p>Desktop notification is a way to notify user about important events even if the browser or tab is inactive or minimized. This increase the user experience and also keeps the user engage with your applications.<\/p>\n<p>In this tutorial i am going to show you how to develop Desktop notification system using core HTML5 and <a href=\"https:\/\/codeforgeek.com\/js\/\" title=\"JavaScript Tutorials\">JavaScript<\/a>.<br \/>\n<center><a class=\"button-rounded button-flat-caution\" href=\"http:\/\/demo.codeforgeek.com\/notification\/\" title=\"Demo of HTML5 notification\" target=\"_blank\" rel=\"noopener\"><i class=\"fa fa-code\"><\/i>LIVE DEMO<\/a> <a class=\"button-rounded button-flat\" href=\"https:\/\/codeload.github.com\/shaikh-shahid\/html5-notification\/zip\/master\" target=\"_blank\" rel=\"noopener\"><i class=\"fa fa-github\"><\/i>DOWNLOAD<\/a><\/center><\/p>\n<p>Some famous applications already using Desktop notification like Gmail using it to notify new email received. <a href=\"https:\/\/codeforgeek.com\/facebook-login-using-nodejs-express\/\" title=\"Facebook login using nodejs and express\">Facebook <\/a>use it for notifying user about any activity such as if any one commented on your post it or like it. <\/p>\n<blockquote><p>Note : Facebook have Desktop notification as well as internal notification system which works in the facebook tab only. Don\u2019t mix both of them, they are different.<\/p><\/blockquote>\n<h2>Design:<\/h2>\n<p>I have developed a Desktop notification which look like this. In this we have option to put icon, title and body text.<br \/>\n<center><img decoding=\"async\" src=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/notification.png\" alt=\"notification\" width=\"364\" height=\"83\" class=\"aligncenter size-full wp-image-652\" style=\"border:1px solid black;\" srcset=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/notification.png 364w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/notification-300x68.png 300w\" sizes=\"(max-width: 364px) 100vw, 364px\" \/><\/center><\/p>\n<h2>Code:<\/h2>\n<p>Creating a Desktop notification is as easy as the line of code shown below.<br \/>\n<code lang=\"javascript\">var notification = new Notification(\"I am Desktop Notification\");<\/code><br \/>\nYou can pass arguments to Notification function and they are as follows:<\/p>\n<ul>\n<li><strong>title<\/strong>: \tTitle of notification<\/li>\n<li><strong>body<\/strong>:  \tContent of Notification.<\/li>\n<li><strong>icon<\/strong>:\tIcon path (URL,image or blank).<\/li>\n<li><strong>tag <\/strong>:\tID of notification.<\/li>\n<li><strong>dir<\/strong>: \tDirection of Text. (left,right,auto)<\/li>\n<\/ul>\n<p>Complete JavaScript code:<br \/>\n<code lang=\"javascript\"><br \/>\n<script>\nfunction notifyMe() {\n  if (!(\"Notification\" in window)) {\n    alert(\"This browser does not support desktop notification\");\n  }\n  else if (Notification.permission === \"granted\") {\n     \tvar options = {\n              \tbody: \"This is the body of the notification\",\n              \ticon: \"icon.jpg\",\n              \tdir : \"ltr\"\n         \t };\n          var notification = new Notification(\"Hi there\",options);\n  }\n  else if (Notification.permission !== 'denied') {\n    Notification.requestPermission(function (permission) {\n      if (!('permission' in Notification)) {\n        Notification.permission = permission;\n      }<\/p>\n<p>      if (permission === \"granted\") {\n        var options = {\n              body: \"This is the body of the notification\",\n              icon: \"icon.jpg\",\n              dir : \"ltr\"\n          };\n        var notification = new Notification(\"Hi there\",options);\n      }\n    });\n  }\n}\n<\/script><br \/>\n<\/code><br \/>\nTo trigger a Desktop notification, here is a HTML code. Put this under &lt;body&gt; tag.<br \/>\n<code lang=\"html\"><br \/>\n<button onclick=\"notifyMe()\">Notify me!<\/button><br \/>\n<\/code><\/p>\n<h2>Explanation:<\/h2>\n<p>if you look over the JavaScript code then you might notice that code runs after doing some important validation. Those validations are performed in order to ensure that application using Desktop notification runs under the sandbox defined by browser.<\/p>\n<p><strong>Step 1<\/strong>: Checking whether browser support Desktop notification or not.<\/p>\n<p><strong>Step 2<\/strong>: Checking if permission is already granted (means it is not a first visit.), if it is then show  the notification.<\/p>\n<p><strong>Step 3<\/strong>: Checking if permission is not \u201cdenied\u201d by user externally, then requesting browser to confirm the permission.<br \/>\n<code lang=\"javascript\"><br \/>\n    Notification.requestPermission(function (permission) {<br \/>\n      if (!('permission' in Notification)) {<br \/>\n        Notification.permission = permission;<br \/>\n      }<br \/>\n<\/code><br \/>\n<strong>Step 4<\/strong>: If user allow the permission then we will show the notification else not.<\/p>\n<h2>Running the code:<\/h2>\n<p>You can download the code by provided link and make sure you run it by Web Server. If you will directly run it like static HTML then you will probably not get the output. Place it in HTDOCS folder and access it via URL.<\/p>\n<p>Once you will click on the button, Browser will ask you for permission. Allow it and then see the output on bottom-right of Desktop.<br \/>\n<center><img decoding=\"async\" src=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/permission.png\" alt=\"permission\" width=\"565\" height=\"76\" class=\"aligncenter size-full wp-image-656\" style=\"border:1px solid black;\" srcset=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/permission.png 565w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/permission-300x40.png 300w\" sizes=\"(max-width: 565px) 100vw, 565px\" \/><\/center><\/p>\n<h2>Further Reading:<\/h2>\n<p>Example above is static. You have to click a button and it will show you the notification. Real time application need more than this. So let\u2019s discuss one real time example with Desktop notification.<\/p>\n<p>For example you are building an <strong>email<\/strong> reader app by having <a href=\"https:\/\/codeforgeek.com\/nodejs\/\" title=\"Nodejs Posts\">Node<\/a> as backend and <a href=\"https:\/\/codeforgeek.com\/angularjs-tutorial\/\" title=\"Angular JS Tutorial\">angular <\/a>as front-end. You have timer job running which checks for arrival of new emails in database. You can use Notification in real time app like the one shown below.<\/p>\n<p><code lang=\"javascript\"><\/p>\n<p>var app=angular.module(\u2018show_new_mail\u2019,[])<br \/>\n.controller('email_control',function($scope,$interval,$http){<br \/>\n      var timer=$interval(function(){<\/p>\n<p>       $http.post(\u201cAPI to check new emails\u201d,function(data){<br \/>\n                \/\/just assuming that data consist of every parameter we used below.<br \/>\n               \/\/Also desktop notification is enabled in setting of app.<br \/>\n                if(data.new==1)<br \/>\n               {<br \/>\n                         var options = {<br \/>\n              body: data.email.excerpt,<br \/>\n            \t  icon: \"icon.jpg\",<br \/>\n                          dir : \"ltr\"<br \/>\n                   \t};<br \/>\n                       var notification = new Notification(data.email.title,options);<br \/>\n                       \/\/onclick do some action, like redirect or new window<br \/>\n\t\tnotification.onclick=function(){<br \/>\n};<br \/>\n\/\/on display of notification do some action like play sound<br \/>\nnotification.onshow=function(){<br \/>\n};<br \/>\n               }<\/p>\n<p>       });<\/p>\n<p>      },100);<br \/>\n});<br \/>\n<\/code><\/p>\n<p>You can see the complete specification <a href=\"https:\/\/notifications.spec.whatwg.org\" title=\"HTML5 notification documentation\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Desktop notification is a way to notify user about important events even if the browser or tab is inactive or minimized. This increase the user experience and also keeps the user engage with your applications. In this tutorial i am going to show you how to develop Desktop notification system using core HTML5 and JavaScript. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":665,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_surecart_dashboard_logo_width":"180px","_surecart_dashboard_show_logo":true,"_surecart_dashboard_navigation_orders":true,"_surecart_dashboard_navigation_invoices":true,"_surecart_dashboard_navigation_subscriptions":true,"_surecart_dashboard_navigation_downloads":true,"_surecart_dashboard_navigation_billing":true,"_surecart_dashboard_navigation_account":true,"_uag_custom_page_level_css":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-642","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial"],"blocksy_meta":[],"uagb_featured_image_src":{"full":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner3.png",880,400,false],"thumbnail":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner3-150x150.png",150,150,true],"medium":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner3-300x136.png",300,136,true],"medium_large":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner3-768x349.png",768,349,true],"large":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner3.png",880,400,false],"1536x1536":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner3.png",880,400,false],"2048x2048":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/10\/banner3.png",880,400,false]},"uagb_author_info":{"display_name":"Shahid","author_link":"https:\/\/codeforgeek.com\/author\/shahid\/"},"uagb_comment_info":0,"uagb_excerpt":"Desktop notification is a way to notify user about important events even if the browser or tab is inactive or minimized. This increase the user experience and also keeps the user engage with your applications. In this tutorial i am going to show you how to develop Desktop notification system using core HTML5 and JavaScript.&hellip;","_links":{"self":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts\/642","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/comments?post=642"}],"version-history":[{"count":0,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts\/642\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/media\/665"}],"wp:attachment":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/media?parent=642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/categories?post=642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/tags?post=642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}