iOS-like Notification Count Badges Coming to Progressive Web Apps (PWA)

There is a lot of work  happening around Progressive Web Apps or PWAs. These are websites that you can “install” to launch in an app-like window on Windows MacOS and Chrome OS.

Along with the ability to “install”, these apps come with additional features like push notifications and offline capabilities.

We already know that Google is working on adding notification support to PWAs. However, a new code commit that I spotted today talks about adding notification count to these “badges”.

This is a huge improvement from the current plan to show a simple “dot” when a notification is available. When ready, this will look similar to those notification counts that iOS users appreciate and enjoy.

Here is the code change request:

Adds support for setting numeric badges on Windows and OSX.

Spec Draft:

In previous CLs, support for setting “•” badge
was added. This CL updates the mojo interface
to pass an optional numeric value through from the
render process to display on the badge (falling
back to the “•” when no number is specified).


Do check out that Spec Draft mentioned in that commit log. Here is the official definition of this feature from document:

This specification defines an API allowing web applications to set an application-wide badge, shown in an operating-system-specific place associated with the application (such as the shelf or home screen), for the purpose of notifying the user when the state of the application has changed (e.g., when new messages have arrived), without showing a more heavyweight notification.

, the bug that is associated with this change is a treasure trove of information and design drafts.

If you are a developer, here is the Google design document for this project.

The idea that you can write one web app and have it installed on multiple platforms, with offline storage, push notifications and notification badges, sounds very attractive to me. What about you?

Leave a ReplyCancel reply

Discover more from Chrome Story

Subscribe now to keep reading and get access to the full archive.

Continue Reading