JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<button class="btn-perm">Request Permission</button>
<button class="btn-notify">Send Notification</button>

JavaScript

let btnPermissionRequest = document.querySelector(".btn-perm"),
btnNotify = document.querySelector(".btn-notify")

btnPermissionRequest.addEventListener("click", function(e) {
  e.preventDefault()

  /* Check if Notifications are supported */
  if (!window.Notification) {
    alert("Notifications are not suppored.")
  } else {
    /* 
      @callback: p is for if notification permissions are enabled or disabled
    */
    Notification.requestPermission(function(p) {
      if (p === "denied") {
        alert("You have disabled notifications.")
      }
      if (p === "granted") {
        alert("You have enabled notifications.")
      }
      console.log(p)
    })
  }

  // Simulate an event
  btnNotify.addEventListener("click", function(e) {
    e.preventDefault()

    var notify

    if (Notification.permission === "denied") {
      alert("Please allow notifications.")
    } else {
      notify = new Notification("New message from Codye", {
        body: "Ayyyyyyyyyy! How you doin'?",
        icon: "http://cdn.safetyskills.com/wp-content/themes/safetyskills/apple-icon-72x72.png",
        tag: "1234"
      })

      notify.onclick = function() {
        window.location = "?message=" + this.tag
        console.log(this.tag)
      }
    }
  })
})