JSFiddle - React, Tailwind, and code Playground

notifications

by SHELDON PASCIAK

HTML

<button>Notify me!</button>

JavaScript

function notifyMe(theNotificationMessage, appTagName) {

        if (typeof appTagName == "undefined") appTagName = Date.now();

        // If the user agreed to get notified
        // Let's try to send ten notifications
        if (window.Notification && Notification.permission === "granted") {
            var i = 0;
            // Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.
            var interval = window.setInterval(function() {
                // Thanks to the tag, we should only see the "Hi! 9" notification 
                var n = new Notification(theNotificationMessage + "  " + i, {
                    tag: appTagName
                });
                if (i++ == 0) {
                    window.clearInterval(interval);
                }
            }, 255);
        }

        // If the user hasn't told if he wants 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") {
                    var i = 0;
                    // Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.
                    var interval = window.setInterval(function() {
                        // Thanks to the tag, we should only see the "Hi! 9" notification 
                        var n = new Notification(theNotificationMessage + "  " + i, {
                            tag: appTagName
                        });
                        if (i++ == 0) {
                            window.clearInterval(interval);
                        }
                    }, 255);
                }

        ...