Progressier is fully compatible with the Badging API, which allows to display a badge on an installed PWA. A badge is automatically shown when possible when a notification is received.

Android

A badge is automatically displayed on an installed PWA when a notification links to a URL that's in scope of the PWA. Note that different devices may have settings preventing the badge from appearing (see Samsung or Google Pixel).

macOS/Windows/Chrome OS

Progressier displays a badge from its service worker whenever possible. However, note that although desktop Chrome officially supports the Badging API, it has little practical support: badges can only be shown when a PWA is actively open.

iOS

iOS supports the Badging API with iOS 16.4 or later.

Using the Badging API outside of push notifications

If you'd like to use the Badging API for other use cases, the API is very simple to use. Simply call the following in your code:

if ('setAppBadge' in navigator){
  const unread = 30; 
  navigator.setAppBadge(unread);
}

You can also call the function without a number to display a badge not containing a count:

if ('setAppBadge' in navigator){
  navigator.setAppBadge();
}