The App Badging API allows your Progressive Web App to display an unread counter directly on its home screen icon. Test it below to see it live, and get the JavaScript needed to add it to your PWA.
To see the badge natively on your device or browser tab, install this PWA first.
Set a number below to invoke navigator.setAppBadge(). If supported, you will see the badge update in the visual preview above and on your actual installed app icon.
Depending on how you want unread counts to behave, app badges can be updated using different synchronization strategies with Progressier:
The badge automatically tracks active notifications. It updates based on items currently waiting in the device tray and clears out when the user opens the app.
A simple notification dot or indicator appears whenever a new alert comes in, clearing automatically as soon as the app is launched.
You have total programmatic control. The app relies entirely on custom code like navigator.setAppBadge() to explicitly define and clear unread numbers.
The App Badging API is a web standard that allows installed Progressive Web Apps to set an application-wide badge. This typically appears as a small red bubble with an unread count on the app's icon on the user's home screen, dock, or taskbar. Yes, your PWA will behave exactly like native mobile apps!
Currently, the Badging API is supported on Chromium-based browsers (Chrome, Edge, Opera) on Android, Windows, and macOS. It is also supported on iOS and iPadOS Safari (16.4+), provided the PWA is added to the user's Home Screen.
Depending on the specific Android version, manufacturer launcher (like Samsung One UI or Pixel Launcher), and user settings, the operating system may choose to render a simple notification dot or marker instead of a numeric count on the icon badge.
Yes! The true power of the Badging API is using it inside your Service Worker. When a user receives a background push notification, your service worker can call navigator.setAppBadge(count) to update the icon even if the user doesn't have the web app open.
With Progressier, your unread app badges automatically sync with your push notifications.
Generate PWA See plans