JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>Desktop Notifications</title>
        <style type="text/css">

        </style>
    </head>
    <body>
        <p><strong>Desktop Notifications</strong></p>
        <p>Lets see how the notifications work in this browser.</p>
        <p>
            <a href="#" onclick="checkNotifications(); return false;">Check Notification Support</a>.
            Next <a href="#" onclick="alert('Notifications are ' + ((window.webkitNotifications.checkPermission() == 0) ? '' : 'not ') + 'allowed!'); return false;">Check Notification Permissions</a>
            and if permissions are not there,
            <a href="#" onclick="window.webkitNotifications.requestPermission(); return false;">Request Permissions</a>.
            Create a
            <a href="#" id="text">Simple Notification</a>
            or
            <a href="#" id="html">HTML Notification</a>.
        </p>
    </body>
    <script type="text/javascript">
        
    </script>
</html>

CSS

* {font-family: Verdana, sans-serif;}
body {font-size: 10pt; margin: 0; padding: 0;}
p {margin: 5px;}
a {color: #09f; text-decoration: none;}
a:hover {color: #f00;}

JavaScript

checkNotifications = function() {
    if (window.webkitNotifications) {
        alert("Notifications are supported!");
    } else {
        alert("Notifications are not supported for this Browser/OS version yet.");
    
    }
}

createNotificationInstance = function(options) {
    if (window.webkitNotifications.checkPermission() === 0) { // 0 is PERMISSION_ALLOWED
        if (options.notificationType == 'simple') {
            return window.webkitNotifications.createNotification('icon.png', 'Notification Title', 'Notification content...');
        } else if (options.notificationType == 'html') {
            return window.webkitNotifications.createHTMLNotification('http://localhost/');
        }
    } else {
        window.webkitNotifications.requestPermission();
    }
}

$("#html").click(function() {
    if (window.webkitNotifications.checkPermission() === 0) {
        createNotificationInstance({ notificationType: 'html' });
    } else {
        window.webkitNotifications.requestPermission();
    }
});
$("#text").click(function() {
    if (window.webkitNotifications.checkPermission() === 0) {
        var notification = createNotificationInstance({ notificationType: 'simple' });
        notification.show();
    } else {
        window.webkitNotifications.requestPermission();
    }
});