JSFiddle - React, Tailwind, and code Playground

by netsi1964

HTML

<script src="https://rawgithub.com/auchenberg/WebNotification.js/master/WebNotification.js"></script>
<link rel="stylesheet" href="bootswatch.com/cyborg/bootstrap.min.css">
<div class="container">
    <div class="row">
<button class="span3 request">Request permissions</button>
<button class="span3 show" data-message="A non-delayed message">Show notification</button>
<button class="span3 show" data-message="A delayed message" data-delay="5000">Show notification Delayed</button>
    </div>
<div class="span12">
    If you want to see that a webpage can send OS notifications even when the webapp is not the active tab, click the <code>Show notification Delayed</code>. Click it and then click another tab. 5 seconds after you have clicked the notification will come.</div>
</div>

JavaScript

// Using https://rawgithub.com/auchenberg/WebNotification.js/master/WebNotification.js as a external lib.

$(function() {
    
    $('.request').on('click', function() {
        window.Notification.requestPermission(function() {
            alert('Permissions state: ' + window.Notification.permission);
        });
    });
    
    $('.show').on('click', function() {
        var $this = jQuery(this);
        var sMessage = $this.data('message');
        var iDelay = $this.data('delay')||0;
        showNotification(sMessage, iDelay);
    });    
   
})

function showNotification(sMessage, iDelay) {
    window.setTimeout(function() {
      if(window.Notification.permission !== 'granted') {
         alert('Permissions hasnt been granted');
      }        
     new window.Notification(sMessage);  
   }, iDelay)
}