DEV Community

Cover image for PWA Badge
Ali Torki
Ali Torki

Posted on • Updated on

PWA Badge

The App Badge API allows installed web apps to set an application-wide badge,
shown in an operating-system-specific place associated with the application
(such as the shelf or home screen).

Badges tend to be more user-friendly than notifications and can be updated with
a much higher frequency since they don't interrupt the user. And, because they
don't interrupt the user, they don't need the user's permission.

Keep in mind that to display the Badge count, Your PWA application should be installed on your device.

Possible use cases

Examples of sites that may use this Library includes:

  • Chat, email, and social apps, to signal that new messages have arrived, or to show the number of unread items.
  • Productivity apps, to signal that a long-running background task (such as rendering an image or video) has completed.
  • Games, to signal that a player action is required (e.g., in Chess, when it is the player's turn).

Usage

npm install --save pwa-badge
Enter fullscreen mode Exit fullscreen mode

The Badge API consists of five methods:

  • isSupported() Check if the User's browser supports the Feature, and returns a boolean value that represents the Status of supporting.
  • syncSetBadge(unreadCount) Removes app's badge Synchronously. If a value is provided, set the badge to the provided value otherwise, display a plain white dot (or other flags as appropriate to the platform). Setting number to 0 is the same as calling syncClearBadge() or asyncClearBadge().
  • syncClearBadge() Removes app's badge Synchronously.
  • asyncSetBadge(unreadCount) This API is the same as syncSetBadge() but returns an empty Promise for error handling.
  • asyncClearBadge() Removes app's badge Asynchronously and returns an empty Promise for error handling.

Sync Set and Clear Badge

import PWABadge from 'pwa-badge';

// Create an Instance
const badge = new PWABadge();

// Set Badge unreadCount
badge.syncSetBadge(1);

// Clear Badge unreadCount
badge.syncClearBadge();
Enter fullscreen mode Exit fullscreen mode

Result:

  • MacOS PWA Badge
  • Windows: PWA Badge

Async Set and Clear Badge

asyncSetBadge() and asyncClearBadge() return empty promises you can
use for error handling.

import PWABadge from 'pwa-badge';

// Create an Instance
const badge = new PWABadge();

// Set Badge unreadCount
badge
  .asyncSetBadge(1)
  .then(() => {
    // Badge count has shown as well
  })
  .catch((e) => {
    // The Browser not supporting the Badge feature or something went wrong
  });

// Clear Badge unreadCount
badge
  .asyncClearBadge()
  .then(() => {
    // Badge count has disappeared
  })
  .catch((e) => {
    // The Browser not supporting the Badge feature or something went wrong
  });
Enter fullscreen mode Exit fullscreen mode

Check Browser supports the Badge API

TL;DR isSupported() method function is util for informing your users that
this feature supports by their Browser or OS and the pwa-badge library
set and clear the Badge count safely, and you can avoid using
isSupported() before calling the set or clear methods.

import PWABadge from 'pwa-badge';

// Create an Instance
const badge = new PWABadge();

if (badge.isSupported()) {
  // Hoora!, Supports the Badge feature
} else {
  // Does not supports
}
Enter fullscreen mode Exit fullscreen mode

For supporting me, Please click on the Star button on Github and Share this post and finally send the Repo to your friends.

Github Repo:
https://github.com/ali-master/pwa-badge

Top comments (4)

Collapse
 
spurt1222 profile image
Jun kai Lee

I want to have a contact with you here.
My major is computer science and I am a developer with deep knowledge and rich experience in every field of IT. By the way, I am looking for an appropriate IT remote job for me.

I sincerely hope for the great help and warm care from you.
Best wishes.

Collapse
 
elzafirox profile image
Enoi Barrera Guzman

thanks

Collapse
 
mrtung profile image
Mr Tùng

Nice

Collapse
 
jenueldev profile image
Jenuel Oras Ganawed

wow thanks to this, this is a useful tip :)