JSFiddle - React, Tailwind, and code Playground

by samc

HTML

<p>
  <label>
    Title:
    <input type="text" id="title">
  </label>
</p>
<p>
  <label>
    Message:
    <input type="text" id="message">
  </label>
</p>
<p>
  <button id="notify-button">Notify</button>
  <button id="req-perm-button">Request permission</button>
</p>

JavaScript

function sendNotification(title, opts) {
    return new Promise(function (reject, resolve) {
        // Can only send a notification if the browser
        // supports the notification API
        if (!('Notification' in window)) {
            resolve(false);
        } else if (Notification.permission === 'granted') {
            resolve(new Notification(title, opts));
        } else if (Notification.permission !== 'denied') {
            // The spec has changed this to a Promise based API:
            // Notification.requestPermission().then(...
            // but for Safari support the callback version is
            // currently needed so use that for now.
            Notification.requestPermission(
                resolve.bind(sendNotification.bind(title, opts)));
        } else {
            resolve(false)
        }
    });
}

var notifyButton = document.getElementById('notify-button');
var reqPermButton = document.getElementById('req-perm-button');
var message = document.getElementById('message');
var title = document.getElementById('title');

notifyButton.addEventListener('click', function () {
	sendNotification(title.val)
});