Using Javascript to create a notification

Published

Nowadays notifications are pretty much built-in every single Operating System with your browser relying on them to pass through. They’ve got pretty good support but because of rampant abuse in the past or personal preference, users might just turn them down and never see them. Be careful to follow a proper flow to prompt for notifications or you’ll get in trouble: Google Chrome is now starting to deny permission for apps that ask for notification permission when no user action has been taken.

How do I ask for permission to show notifications?

Everything related to notifications is accessible through the Notification object which can be accessed itself as a global object:

// As a member of the global Window object
window.Notification;

// Or as a global object itself
Notification;

For those of you using Typescript, make sure your configuration features the DOM library like so:

{
	"compilerOptions": {
		"lib": ["DOM"]
	}
}

As explained in the introduction, you’ll want to prompt an action from your user to ask for permission to show notifications before doing anything else.

<button onclick="askForPermission()">Send me notifications</button>

<script>
	async function askForPermission() {
		const permission = await Notification.requestPermission();
		if (permission === 'denied') {
			console.log('Permission was denied');
		} else if (permission === 'granted') {
			console.log('Permission was given');
		}
	}
</script>

If at any later point you want to know if you have this permission, you can just access the Notification.permission property and check its value.

const permission = Notification.permission;
// or via destructuring
const { permission } = Notification;
if (permission === 'granted') {
	// permission is granted here
}

if (permission === 'denied') {
	// permission is denied here
}

if (permission === 'default') {
	// User has not given his permission yet. This will behave the same as denied
}

As the property is a string and not a boolean, you might want to have something cleaner and more meaningful like this:

const hasPermission = Notification.permission === 'granted';

if (hasPermission) {
	console.log('We have the permission');
}

Creating a notification

Good news, getting the permission to show the notification was the hard part of the job! Now we can easily create one by using the Notification constructor:

const notification = new Notification("This is the notification's title", {
	body: "We're notifying you of a notification",
	icon: '/favicon.png'
});

As long as your user has given his permission, your notification will show up, including an icon. Just like regular alerts, security concerns mean you are limited in how much you can style them. For example, you can’t remove the Google icon from a notification sent from a website accessed with Google Chome.

These plug and play notifications are limited in scope and features. If you want to add custom actions or support for mobile browsers, you’ll need to add a Service Worker.

I’ve put together a custom notification form, so you can try and send yourself notifications, using Javascript Nexus as the sender so check it out:

Permission undefined

Don’t forget that you can reset permissions given or denied at any point. In Google Chrome, you just need to click on the icon found in your URL navigation bar.

#events#crossplatform