{"id":56339,"date":"2022-07-07T03:01:08","date_gmt":"2022-07-06T17:01:08","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56339"},"modified":"2022-07-06T16:09:34","modified_gmt":"2022-07-06T06:09:34","slug":"notification-api-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/notification-api-primer-tutorial\/","title":{"rendered":"Notification API Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/notifications_ideas.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Notification API Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/notifications_ideas.gif\" title=\"Notification API Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Notification API Primer Tutorial<\/p><\/div>\n<p>A lot of us use <a target=_blank title='Notification information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Notification_system'>notifications<\/a> to tell us &#8220;what to do&#8221;, &#8220;where to go<font size=1> (to shop, for instance)<\/font>&#8220;, &#8220;which email has arrived&#8221; etcetera etcetera etcetera.  Notifications can be like SMS, as that instantaneous form of communication &#8230;<\/p>\n<blockquote cite='https:\/\/en.wikipedia.org\/wiki\/Notification_system'><p>\nIn information technology, a notification system is a combination of software and hardware that provides a means of delivering a message to a set of recipients.[1] It commonly shows activity related to an account.[2] Such systems constitute an important aspect of modern Web applications.[3]<br \/>\n<br \/>\nFor example, a notification system can send an e-mail announcing when a computer network will be down for a scheduled maintenance.<br \/>\n<br \/>\nThe complexity of the notification system may vary. Complicated notification systems are used by businesses to reach critical employees.[1] Emergency notification systems may take advantage of modern information technologies. Governments use them to inform people of upcoming danger.[1]<br \/>\n<br \/>\nIn mobile phones and smartphones, dedicated hardware such as a notification LED is sometimes included to deliver messages or notify users\n<\/p><\/blockquote>\n<p> &#8230; and so it goes without saying that a web based <a target=_blank title='Using the Notifications API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Notifications_API\/Using_the_Notifications_API'>Notification API<\/a> is interesting to us <font size=1>&#8230; so we&#8217;d appreciate you not trying to say &#8220;Notiflicrations&#8221; through your Rice Bubbles right now, thanks, if you don&#8217;t mind?!<\/font><\/p>\n<p>You&#8217;ll be getting the gist &#8230;<\/p>\n<ul>\n<li>you need permissions on behalf of your web browser (that you should programmatically ask for, as required)<\/li>\n<li>you may need to allow &#8220;Experimental Javascript functionality&#8221; be accepted on your web browser<\/li>\n<li>it&#8217;s quite likely you need an https: protocol URL happening<\/li>\n<li>not all web browsers will support the API even so, and various media assumptions may not work with that underlying web browser as another issue<\/li>\n<\/ul>\n<p> &#8230; but, be that as it may, it&#8217;s still worth trying this out, especially here on this macOS Google Chrome (Version 103.0.5060.53 (Official Build) (x86_64)) web browser, we reckon.  And yes, thanks again to <a target=_blank title='Using the Notifications API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Notifications_API\/Using_the_Notifications_API'>Using the Notifications API<\/a>, web based notifications can happen &#8230;<\/p>\n<p><code><br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;Notification API Usage - RJM Programming - July, 2022 ... thanks to https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Notifications_API\/Using_the_Notifications_API&lt;\/title&gt;<br \/>\n&lt;style&gt; td { vertical-align: top; } &lt;\/style&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h2&gt;Notification API Usage&lt;\/h2&gt;<br \/>\n&lt;h3&gt;RJM Programming - July, 2022&lt;\/h3&gt;<br \/>\n&lt;h4&gt;Thanks to &lt;a target=_blank title='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Notifications_API\/Using_the_Notifications_API' href='\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Notifications_API\/Using_the_Notifications_API'&gt;https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Notifications_API\/Using_the_Notifications_API&lt;\/a&gt;&lt;\/h4&gt;&lt;br&gt;<br \/>\n&lt;form method=GET action='.\/notifications_ideas.html'&gt;<br \/>\n&lt;table border=20 cellspacing=5 cellpadding=5&gt;<br \/>\n&lt;tr&gt;&lt;th colspan=2&gt;Notifications&lt;\/th&gt;&lt;\/tr&gt;<br \/>\n&lt;tr&gt;&lt;th&gt;Button Press&lt;\/th&gt;&lt;th&gt;Default&lt;\/th&gt;&lt;\/tr&gt;<br \/>\n&lt;tr&gt;&lt;td&gt;<br \/>\n&lt;input style='background-color:rgb(230,230,230);' placeholder='Make blank to not offer.' title='Make blank to not offer.' name=hi id=hi type=text value=\"Hi! \" onblur=\"if (this.value != 'Hi! ') { document.getElementById('ifrom').value='1'; } else {   document.getElementById('ifrom').value='0';   }\"&gt;&lt;\/input&gt; x &lt;input name=repeats id=repeats type=number min='1' value='9' title='Up to and including' step=1&gt;&lt;\/input&gt; from &lt;input type=number id=ifrom min='0' max='1' step=1 value='0' title='From' readonly&gt;&lt;\/input&gt;<br \/>\n&lt;\/td&gt;&lt;td&gt;<br \/>\n&lt;table border=5 cellspacing=2 cellpadding=2&gt;&lt;tr&gt;&lt;th colspan=2&gt;Subject and Body Notification&lt;\/th&gt;&lt;\/tr&gt;<br \/>\n&lt;tr&gt;&lt;th&gt;Subject&lt;\/th&gt;&lt;th&gt;Body&lt;\/th&gt;&lt;\/tr&gt;&lt;tr&gt;&lt;td style='vertical-align:top;'&gt;<br \/>\n&lt;input placeholder='Make blank to not do.' title='Make blank to not do.' name=subject id=subject type=text value='To do list'&gt;&lt;\/input&gt;&lt;\/td&gt;&lt;td style='vertical-align:top;'&gt;&lt;textarea style='background-color:rgb(230,230,230);' title='Make blank to not do.' placeholder='Make blank to not do.' name=body id=body rows=5 cols=60 value='HEY! Your task document.title is now overdue.'&gt;HEY! Your task document.title is now overdue.&lt;\/textarea&gt;<br \/>\n&lt;\/td&gt;&lt;\/tr&gt;&lt;tr&gt;&lt;th colspan=2&gt;Song Notification&lt;\/th&gt;&lt;\/tr&gt;&lt;tr&gt;&lt;td colspan=2&gt;<br \/>\n&lt;input style='width:98%;background-color:rgb(230,230,230);' placeholder='Make blank to not do.' title='Make blank to not do.' name=songtext id=songtext type=text value='My Great Song'&gt;&lt;\/input&gt;<br \/>\n&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;<br \/>\n&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;tr&gt;&lt;td colspan=2&gt;&lt;input type=submit name=rerun value='Rerun' style='background-color:yellow;'&gt;&lt;\/input&gt;&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n&lt;\/table&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;hr&gt;&lt;br&gt;<br \/>\n<br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\ndocument.getElementById('body').value=document.getElementById('body').value.replace('document.title', document.title);<br \/>\nvar ris=(location.search.split('repeats=')[1] ? Math.max(1,eval('0' + location.search.split('repeats=')[1].split('&')[0])) : 9);<br \/>\nvar vsi='[]', comis='';<br \/>\nfor (var ii=(location.search.split('repeats=')[1] ? 1 : 0); ii&lt;=ris; ii++) {<br \/>\n  vsi=vsi.replace(']', comis + ii + ']');<br \/>\n  comis=',';<br \/>\n}<br \/>\nvar nondb='&lt;button id=bhi&gt;\"' + (location.search.split('hi=')[1] ? decodeURIComponent(location.search.split('hi=')[1].split('&')[0]).replace(\/\\+\/g,' ').replace(\/\\ \\ \\ \/g,' + ') + ' ...\" + ' + vsi : 'Hi! \" + ' + vsi) + '&lt;\/button&gt;&amp;nbsp;&amp;nbsp;';<br \/>\nif ((location.search.split('hi=')[1] ? decodeURIComponent(location.search.split('hi=')[1].split('&')[0]).replace(\/\\+\/g,' ').replace(\/\\ \\ \\ \/g,' + ') : \"Hi! \").trim() == '') {<br \/>\n  nondb='';<br \/>\n}<br \/>\ndocument.write(nondb + '&lt;button id=\"enable\" onclick=\"askNotificationPermission();\" style=\"display:none;\"&gt;Enable notifications&lt;\/button&gt;');<br \/>\nvar gv=1;<br \/>\n<br \/>\nNotification.requestPermission().then(function(result) {<br \/>\n  console.log(result);<br \/>\n});<br \/>\n<br \/>\nNotification.requestPermission();<br \/>\n<br \/>\nif (window.Notification && Notification.permission === \"granted\") {<br \/>\n  gv=gv;<br \/>\n} else {<br \/>\n  document.getElementById('enable').style.display='inline-block';<br \/>\n}<br \/>\n<br \/>\nfunction askNotificationPermission() {<br \/>\n  \/\/ function to actually ask the permissions<br \/>\n  function handlePermission(permission) {<br \/>\n    \/\/ set the button to shown or hidden, depending on what the user answers<br \/>\n    if(Notification.permission === 'denied' || Notification.permission === 'default') {<br \/>\n      notificationBtn.style.display = 'block';<br \/>\n    } else {<br \/>\n      notificationBtn.style.display = 'none';<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  \/\/ Let's check if the browser supports notifications<br \/>\n  if (!('Notification' in window)) {<br \/>\n    console.log(\"This browser does not support notifications.\");<br \/>\n  } else {<br \/>\n    if(checkNotificationPromise()) {<br \/>\n      Notification.requestPermission()<br \/>\n      .then((permission) =&gt; {<br \/>\n        handlePermission(permission);<br \/>\n      })<br \/>\n    } else {<br \/>\n      Notification.requestPermission(function(permission) {<br \/>\n        handlePermission(permission);<br \/>\n      });<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction checkNotificationPromise() {<br \/>\n    try {<br \/>\n      Notification.requestPermission().then();<br \/>\n    } catch(e) {<br \/>\n      return false;<br \/>\n    }<br \/>\n<br \/>\n    return true;<br \/>\n  }<br \/>\n<br \/>\nconst img = '\/\/www.rjmprogramming.com.au\/MyBusinessUnidad\/Welcome_files\/logo.jpg';<br \/>\nconst text = (location.search.split('body=')[1] ? decodeURIComponent(location.search.split('body=')[1].split('&')[0]).replace(\/\\+\/g,' ').replace(\/\\ \\ \\ \/g,' + ') : 'HEY! Your task \"' + document.title + '\" is now overdue.');<br \/>\nif (text.trim() != '' && (location.search.split('subject=')[1] ? decodeURIComponent(location.search.split('subject=')[1].split('&')[0]).replace(\/\\+\/g,' ').replace(\/\\ \\ \\ \/g,' + ') : 'To do list').trim() != '') {<br \/>\nconst notification = new Notification((location.search.split('subject=')[1] ? decodeURIComponent(location.search.split('subject=')[1].split('&')[0]).replace(\/\\+\/g,' ').replace(\/\\ \\ \\ \/g,' + ') : 'To do list'), { body: text, icon: img });<br \/>\n}<br \/>\nif ((location.search.split('songtext=')[1] ? decodeURIComponent(location.search.split('songtext=')[1].split('&')[0]).replace(\/\\+\/g,' ').replace(\/\\ \\ \\ \/g,' + ') : 'My Great Song').trim() != '') {<br \/>\nconst n = new Notification((location.search.split('songtext=')[1] ? decodeURIComponent(location.search.split('songtext=')[1].split('&')[0]).replace(\/\\+\/g,' ').replace(\/\\ \\ \\ \/g,' + ') : 'My Great Song'));<br \/>\ndocument.addEventListener('visibilitychange', function() {<br \/>\n  if (document.visibilityState === 'visible') {<br \/>\n    \/\/ The tab has become visible so clear the now-stale Notification.<br \/>\n    n.close();<br \/>\n  }<br \/>\n});<br \/>\n}<br \/>\n<br \/>\nwindow.addEventListener('load', function () {<br \/>\n  const button = document.getElementsByTagName('button')[0];<br \/>\n<br \/>\n  if (window.self !== window.top) {<br \/>\n    \/\/ Ensure that if our document is in a frame, we get the user<br \/>\n    \/\/ to first open it in its own tab or window. Otherwise, it<br \/>\n    \/\/ won't be able to request permission to send notifications.<br \/>\n    button.textContent = \"View live result of the example code above\";<br \/>\n    button.addEventListener('click', () =&gt; window.open(location.href));<br \/>\n    return;<br \/>\n  }<br \/>\n<br \/>\n  document.getElementById('bhi').addEventListener('click', function () {<br \/>\n    \/\/ If the user agreed to get notified<br \/>\n    \/\/ Let's try to send ten notifications<br \/>\n    \/\/alert(1);<br \/>\n    if (window.Notification && Notification.permission === \"granted\") {<br \/>\n      if ((location.search.split('hi=')[1] ? decodeURIComponent(location.search.split('hi=')[1].split('&')[0]).replace(\/\\+\/g,' ').replace(\/\\ \\ \\ \/g,' + ') : \"Hi! \").trim() != '') {<br \/>\n      \/\/alert(11);<br \/>\n      let i = (location.search.split('repeats=')[1] ? 1 : 0);<br \/>\n      \/\/ Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.<br \/>\n      const interval = window.setInterval(function () {<br \/>\n        \/\/ Thanks to the tag, we should only see the \"Hi! 9\" notification<br \/>\n        const n = new Notification((location.search.split('hi=')[1] ? decodeURIComponent(location.search.split('hi=')[1].split('&')[0]).replace(\/\\+\/g,' ').replace(\/\\ \\ \\ \/g,' + ') + ' ... ' + i : \"Hi! \" + i), {tag: (location.search.split('tag=')[1] ? decodeURIComponent(location.search.split('tag=')[1].split('&')[0]).replace(\/\\+\/g,' ').replace(\/\\ \\ \\ \/g,' + ') : 'soManyNotification')});<br \/>\n        if (i++ == (location.search.split('repeats=')[1] ? eval(0 + Math.max(1,eval('0' + location.search.split('repeats=')[1].split('&')[0]))) : 9)) {<br \/>\n          window.clearInterval(interval);<br \/>\n        }<br \/>\n      }, 700);<br \/>\n      }<br \/>\n    }<br \/>\n<br \/>\n    \/\/ If the user hasn't told if they want to be notified or not<br \/>\n    \/\/ Note: because of Chrome, we are not sure the permission property<br \/>\n    \/\/ is set, therefore it's unsafe to check for the \"default\" value.<br \/>\n    else if (window.Notification && Notification.permission !== \"denied\") {<br \/>\n      Notification.requestPermission(function (status) {<br \/>\n        \/\/ If the user said okay<br \/>\n        if (status === \"granted\") {<br \/>\n          if ((location.search.split('hi=')[1] ? decodeURIComponent(location.search.split('hi=')[1].split('&')[0]).replace(\/\\+\/g,' ').replace(\/\\ \\ \\ \/g,' + ') : \"Hi! \").trim() != '') {<br \/>\n          let i = (location.search.split('repeats=')[1] ? 1 : 0);<br \/>\n          \/\/ Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.<br \/>\n          const interval = window.setInterval(function () {<br \/>\n            \/\/ Thanks to the tag, we should only see the \"Hi! 9\" notification<br \/>\n            const n = new Notification((location.search.split('hi=')[1] ? decodeURIComponent(location.search.split('hi=')[1].split('&')[0]).replace(\/\\+\/g,' ').replace(\/\\ \\ \\ \/g,' + ') + ' ... ' + i : \"Hi! \" + i), {tag: (location.search.split('tag=')[1] ? decodeURIComponent(location.search.split('tag=')[1].split('&')[0]).replace(\/\\+\/g,' ').replace(\/\\ \\ \\ \/g,' + ') : 'soManyNotification')});<br \/>\n            if (i++ == (location.search.split('repeats=')[1] ? eval(0 + Math.max(1,eval('0' + location.search.split('repeats=')[1].split('&')[0]))) : 9)) {<br \/>\n              window.clearInterval(interval);<br \/>\n            }<br \/>\n          }, 700);<br \/>\n          }<br \/>\n        }<br \/>\n<br \/>\n        \/\/ Otherwise, we can fallback to a regular modal alert<br \/>\n        else {<br \/>\n          alert((location.search.split('hi=')[1] ? decodeURIComponent(location.search.split('hi=')[1].split('&')[0]).replace(\/\\+\/g,' ').replace(\/\\ \\ \\ \/g,' + ') + ' ... ' + i : \"Hi!\"));<br \/>\n        }<br \/>\n      });<br \/>\n    }<br \/>\n<br \/>\n    \/\/ If the user refuses to get notified<br \/>\n    else {<br \/>\n      \/\/ We can fallback to a regular modal alert<br \/>\n      alert((location.search.split('hi=')[1] ? decodeURIComponent(location.search.split('hi=')[1].split('&')[0]).replace(\/\\+\/g,' ').replace(\/\\ \\ \\ \/g,' + ') + ' ... ' + i : \"Hi!\"));<br \/>\n    }<br \/>\n  });<br \/>\n});<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; used in a &#8220;proof of concept&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/notifications_ideas.html_GETME\">notifications_ideas.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/notifications_ideas.html\" title=\"Click picture\">web Notifying application<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d56339' onclick='var dv=document.getElementById(\"d56339\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/notification\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56339' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A lot of us use notifications to tell us &#8220;what to do&#8221;, &#8220;where to go (to shop, for instance)&#8220;, &#8220;which email has arrived&#8221; etcetera etcetera etcetera. Notifications can be like SMS, as that instantaneous form of communication &#8230; In information &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/notification-api-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[88,1709,520,576,652,846,4020,2791,4022,4021,2976,997,1986,1114,1159,1319,1400,1404],"class_list":["post-56339","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-api","tag-communication","tag-google-chrome","tag-html","tag-javascript","tag-notification","tag-notification-api","tag-notifications","tag-permission","tag-permissions","tag-privacy","tag-programming","tag-proof-of-concept","tag-security","tag-sms","tag-tutorial","tag-web","tag-web-browser"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56339"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=56339"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56339\/revisions"}],"predecessor-version":[{"id":56348,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56339\/revisions\/56348"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=56339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=56339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=56339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}