Badging API

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (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

ブラウザーの互換性

BCD tables only load in the browser

関連情報