Badging API
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
メモ: この機能はウェブワーカー内で利用可能です。
Badging API は、文書またはアプリケーションにバッジを設定する方法をウェブ開発者に提供します。バッジは、より邪魔になる通知を表示することなく、状態が変化したことを通知する役割を果たします。よくある使用法としては、メッセージ機能を持つアプリケーションが、新着メッセージがあることを示すためにアプリケーションのアイコンにバッジを表示することがあるでしょう。
概念と使用法
ウェブ開発者は、よく状態を表すために文書のファビコンやタイトルを更新します。Badging API は、ユーザーエージェントが解釈でき、UI の他の部分に合う形で表示できる方法を提供することで、状態を表示するためのより上品な方法を提供します。
バッジの種類
バッジには 2 種類あります。
- 文書バッジ: 通常、ブラウザーのタブ上で、ページアイコンの近くまたは上に表示されます。
- アプリケーションバッジ: インストールされたウェブアプリケーションのアイコンと関連付けられます。使用中のデバイスに応じて、ドック、シェルフ、ホームスクリーンにあるアプリケーションのアイコン上に表示される可能性があります。
バッジの状態
バッジは、内部で設定される 3 種類の値のうち 1 つをとることができます。
バッジの設定
バッジは、(インストールされたアプリケーションでは) setAppBadge()
メソッドで設定できます。このメソッドに引数を渡さない場合、バッジの値は flag
です。ユーザーエージェントは通知バッジ (たとえばアイコンの上の色付きの丸) を表示するでしょう。
このメソッドは、数値の引数 contents
をとることもできます。この引数を渡すと、これがバッジの中に表示されます。ユーザーエージェントは、この値を何らかの形で変える可能性があります。たとえば、4000 などの非常に大きい値を渡すと、ユーザーエージェントはこれをバッジに 99+ として表示する可能性があります。ユーザーエージェントは、このデータを無視してかわりにマーカーを表示する可能性もあります。
バッジのクリア
バッジは、clearAppBadge()
メソッドでクリアできます。このメソッドは引数をとらず、バッジを値 nothing
に設定します。また、setAppBadge()
に値 0
を渡すと、バッジを nothing
に設定してクリアします。
インターフェイス
なし
Navigator インターフェイスの拡張
-
アプリケーションに関連付けられたアイコンにバッジを設定します。
-
アプリケーションに関連付けられたアイコンのバッジをクリアします。
WorkerNavigator インターフェイスの拡張
-
アプリケーションに関連付けられたアイコンにバッジを設定します。
-
アプリケーションに関連付けられたアイコンのバッジをクリアします。
例
以下のようにすると、現在のアプリケーションに値 12 の通知バッジを設定できます。
navigator.setAppBadge(12);
以下のようにすると、現在のアプリケーションの通知バッジをクリアできます。
navigator.clearAppBadge();
仕様書
Specification |
---|
Badging API # setappbadge-method |
ブラウザーの互換性
BCD tables only load in the browser