<h1>Notifications API Demo</h1>

<p>A demo of the notifications API</p>

<input type="text" size="20" placeholder="Type Something Here!">

<br /><br />

<button>Show a demo notification</button>
var button = document.querySelector('button');
var input = document.querySelector('input');
var notify = function() {
	var options = {
		body: input.value,
		icon: 'https://jws.dev/logo.png',
		tag: 'foo',
		type: 'basic'
	};
	var n = new Notification('Joe\'s notification api demo! :)', options);
	n.onclick = function() {
		console.log('Clicked.');
	};
	n.onclose = function() {
		console.log('Closed.');
	};
	n.onshow = function() {
		console.log('Shown.');
	};
};
button.onclick = function() {
	if (!('Notification' in window)) {
		alert('This browser does not support desktop notification');
	} else if (Notification.permission === 'granted') {
		notify();
	} else if (Notification.permission !== 'denied') {
		Notification.requestPermission(function(permission) {
			if (!('permission' in Notification)) {
				Notification.permission = permission;
			}
			if (permission === 'granted') {
				notify();
			}
		});
	}
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.