JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<button id=but>
    Send Notification Now
    </button>

JavaScript

window.addEventListener("load", c); // register an eventlistener for web page onload
    function init() {
      var b = document.getElementById("but"); //get the button object
      b.addEventListener("click", noti, false); //register an eventlistener for when user clicks the button
    }
    // function called when the web page has loaded
    function c() {
      init();
      if (window.Notification && Notification.permission !== "granted") { //check to see if notification is granted and notification is supported
        //if it is not supported request permission
        Notification.requestPermission(function(status) {
          if (Notification.permission !== status) {
            Notification.permission = status;
          }
        })
      }
    }
    //function called when button is clicked and shows notification
    function noti() {
      if (Notification.permission == "granted") { //check if we have notification permission
        var title = "Just Testing This App"; //title for notification
        var options = { //options for notification
          body: "it is just a test"

        }
        noti = new Notification(title, options); //permission is granted, display notification

      } else {
        alert("permission not granted"); //alert error message : permission is not granted
      }


    }