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

Websites
What's the JAMstack?

By:Alec Robertson

As a front-end developer in 2020, it is time that I fulfill the FEDeral mandate that I publish words regarding the JAMStack. If you follow too many developers on Twitter, it’s likely you’ve heard about the Next Big Thing in web development, but I’d like to put this trend (fad? movement?) into context to better understand what’s truly new about this approach and whether it’s worth using.

Read More »
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 »