JSFiddle - React, Tailwind, and code Playground

by codef0rmer

HTML

Webkit-only. <input type="button" id="grant" value="Grant"> the permissions first.<br>
<input type="button" id="test" value="Open notification" disabled>
<input type="button" id="kill" value="Kill notifications queue">

CSS

input{padding:5px;}
#kill:not(.show){display:none}

JavaScript

//webkit Notification in Chrome

var test = document.getElementById('test'),
    grant = document.getElementById('grant'),
    kill = document.getElementById('kill');
function granting() {
    if (webkitNotifications.checkPermission() != 0) {
        webkitNotifications.requestPermission();
    } else {
        test.disabled = false;
        grant.disabled = true;
    }
}
grant.onclick = granting;

var repeat_times = 10;
var repeated = 0;
var note;
kill.onclick = window.onunload = function() {
    repeated = repeat_times;
    note && note.cancel();
};

test.onclick = function repeat() {
    if (note) note.cancel();
    else {
        note = webkitNotifications.createNotification('/favicon.ico', 'Title', 'This box will show up another ' + (repeat_times - repeated) + ' times.');
        note.onclose = function() {
            note = null;
            if (repeated++ < repeat_times) {
                repeat();
            } else {
                repeated = 0;
                kill.className = '';
            }
        };
        note.show();
        kill.className = 'show';
    }
};