Our WorkAbout UsOur ApproachThe Journal
Contact »
« Back to the journal
Frontend Development + PHP, Javascript & React

An intro into the Javascript Notification API

By:

Nick Stewart
Nick Stewart

on 5/31/2019

What It Is

The Notification API allows a website (or app) to send “notifications that are displayed outside the page at the system level“. This allows you to send notifications up to a user’s OS without having to do much work.

Browser Support

Support for the Notification API is how you would expect it, with the latest versions of Edge, Firefox, Safari, and Chrome supporting it and with IE 11 not. Also to note, mobile Safari does not support it and the Webview version of Chrome needs the prefix (regular Chrome for Android works perfectly however). You can view the full support here.

How to Use

mobile_support.png

Before you can send a notification to a user, you have to request permission from the user first. Notification.permission has three values – denied, granted, and default. In this example, I’m first checking if the browser supports it and then I’m checking to see if the user has already granted me permission. If not, I go ahead and request it.

After requesting (and hopefully getting) permission, you can send a notification.

Benefits

The Notification API allows you to send notifications up to the user and not have to worry about styling, how they are handled, etc.. since the user’s system handles it. This cuts out on development time if you were going to develop your own notification system in your application. The API itself is very simple and easy to use.

Downsides

The Notification API is not as robust as the Push API and doesn’t support many of things that make the Push API more prefered. For instance, with the Push API you could have a server send a website a website a notification and it would appear “whether or not the web app is in the foreground, or even currently loaded, on a user agent“.

Share to

Related Posts

Frontend Development
Custom Bootstrap Shortcodes for WordPress

By: Natalie Miller on 6/27/2017

Bootstrap shortcodes are a quick way to make your WordPress content more dynamic.

Read More »
Tips for creating a Canvas game for Android

By:Nick Stewart on 8/9/2017

With the help of our excellent illustrator Pat, we will soon be releasing Face Paint Peggy, an HTML Canvas game for Android mobile phones. The object of the game is to catch “drops” that are of a certain color, progressing through levels where drops move faster and more drops are on the playing field.

Read More »