PWA Badge
Tags: pwa, javascript, react, vue
Published: 2021-01-13 10:30:27

---
title: PWA Badge
published: true
description: Badging for PWA app icons, Like Native Apps
tags: pwa,javascript,react,vue
cover_image: https://bayanbox.ir/view/5036693574728345781/app-badges.png
---
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

```bash
npm install --save pwa-badge
```

### 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

```js
import PWABadge from 'pwa-badge';

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

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

// Clear Badge unreadCount
badge.syncClearBadge();
```
Result:
- MacOS
![PWA Badge](https://dev-to-uploads.s3.amazonaws.com/i/lvkd2cohfu96wg6cthn0.png)
- Windows:
![PWA Badge](https://dev-to-uploads.s3.amazonaws.com/i/2godmabthgejrcxxiays.PNG)


### `Async` Set and Clear Badge

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

```js
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
  });
```

### 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.

```js
import PWABadge from 'pwa-badge';

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

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

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](https://github.com/ali-master/pwa-badge)