Using HTML5 Notifications

Introduction

Recently (December 2015) I have noticed a surge in web apps/sites asking permission and using browser based desktop notifications. I thought I would do some investigation in to how it works and how to set it up yourself.

Example notification message from browser

This guide is done in a simplified, step-by-step way that can be used and adapted for your own needs.

1) Check if the Browser Supports Notifications

Check if the current browser supports notifications. You may wish to do this before any further code that could produce unexpected errors on non-supported browsers.

Example

Code Used

function ftn_does_browser_support_notification(elementid)
{
	if (isSupported())
	{
		document.getElementById(elementid).innerHTML="Your Browser is Supported";
	}
	else
	{
		document.getElementById(elementid).innerHTML="Your Browser is NOT Supported";
	}
}

function isSupported() 
{
	if ((!window.Notification && !navigator.mozNotification) || !window.FileReader || !window.history.pushState) {
		return false;	
	}
	return true;
}

2) Ask For Permission

Ask the user to grant or deny permission to use notifications on this website.

Example

Code Used

function ftn_request_permission(elementid)
{
	//check browser is supported...
	if (!isSupported()) {return};
	
	var permission = Notification.requestPermission(function (permission) 
	{
		if (permission == "granted") 
		{	
			document.getElementById(elementid).innerHTML="Permission Granted";
		}
		if (permission == "default")
		{
			document.getElementById(elementid).innerHTML="DEFAULT";
		}
		if (permission == "denied")
		{
			document.getElementById(elementid).innerHTML="Permission Denied. 
Note: you may have to visit your browser settings to reset this setting back to default to continue testing.";
		}
	});	
}

We now know if the browser supports notifications and if the user has granted permission. For the purposes of continuing this demo, we will assume the browser does support notifications and the user has selected to allow them.

It is up to you if you check for support and ask for permission from the user on the page load event or from another UI element that pre-warns the user to expect a request for permission.

3) Display Notification

Send a title, message and icon (optional) and wait for the notification to display. There are a number of events that can be tracked such as onerror, onclick, onshow, onclose.

Example

Code Used

function ftn_display_notification(elementid,seconds,message,title,icon)
{
	document.getElementById(elementid).innerHTML="Start";
	window.setTimeout(function () 
	{
		var instance = new Notification(
			title, {
				body: message,
				icon: icon
			}
		);
		instance.onclick = function () {
			// Something to do
			document.getElementById(elementid).innerHTML="Clicked";
		};
		instance.onerror = function () {
			// Something to do
			document.getElementById(elementid).innerHTML="Error (Have you given permission?)";
		};
		instance.onshow = function () {
			// Something to do
			document.getElementById(elementid).innerHTML="Shown";
		};
		instance.onclose = function () {
			// Something to do
			document.getElementById(elementid).innerHTML="Closed";
		};
	}, seconds*1000);
}

Browser Support

Support is provided by the following browsers:

• Google Chrome
• Safari
• Opera
• Firefox

For the latest list, and relevant version numbers, please check Can I use

Further Uses and Ideas

None at present

Version History

References

MDN > Web technology for developers > Web APIs > Notification