Add "badge notification" for progressive web application (PWA)

Question

I'm developing a progressive web application (PWA) that will eventually send notifications to users.

I already know that I'm able to send push notifications (like in any regular app), as explained in the following blog post: https://developers.google.com/web/fundamentals/getting-started/codelabs/push-notifications/?hl=en-us.

However, after having the app in home screen, I would like to add a "hint" to user, letting him know that he has to access the application. A great way to do that is doing something like a "badge notification" (as showed in whatsapp icon on the image below).

Similar badge notification on the Whatsapp icon

Is it possible to add this kind of behavior using progressive web applications?

Answer 1

I believe what you're looking for is the Badging API.

To use the Badging API you can do something like

if('setAppBadge' in navigator && 'clearAppBadge' in navigator){
  // set badge
  navigator.setAppBadge(badgeCount).catch(error => {
    // handle error
  });

  // remove badge
  navigator.clearAppBadge().catch(error => {
  // handle error
  });
}

Plus, it makes more sense to use it with the Web Periodic Background Synchronization API.

Support

The Badging API is currently supported on Android's Chrome & Samsung Internet Browser and partially supported on Desktop's Chrome & Edge.