Code

Allows installed web applications to set a notification badge on the app icon in the operating system taskbar or dock. Useful for indicating unread messages, pending tasks, or other counters without opening the app. Requires the app to be installed as a PWA.

MDN Reference

Key Methods

• navigator.setAppBadge(count?) — Sets a badge. Pass a number for a count badge or omit for a plain dot badge.
• navigator.clearAppBadge() — Removes the badge from the app icon.

Example — Set a numeric badge

Show the number of unread messages on the app icon. Pass 0 or call clearAppBadge() to remove it.

async function updateUnreadCount(count) {
  if ('setAppBadge' in navigator) {
    if (count > 0) {
      await navigator.setAppBadge(count);
    } else {
      await navigator.clearAppBadge();
    }
  }
}

// Show 3 unread messages
updateUnreadCount(3);

// Clear the badge
updateUnreadCount(0);

Example — Set a flag badge (no count)

Call setAppBadge() without an argument to show a plain dot badge — useful for indicating activity without a specific number.

// Show a flag badge (dot) — no number
await navigator.setAppBadge();

// Later, clear it
await navigator.clearAppBadge();

Example — Update badge from a service worker

Push notification handlers in service workers can update the badge to keep the icon count current even when the app is not open.

// service-worker.js
self.addEventListener('push', async (event) => {
  const data = event.data?.json();

  event.waitUntil(
    Promise.all([
      self.registration.showNotification(data.title, {
        body: data.body,
      }),
      // Update badge with new unread count from push payload
      self.navigator.setAppBadge(data.unreadCount),
    ])
  );
});