Badging API

概念と使用法

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

バッジの種類

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

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

バッジの状態

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

nothing

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

flag

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

整数

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

バッジの設定

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

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

バッジのクリア

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

インターフェイス

なし

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

Navigator.setAppBadge()

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

Navigator.clearAppBadge()

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

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

WorkerNavigator.setAppBadge()

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

WorkerNavigator.clearAppBadge()

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

例

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

navigator.setAppBadge(12);

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

navigator.clearAppBadge();

仕様書

ブラウザーの互換性

関連情報

• Badging for app icons
• Badging API Explainer