JavaScript Navigator clearAppBadge() Method

Beginner
5 min read
Updated: Nov 2026
5 examples
Method
Decorative image with the word CLEARAPPBADGE

Definition

navigator.clearAppBadge() clears a badge on the current app’s icon by setting it to nothing (MDN). It is part of the Badging API and returns a Promise that resolves with undefined.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call navigator.clearAppBadge. Start with this line.

JavaScript
navigator.clearAppBadge()
CallWhat it does
navigator.clearAppBadge()Primary signature.
navigator.clearAppBadge(...)Call with the arguments your case needs.

Built into the browser. Call clearAppBadge(...) on a Navigator — no import required.

Library declarations
JavaScript
navigator.clearAppBadge()

Parameters

ParameterDescription
Secure contextRequired. HTTPS / localhost

Return Value

Return ValueDescription
*Promise → undefined

JavaScript Examples

Example 1 — Feature Detection

Check clearAppBadge, setAppBadge, and secure context together.

JavaScript
const lines = [
  "clearAppBadge: " +
    (typeof navigator.clearAppBadge === "function" ? "available" : "missing"),
  "setAppBadge: " +
    (typeof navigator.setAppBadge === "function" ? "available" : "missing"),
  "isSecureContext: " + window.isSecureContext
];
console.log(lines.join("\n"));
Try It Yourself

How It Works

  1. Test both methods. Clearing and setting usually ship together on the Badging API.
  2. Use typeof. Avoids calling a missing function and throwing.
  3. Check HTTPS. isSecureContext should be true on real sites.
  4. Plan a fallback. If missing, keep only your in-app unread UI.

Example 2 — Clear the Badge (MDN)

MDN’s basic call once all messages have been read.

JavaScript
if (!navigator.clearAppBadge) {
  console.log("clearAppBadge not supported");
} else {
  navigator.clearAppBadge().then(
    () => console.log("Badge cleared (or no-op on this platform)"),
    (err) => console.log("Error: " + err.name)
  );
}
Try It Yourself

How It Works

  1. Guard first. Skip the call when the method is missing.
  2. Call with no args. clearAppBadge() always means “set badge to nothing.”
  3. Handle success. The Promise resolves with undefined on success.
  4. Handle failure. Log err.name — permission or document state can reject.

Example 3 — Sync Badge From Unread Count

Set a number when unread > 0; clear when the inbox is empty.

JavaScript
async function syncUnreadBadge(unread) {
  if (!navigator.setAppBadge || !navigator.clearAppBadge) {
    return "Badging API not supported";
  }
  try {
    if (unread > 0) {
      await navigator.setAppBadge(unread);
      return "Badge set to " + unread;
    }
    await navigator.clearAppBadge();
    return "Badge cleared (unread = 0)";
  } catch (err) {
    return "Badge sync error: " + err.name;
  }
}

syncUnreadBadge(0).then(console.log);
Try It Yourself

How It Works

  1. Detect both APIs. You need set for counts and clear for zero.
  2. Branch on unread. Positive → setAppBadge(n); zero → clearAppBadge().
  3. Await the Promise. Badging is async — wait before reporting status.
  4. Catch errors. Return a soft message so UI flow does not crash.

Example 4 — clearAppBadge() vs setAppBadge(0)

Both clear the badge; pick the clearer intent for your code.

JavaScript
async function compareClearStyles() {
  if (!navigator.clearAppBadge || !navigator.setAppBadge) {
    return "Badging API not supported";
  }
  await navigator.clearAppBadge();
  await navigator.setAppBadge(0);
  return "Both clearAppBadge() and setAppBadge(0) clear the badge";
}

compareClearStyles().then(console.log);
Try It Yourself

How It Works

  1. Dedicated clear. clearAppBadge() reads as “remove the badge.”
  2. Zero also clears. Spec / Chrome docs: setAppBadge(0) → nothing.
  3. Same end state. Both leave no badge on supporting platforms.
  4. Prefer clear for intent. Use setAppBadge(n) only when showing a number.

Example 5 — Safe Clear Helper

Beginner wrapper that never throws into your UI flow.

JavaScript
async function clearBadgeSafe() {
  if (typeof navigator.clearAppBadge !== "function") {
    return { ok: false, reason: "unsupported" };
  }
  if (!window.isSecureContext) {
    return { ok: false, reason: "insecure-context" };
  }
  try {
    await navigator.clearAppBadge();
    return { ok: true, reason: "cleared" };
  } catch (err) {
    return { ok: false, reason: err.name };
  }
}

clearBadgeSafe().then((result) => {
  console.log(JSON.stringify(result));
});
Try It Yourself

How It Works

  1. Early exits. Unsupported or insecure → structured { ok: false }.
  2. Try / catch. Turns DOMExceptions into a reason string.
  3. Success shape. { ok: true, reason: "cleared" } is easy to log.
  4. UI stays calm. Callers can ignore soft failures without crashing.
Compatibility

Browser Support

navigator.clearAppBadge() is part of the Badging API and is not Baseline. Chromium (Chrome / Edge ~81+) on Windows & macOS for installed PWAs; Safari on iOS / iPadOS 16.4+ for home-screen web apps; Firefox and desktop Safari generally lack support. Always feature-detect and use HTTPS.

✓ Limited availability · Not Baseline

Navigator.clearAppBadge()

Promise-based clear — sets the app icon badge to nothing.

Limited Not Baseline
Google Chrome Badging ~81+ · installed PWA (Win/macOS)
Limited
Microsoft Edge Badging ~81+ · installed PWA (Win/macOS)
Limited
Apple Safari iOS/iPadOS 16.4+ home-screen; desktop Safari: no
Limited
Opera Follow Chromium Badging where available
Limited
Mozilla Firefox No Badging API support
Unavailable
Internet Explorer No Badging / clearAppBadge support
Unavailable
clearAppBadge() Limited

Bottom line: Detect clearAppBadge, clear when unread hits zero, handle Promise errors, and keep in-app unread UI as the source of truth.

Frequently Asked Questions

It clears a badge on the current app’s icon by setting it to nothing — removing the numeric or flag indicator from an installed PWA / home-screen icon.
No. MDN does not mark it Deprecated, Experimental, or Non-standard. It is Limited availability (not Baseline) and requires a secure context. Always feature-detect.
Yes. The Badging API is a secure-context feature (HTTPS or localhost) in supporting browsers.
A Promise that resolves with undefined when the call succeeds. Handle rejections for InvalidStateError, SecurityError, or NotAllowedError.
Both clear the badge. clearAppBadge() is the dedicated clear method. Passing 0 to setAppBadge() also sets the badge to nothing. Prefer clearAppBadge() when your intent is simply “remove the badge.”
Commonly after the user has read all messages or cleared pending items — MDN’s example: once all messages are read, call clearAppBadge() to remove the notification badge.

Next: deprecatedReplaceInURN()

Continue with the next Navigator method in the sidebar sequence.

deprecatedReplaceInURN() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

JavaScript Navigator canShare() Method JavaScript Navigator deprecatedReplaceInURN() Method