Navigator: setAppBadge() method

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

See full compatibility

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The setAppBadge() method of the Navigator interface sets a badge on the icon associated with this app. If a value is passed to the method, this will be set as the value of the badge. Otherwise the badge will display as a dot, or other indicator as defined by the platform.

Syntax

setAppBadge()
setAppBadge(contents)

Parameters

contents Optional: A number which will be used as the value of the badge. If contents is 0 then the badge will be set to nothing, indicating a cleared badge.

Return value

A Promise that resolves with undefined.

Exceptions

InvalidStateError DOMException: Thrown if the document is not fully active.
SecurityError DOMException: Thrown if the call was blocked by the same-origin policy.
NotAllowedError DOMException: Thrown if PermissionStatus.state is not granted.

Examples

In the example below an unread count is passed to setAppBadge(). The badge should then display 30.

const unread = 30;
navigator.setAppBadge(unread);

Specifications

Specification
Badging API # setappbadge-method

Browser compatibility

	desktop					mobile							server
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS	Node.js
`setAppBadge`	Chrome – Full support Chrome 81 (Release date: 2020-04-07) footnote footnote Windows and macOS since Chrome 81. footnote ChromeOS since Chrome 91. footnote Linux offers no universal badging API on the operating system level.	Edge – Full support Edge 81 (Release date: 2020-04-13) footnote footnote Windows and macOS since Edge 81. footnote ChromeOS since Edge 91. footnote Linux offers no universal badging API on the operating system level.	Firefox – No support Firefox footnote No support	Opera – No support Opera footnote No support	Safari – Full support Safari 17 (Release date: 2023-09-18) footnote footnote Badging is supported for installed web apps on macOS Sonoma and higher. footnote Passing `0` as an argument will clear the badge instead of displaying an unnumbered dot.	Chrome Android – No support Chrome Android footnote No support	Firefox for Android – No support Firefox for Android footnote No support	Opera Android – No support Opera Android footnote No support	Safari on iOS – Full support Safari on iOS 16.4 (Release date: 2023-03-27) footnote footnote Badging is supported for web apps saved to the home screen. footnote Passing `0` as an argument will clear the badge instead of displaying an unnumbered dot.	Samsung Internet – No support Samsung Internet footnote No support	WebView Android – No support WebView Android footnote No support	WebView on iOS – No support WebView on iOS footnote footnote Badging is supported for web apps saved to the home screen.	Node.js – No support Node.js footnote No support

Tip: you can click/tap on a cell for more information.

Full support: Full support
No support: No support
: See implementation notes.

Navigator: setAppBadge() method

Legend