Badging API

Limited availability

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

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

メモ: この機能はウェブワーカー内で利用可能です。

Badging API は、文書またはアプリケーションにバッジを設定する方法をウェブ開発者に提供します。バッジは、より邪魔になる通知を表示することなく、状態が変化したことを通知する役割を果たします。よくある使用法としては、メッセージ機能を持つアプリケーションが、新着メッセージがあることを示すためにアプリケーションのアイコンにバッジを表示することがあるでしょう。

概念と使用法

ウェブ開発者は、よく状態を表すために文書のファビコンやタイトルを更新します。Badging API は、ユーザーエージェントが解釈でき、UI の他の部分に合う形で表示できる方法を提供することで、状態を表示するためのより上品な方法を提供します。

バッジの種類

バッジには 2 種類あります。

  • 文書バッジ: 通常、ブラウザーのタブ上で、ページアイコンの近くまたは上に表示されます。
  • アプリケーションバッジ: インストールされたウェブアプリケーションのアイコンと関連付けられます。使用中のデバイスに応じて、ドック、シェルフ、ホームスクリーンにあるアプリケーションのアイコン上に表示される可能性があります。

バッジの状態

バッジは、内部で設定される 3 種類の値のうち 1 つをとることができます。

nothing

現在、バッジが何も設定されていないことを示します。バッジがアプリケーションによってクリアされたり、ユーザーエージェントによってリセットされることにより、この状態になる可能性があります。

flag

バッジが設定されているが、表示する特定のデータが無いことを示します。バッジがアプリケーションによって設定されたが、メソッドに値が渡されなかったとき、この状態になります。

整数

バッジの設定時に値が渡されました。この値は 0 にはなりません。バッジを設定する際に値 0 を渡すと、ユーザーエージェントは nothing に設定してバッジをクリアします。

バッジの設定

バッジは、(インストールされたアプリケーションでは) setAppBadge() メソッドで設定できます。このメソッドに引数を渡さない場合、バッジの値は flag です。ユーザーエージェントは通知バッジ (たとえばアイコンの上の色付きの丸) を表示するでしょう。

このメソッドは、数値の引数 contents をとることもできます。この引数を渡すと、これがバッジの中に表示されます。ユーザーエージェントは、この値を何らかの形で変える可能性があります。たとえば、4000 などの非常に大きい値を渡すと、ユーザーエージェントはこれをバッジに 99+ として表示する可能性があります。ユーザーエージェントは、このデータを無視してかわりにマーカーを表示する可能性もあります。

バッジのクリア

バッジは、clearAppBadge() メソッドでクリアできます。このメソッドは引数をとらず、バッジを値 nothing に設定します。また、setAppBadge() に値 0 を渡すと、バッジを nothing に設定してクリアします。

インターフェイス

なし

アプリケーションに関連付けられたアイコンにバッジを設定します。

アプリケーションに関連付けられたアイコンのバッジをクリアします。

WorkerNavigator インターフェイスの拡張

WorkerNavigator.setAppBadge()

アプリケーションに関連付けられたアイコンにバッジを設定します。

WorkerNavigator.clearAppBadge()

アプリケーションに関連付けられたアイコンのバッジをクリアします。

以下のようにすると、現在のアプリケーションに値 12 の通知バッジを設定できます。

js
navigator.setAppBadge(12);

以下のようにすると、現在のアプリケーションの通知バッジをクリアできます。

js
navigator.clearAppBadge();

仕様書

Specification
Badging API
# setappbadge-method

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
setAppBadge

Legend

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

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

関連情報