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.
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
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.
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.
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“.
What's the JAMstack?
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 »