Web Tools #557 - App Badges, SVG Tools, Databases, Uncats

Here's an interesting Web API that you may not have heard of yet: the Badging API. As the name suggests, this API is used to allow apps to push notification badges onto an app's icon, to indicate something is available.

A popular example of this is mobile devices that indicate unread messages or other notifications using a small number. Below is a screenshot from iOS with two apps using this type of badge.

Of course, many users find these types of notifications annoying and are part of the endless notifications problem we have on our devices nowadays. But as developers, it's good to know the web platform now has a similar feature for use with web apps.

The code to use the Badging API looks something like the following:

There's two primary methods used in the code above: setAppBadge() and clearAppBadge(). When setting the badge, you can pass in a single parameter representing the contents you want to display. The contents can be any number, and the badge will ignore any decimal values, displaying only the integer (it apparently won't do any rounding).

When clearing the badge, no parameter is passed; the icon is instantly cleared of its badge. You can also clear the badge by passing in a value of "0" when setting the badge. If the setAppBadge() method is used without a parameter, the app icon will display a badge without a value (this is different from a value of "0").

Currently the Badging API is supported on Chrome and Edge for Windows and Mac and on Safari for Mac and iOS. In all cases, the API needs to be used on a web app that is installed on the user's system (e.g. a PWA or installed on the home screen on iOS).

The Chrome team has put together a nice writeup on the Badging API that includes a link to an excellent live demo where you can see it in action.

ine-height:0px;">

Try it out on a supporting browser by installing the app then using the controls on the page to change the badge value. Try setting the value to "0". Take note of the behaviour of the app icon (in the taskbar, on your home screen, etc., depending on which device you're testing).

There isn't much else to discuss about the syntax for the API. The two methods are the only part of the syntax. Of course, setting up an installable app is a much larger job, so this small API can be viewed as one part of that process.

Of course, you'll want to use this sparingly knowing that many users don't want these kinds of notifications. When I ran the Chrome demo, my browser asked me if I wanted the Badging API to be used on the page. So it's good that it requires permissions that can later be revoked if needed.

Now on to this week's tools!