<html>
<head>
<title>Notification API Usage - RJM Programming - July, 2022 ... thanks to https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API</title>
<style> td { vertical-align: top; } </style>
<script type='text/javascript'>
var locationsearch='' + location.search;
var pimg=location.search.split('image=')[1] ? decodeURIComponent(location.search.split('image=')[1].split('&')[0]).replace(/\+/g,' ').replace(/\ \ \ /g,' + ') : '';
var sb=location.search.split('scheduledblurb=')[1] ? decodeURIComponent(location.search.split('scheduledblurb=')[1].split('&')[0]).replace(/\+/g,' ').replace(/\ \ \ /g,' + ') : '';
function cronit() {
rwso(" Append with two spaces to get advice regarding ... crontab -e ... for scheduling purposes.");
}
function tmgrit() {
rwso(" Append with two spaces to get Task Manager advice for scheduling purposes.");
}
function dlocal() {
if (document.URL.indexOf('localhost') != -1 && document.URL.indexOf('?via=parenthtml') != -1) {
if (document.URL.indexOf('?via=parenthtmlmacos') != -1) {
document.getElementById('localdiv').innerHTML="<input style='background-color:lightblue;' type=button onclick='cronit();' value='Schedule via crontab advice'></input><br><br>";
document.getElementById('localdiv').style.display='block';
} else if (document.URL.indexOf('?via=parenthtmlwindow') != -1) {
document.getElementById('localdiv').innerHTML="<input style='background-color:lightblue;' type=button onclick='tmgrit();' value='Schedule via Task Manager advice'></input><br><br>";
document.getElementById('localdiv').style.display='block';
}
} else if (document.URL.indexOf('localhost') != -1) {
}
}
</script>
</head>
<body onload='dlocal();'>
<div id=localdiv style='display:none;'></div>
<h2>Notification API Usage</h2>
<h3>RJM Programming <a target=_blank href='//www.rjmprogramming.com.au/HTMLCSS/notifications_ideas.php-----GETME' title='Download this into macOS HTTP://localhost:8888/notifications_ideas.php or Windows HTTP://localhost/notifications_ideas.php (as two MAMP ( at https://mamp.info ) ideas) to start getting Notification Scheduling advice.'>-</a> July, 2022</h3>
<h4>Thanks to <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'>https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API</a></h4><br>
<form method=GET action='./notifications_ideas.html'>
<table border=20 cellspacing=5 cellpadding=5>
<tr><th colspan=2>Notifications</th></tr>
<tr><th>Button Press</th><th>Default</th></tr>
<tr><td>
<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'; }"></input> x <input name=repeats id=repeats type=number min='1' value='9' title='Up to and including' step=1></input> from <input type=number id=ifrom min='0' max='1' step=1 value='0' title='From' readonly></input>
</td><td>
<table border=5 cellspacing=2 cellpadding=2><tr><th colspan=2>Subject and Body Notification</th></tr>
<tr><th>Subject</th><th>Body</th></tr><tr><td style='vertical-align:top;'>
<input placeholder='Make blank to not do.' title='Make blank to not do.' name=subject id=subject type=text value='To do list'></input></td><td style='vertical-align:top;'><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.'>HEY! Your task document.title is now overdue.</textarea>
</td></tr><tr><th colspan=2>Song Notification</th></tr><tr><td colspan=2>
<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'></input>
</td></tr></table>
</td>
</tr>
<tr><td colspan=2><input type=submit name=rerun value='Rerun' style='background-color:yellow;'></input>
<input type=button onclick="rwso('');" value='Regularly While Still Open' style='background-color:orange;'></input>
<iframe scrolling="no" frameborder=0 name=macos id=macos src='HTTP://localhost:8888/notifications_ideas.php?scheduledblurb=&via=parenthtmlmacos&' onload='checkm(this);' style='display:none;width:200px;height:30px;'></iframe>
<input id=locmac style='display:none;background-color:lightblue;' type=button onclick='cronit();' value='Schedule via crontab advice'></input>
<iframe scrolling="no" frameborder=0 name=windows id=windows src='HTTP://localhost/notifications_ideas.php?scheduledblurb=&via=parenthtmlwindows&' onload='checkw(this);' style='display:none;width:200px;height:30px;'></iframe>
<input id=locwin style='display:none;background-color:lightblue;' type=button onclick='tmgrit();' value='Schedule via Task Manager advice'></input>
</td></tr>
</table>
</form>
<br><br><br><hr><br>
<script type='text/javascript'>
// https://www.rjmprogramming.com.au/HTMLCSS/notifications_ideas.html?scheduledblurb=yes%2C%20well!qwxz
var mgs='My Great Song';
var dtbit='HEY! Your task "' + document.title + '" is now overdue.';
var every=-1;
var fromnow=-1, fromfirst;
var everytext='';
var hie='hi=';
var sle='songtext=';
var tdl='To do list';
if (document.URL.indexOf('&repeats=1&subject=&') != -1 && document.URL.indexOf('&songtext=&') != -1) {
sle='hi=';
hie='songtext=';
} else if (document.URL.indexOf('scheduledblurb=') != -1 && document.URL.indexOf('&repeats=') == -1) {
if (pimg != '') {
if (sb == '') {
locationsearch='?image=' + encodeURIComponent(pimg) + '&subject=' + encodeURIComponent(pimg) + '&body=' + encodeURIComponent(pimg);
} else {
locationsearch='?image=' + encodeURIComponent(pimg) + '&subject=' + encodeURIComponent(sb) + '&body=' + encodeURIComponent(sb);
}
tdl='';
dtbit='';
mgs='';
} else {
sle='scheduledblurb=';
hie='scheduledblurb=';
tdl='';
dtbit='';
mgs='';
}
}
console.log('mgs=' + mgs);
console.log('tdl=' + tdl);
console.log('dtbit=' + dtbit);
document.getElementById('body').value=document.getElementById('body').value.replace('document.title', document.title);
var ris=(location.search.split('repeats=')[1] ? Math.max(1,eval('0' + location.search.split('repeats=')[1].split('&')[0])) : 9);
var vsi='[]', comis='';
for (var ii=(location.search.split('repeats=')[1] ? 1 : 0); ii<=ris; ii++) {
vsi=vsi.replace(']', comis + ii + ']');
comis=',';
}
var nondb='<button id=bhi>"' + (location.search.split('hi=')[1] ? decodeURIComponent(location.search.split('hi=')[1].split('&')[0]).replace(/\+/g,' ').replace(/\ \ \ /g,' + ') + ' ..." + ' + vsi : 'Hi! " + ' + vsi) + '</button> ';
if ((location.search.split(hie)[1] ? decodeURIComponent(location.search.split(hie)[1].split('&')[0]).replace(/\+/g,' ').replace(/\ \ \ /g,' + ') : "Hi! ").trim() == '') {
nondb='';
}
document.write(nondb + '<button id="enable" onclick="askNotificationPermission();" style="display:none;">Enable notifications</button>');
var gv=1;
Notification.requestPermission().then(function(result) {
console.log(result);
});
Notification.requestPermission();
if (window.Notification && Notification.permission === "granted") {
gv=gv;
} else {
document.getElementById('enable').style.display='inline-block';
}
function askNotificationPermission() {
// function to actually ask the permissions
function handlePermission(permission) {
// set the button to shown or hidden, depending on what the user answers
if(Notification.permission === 'denied' || Notification.permission === 'default') {
notificationBtn.style.display = 'block';
} else {
notificationBtn.style.display = 'none';
}
}
// Let's check if the browser supports notifications
if (!('Notification' in window)) {
console.log("This browser does not support notifications.");
} else {
if(checkNotificationPromise()) {
Notification.requestPermission()
.then((permission) => {
handlePermission(permission);
})
} else {
Notification.requestPermission(function(permission) {
handlePermission(permission);
});
}
}
}
function checkNotificationPromise() {
try {
Notification.requestPermission().then();
} catch(e) {
return false;
}
return true;
}
const img = locationsearch.split('image=')[1] ? decodeURIComponent(locationsearch.split('image=')[1].split('&')[0]).replace(/\+/g,' ').replace(/\ \ \ /g,' + ') : '//www.rjmprogramming.com.au/MyBusinessUnidad/Welcome_files/logo.jpg';
const text = (locationsearch.split('body=')[1] ? decodeURIComponent(locationsearch.split('body=')[1].split('&')[0]).replace(/\+/g,' ').replace(/\ \ \ /g,' + ') : dtbit);
console.log('text=' + text);
console.log('img=' + img);
if (text.trim() != '' && (locationsearch.split('subject=')[1] ? decodeURIComponent(locationsearch.split('subject=')[1].split('&')[0]).replace(/\+/g,' ').replace(/\ \ \ /g,' + ') : tdl).trim() != '') {
console.log('Text=' + text);
const notification = new Notification((locationsearch.split('subject=')[1] ? decodeURIComponent(locationsearch.split('subject=')[1].split('&')[0]).replace(/\+/g,' ').replace(/\ \ \ /g,' + ') : tdl), { body: text, icon: img });
}
console.log('sle=' + sle);
if ((location.search.split(sle)[1] ? decodeURIComponent(location.search.split(sle)[1].split('&')[0]).replace(/\+/g,' ').replace(/\ \ \ /g,' + ') : mgs).trim() != '') {
const n = new Notification((location.search.split(sle)[1] ? decodeURIComponent(location.search.split(sle)[1].split('&')[0]).replace(/\+/g,' ').replace(/\ \ \ /g,' + ') : mgs));
document.addEventListener('visibilitychange', function() {
if (document.visibilityState === 'visible') {
// The tab has become visible so clear the now-stale Notification.
n.close();
}
});
}
window.addEventListener('load', function () {
const button = document.getElementsByTagName('button')[0];
if (window.self !== window.top) {
// Ensure that if our document is in a frame, we get the user
// to first open it in its own tab or window. Otherwise, it
// won't be able to request permission to send notifications.
button.textContent = "View live result of the example code above";
button.addEventListener('click', () => window.open(location.href));
return;
}
document.getElementById('bhi').addEventListener('click', function () {
// If the user agreed to get notified
// Let's try to send ten notifications
//alert(1);
if (window.Notification && Notification.permission === "granted") {
if ((location.search.split(hie)[1] ? decodeURIComponent(location.search.split(hie)[1].split('&')[0]).replace(/\+/g,' ').replace(/\ \ \ /g,' + ') : "Hi! ").trim() != '') {
//alert(11);
let i = (location.search.split('repeats=')[1] ? 1 : 0);
// Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.
const interval = window.setInterval(function () {
// Thanks to the tag, we should only see the "Hi! 9" notification
const n = new Notification((location.search.split(hie)[1] ? decodeURIComponent(location.search.split(hie)[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')});
if (i++ == (location.search.split('repeats=')[1] ? eval(0 + Math.max(1,eval('0' + location.search.split('repeats=')[1].split('&')[0]))) : 9)) {
window.clearInterval(interval);
}
}, 700);
}
}
// If the user hasn't told if they want to be notified or not
// Note: because of Chrome, we are not sure the permission property
// is set, therefore it's unsafe to check for the "default" value.
else if (window.Notification && Notification.permission !== "denied") {
Notification.requestPermission(function (status) {
// If the user said okay
if (status === "granted") {
if ((location.search.split(hie)[1] ? decodeURIComponent(location.search.split(hie)[1].split('&')[0]).replace(/\+/g,' ').replace(/\ \ \ /g,' + ') : "Hi! ").trim() != '') {
let i = (location.search.split('repeats=')[1] ? 1 : 0);
// Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.
const interval = window.setInterval(function () {
// Thanks to the tag, we should only see the "Hi! 9" notification
const n = new Notification((location.search.split(hie)[1] ? decodeURIComponent(location.search.split(hie)[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')});
if (i++ == (location.search.split('repeats=')[1] ? eval(0 + Math.max(1,eval('0' + location.search.split('repeats=')[1].split('&')[0]))) : 9)) {
window.clearInterval(interval);
}
}, 700);
}
}
// Otherwise, we can fallback to a regular modal alert
else {
alert((location.search.split(hie)[1] ? decodeURIComponent(location.search.split(hie)[1].split('&')[0]).replace(/\+/g,' ').replace(/\ \ \ /g,' + ') + ' ... ' + i : "Hi!"));
}
});
}
// If the user refuses to get notified
else {
// We can fallback to a regular modal alert
alert((location.search.split(hie)[1] ? decodeURIComponent(location.search.split(hie)[1].split('&')[0]).replace(/\+/g,' ').replace(/\ \ \ /g,' + ') + ' ... ' + i : "Hi!"));
}
});
});
if (document.URL.indexOf('&repeats=1&subject=&') != -1 && document.URL.indexOf('&songtext=&') != -1 && 1 == 1) {
setTimeout(woclose,2000); //window.close(); //document.getElementById('bhi').click();
} else if (document.URL.indexOf('scheduledblurb=') != -1 && document.URL.indexOf('&repeats=') == -1 && 1 == 1) {
setTimeout(woclose,2000); //window.close(); //window.open('','_self').close(); //document.getElementById('bhi').click();
}
function woclose() {
window.close();
}
function evstrwso() {
fromfirst='' + new Date();
if (fromfirst.indexOf(':' + ('0' + every).slice(-2) + ':') != -1) {
if (fromnow == -1) {
//document.title=' yes ' + fromfirst + ' ' + every;
setTimeout(evstrwso, 59800);
} else {
//document.title=' Yes ' + fromfirst + ' ' + every;
setTimeout(strwso, fromnow);
}
//window.open('https://www.rjmprogramming.com.au/HTMLCSS/notifications_ideas.html?scheduledblurb=' + encodeURIComponent(everytext), '_blank', 'top=500,left=500,width=200,height=200');
window.open('https://www.rjmprogramming.com.au/HTMLCSS/notifications_ideas.html?scheduledblurb=' + encodeURIComponent(everytext), 'hidepop', 'top=500,left=500,width=200,height=200');
} else {
//document.title=' no ' + fromfirst + ' ' + every;
setTimeout(evstrwso, 59800);
}
}
function strwso() {
setTimeout(strwso, fromnow);
//window.open('https://www.rjmprogramming.com.au/HTMLCSS/notifications_ideas.html?scheduledblurb=' + encodeURIComponent(everytext), '_blank', 'top=500,left=500,width=200,height=200');
window.open('https://www.rjmprogramming.com.au/HTMLCSS/notifications_ideas.html?scheduledblurb=' + encodeURIComponent(everytext), 'hidepop', 'top=500,left=500,width=200,height=200');
}
function rwso(insuff) {
var cfa=false;
everytext=prompt('What text goes onto notification?' + insuff, '');
if (everytext == null) { everytext=''; }
if (everytext.trim() != '') {
var tt=prompt('How often to do in minutes (where + prefix means do it with that exact minute every hour)? Optionally comma separate a starting at minute value', '');
if (tt == null) { tt=''; } else if (tt == '+') { tt=''; }
if (tt.trim().indexOf('+') == 0) {
if ((everytext.trim() + ' ') == everytext) {
cfa=confirm('To do Regularly While Still Open scheduling here, answer OK here. For Windows use Task Manager to perform every ' + eval('' + tt.trim().substring(1)) + ' minutes the URL as shown in the macOS section. For macOS in terminal app you need to add a record into crontab ( via crontab -e ), for scheduling, like ' + eval('' + tt.trim().substring(1)) + ' * * * * open "https://www.rjmprogramming.com.au/HTMLCSS/notifications_ideas.html?scheduledblurb=' + encodeURIComponent(everytext.trim()) + '"');
if (cfa) {
every=eval('' + tt.trim().substring(1));
setTimeout(evstrwso, 59800);
}
} else {
every=eval('' + tt.trim().substring(1));
setTimeout(evstrwso, 59800);
}
} else if (tt.trim().indexOf(',') != -1) {
if ((everytext.trim() + ' ') == everytext) {
var mp=eval(('' + tt.trim()).split(',')[1]);
var ae=eval(('' + tt.trim()).split(',')[0]);
var fp='' + eval(mp % ae);
//alert(eval(eval('' + fp) + eval('' + ae)));
for (var iik=eval(eval('' + fp) + eval('' + ae)); iik<60; iik+=eval('' + ae)) {
fp+=',' + iik;
}
cfa=confirm('To do Regularly While Still Open scheduling here, answer OK here. For Windows use Task Manager to perform every ' + eval(('' + tt.trim()).split(',')[1]) + ' minutes starting at ' + eval(('' + tt.trim()).split(',')[0]) + ' minutes past the URL as shown in the macOS section. For macOS in terminal app you need to add a record into crontab ( via crontab -e at ' + eval(('' + tt.trim()).split(',')[0]) + ' minutes past), for scheduling, like ' + fp + ' * * * * open "https://www.rjmprogramming.com.au/HTMLCSS/notifications_ideas.html?scheduledblurb=' + encodeURIComponent(everytext.trim()) + '"');
if (cfa) {
every=eval('' + tt.trim().substring(1));
setTimeout(evstrwso, 59800);
}
} else {
every=eval(('' + tt.trim()).split(',')[1]);
fromnow=eval(eval(('' + tt.trim()).split(',')[0]) * 60000);
setTimeout(evstrwso, 59800);
}
} else if (tt.trim() != '') {
if ((everytext.trim() + ' ') == everytext) {
cfa=confirm('To do Regularly While Still Open scheduling here, answer OK here. For Windows use Task Manager to perform every ' + eval('' + tt.trim().substring(1)) + ' minutes the URL as shown in the macOS section. For macOS in terminal app you need to add a record into crontab ( via crontab -e), for scheduling, like */' + eval('' + tt.trim().substring(1)) + ' * * * * open "https://www.rjmprogramming.com.au/HTMLCSS/notifications_ideas.html?scheduledblurb=' + encodeURIComponent(everytext.trim()) + '"');
if (cfa) {
every=eval('' + tt.trim().substring(1));
setTimeout(evstrwso, 59800);
}
} else {
fromnow=eval(eval(('' + tt.trim()).split(',')[0]) * 60000);
setTimeout(strwso, fromnow);
}
}
}
}
function checkm(iois) {
var sfsg=false;
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
//alert(11);
if (aconto != null) {
//alert(navigator.platform);
if (iois.src.indexOf('localhost') != -1 && navigator.platform.indexOf("Mac") === 0) { sfsg=true; }
try {
if (aconto.document) { aconto = aconto.document; }
//alert(1111);
if (aconto.body != null) {
//alert(2);
if (aconto.body.innerHTML.indexOf('>') != -1) {
//alert(3);
if (iois.src.indexOf(':8888/') != -1) {
//alert(4);
if (document.URL.indexOf('via=parenthtml') != -1) {
//alert(5);
if (aconto.body.innerHTML.toLowerCase().indexOf('not found') == -1) {
//alert(6);
document.getElementById('macos').style.display='inline-block';
}
} else {
document.getElementById('macos').style.display='inline-block';
}
}
}
}
} catch(exxx) {
if (sfsg) { document.getElementById('locmac').style.display='inline-block'; }
}
}
}
}
function checkw(iois) {
var sfsg=false;
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
//alert(11);
if (aconto != null) {
//alert(111);
if (iois.src.indexOf('localhost') != -1 && navigator.platform.indexOf("Win") === 0) { sfsg=true; }
try {
if (aconto.document) { aconto = aconto.document; }
//alert(1111);
if (aconto.body != null) {
//alert(2);
if (aconto.body.innerHTML.indexOf('>') != -1) {
if (iois.src.indexOf('localhost') != -1) {
if (document.URL.indexOf('via=parenthtml') != -1) {
if (aconto.body.innerHTML.toLowerCase().indexOf('not found') == -1) {
document.getElementById('windows').style.display='inline-block';
}
} else {
document.getElementById('windows').style.display='inline-block';
}
}
}
}
} catch(exx) {
if (sfsg) { document.getElementById('locwin').style.display='inline-block'; }
}
}
}
}
</script>
<iframe name=hidepop id=hidepop style='display:none;' src='//www.rjmprogramming.com.au/About_Us.html'></iframe>
</body>
</html>