このページは Cloud Translation API によって翻訳されました。

アプリアイコンのバッジ

App Badging API を使用すると、インストール済みのウェブアプリで、アプリ全体のバッジをアプリアイコンに設定できます。

Pete LePage

App Badging API とは

8 件の通知が表示されている Twitter と、フラグタイプのバッジが表示されている別のアプリの例。 — 8 つの通知とフラグタイプのバッジを表示する別のアプリの Twitter の例。

App Badging API を使用すると、インストールされたウェブアプリでアプリケーション全体のバッチを設定できます。このバッジは、アプリに関連付けられたオペレーティングシステム固有の場所（セクションやホーム画面など）に表示されます。

バッジを使用すると、注意が必要な新しいアクティビティがあることをユーザーにさりげなく通知したり、未読数などの少量の情報を表示したりできます。

バッジは通知よりもユーザーフレンドリーで、ユーザーの邪魔にならないため、より頻繁に更新できます。また、ユーザーの操作を中断しないため、ユーザーの許可は必要ありません。

考えられるユースケース

この API を使用するアプリの例を次に示します。

チャット、メール、ソーシャルアプリ: 新しいメッセージが届いたことを通知したり、未読アイテムの数を表示したりします。
生産性アプリ: 長時間実行されるバックグラウンドタスク（画像や動画のレンダリングなど）が完了したことを通知します。
ゲーム: プレーヤーのアクションが必要であることを通知します（チェスでは、プレーヤーの番の場合など）。

サポート

App Badging API は、Windows と macOS の Chrome 81 および Edge 81 以降で動作します。ChromeOS のサポートは現在開発中であり、今後のリリースで利用可能になる予定です。Android では、Badging API はサポートされていません。代わりに、Android アプリと同様に、未読の通知がある場合は、インストールされているウェブアプリのアプリアイコンにバッジが自動的に表示されます。

試してみる

App Badging API のデモを開きます。
メッセージが表示されたら、[インストール] をクリックしてアプリをインストールするか、Chrome メニューを使用してインストールします。
インストール済みの PWA として開きます。インストール済みの PWA として実行されている必要があります（タスクバーまたはドック内）。
[設定] ボタンまたは [消去] ボタンをクリックして、アプリアイコンのバッチを設定または消去します。[バッジの値] に数値を指定することもできます。

App Badging API の使用方法

App Badging API を使用するには、ウェブアプリが Chrome のインストール可能条件を満たしている必要があります。また、ユーザーがホーム画面にウェブアプリを追加する必要があります。

Badge API は、navigator の次の 2 つのメソッドで構成されています。

setAppBadge(number): アプリのバッチを設定します。値が指定されている場合は、その値にバッジを設定します。値を指定しない場合は、通常の白いドット（またはプラットフォームに適した他のフラグ）が表示されます。number を 0 に設定することは、clearAppBadge() を呼び出す場合と同じです。
clearAppBadge(): アプリのバッチを削除します。

どちらも、エラー処理に使用できる空の Promise を返します。

バッジは、現在のページから設定することも、登録済みの Service Worker から設定することもできます。バッジを設定またはクリアするには（フォアグラウンドページまたは Service Worker で）以下を呼び出します。

// Set the badge
const unreadCount = 24;
navigator.setAppBadge(unreadCount).catch((error) => {
  //Do something with the error.
});

// Clear the badge
navigator.clearAppBadge().catch((error) => {
  // Do something with the error.
});

オペレーティングシステムによっては、バッジを正確に表示できない場合があります。このような場合、ブラウザはそのデバイスに最適な表示を提供しようとします。たとえば、Badging API は Android でサポートされていないため、Android で数値ではなくドットのみが表示されます。

ユーザーエージェントがバッジをどのように表示するかについて、何も想定しないでください。一部のユーザーエージェントでは、「4000」などの数値が「99+」として書き換えられることがあります。バッジを自分で飽和させる（「99」に設定するなど）と、「+」は表示されません。実際の数値に関係なく、setAppBadge(unreadCount) を呼び出して、ユーザーエージェントに表示を任せます。

Chrome の App Badging API ではアプリのインストールが必要ですが、インストール状態に応じて Badging API を呼び出すことはおすすめしません。他のブラウザではバッジが他の場所に表示される可能性があるため、API が存在する場合は API を呼び出すだけです。うまく機能すれば、それで問題ありません。そうでない場合は、単に表示されません。

Service Worker からバックグラウンドでバッジを設定して消去する

Service Worker を使用して、アプリバッジをバックグラウンドで設定することもできます。これは、定期的なバックグラウンド同期、Push API、またはその両方を使用して行います。

定期的なバックグラウンド同期

定期的なバックグラウンド同期により、Service Worker はサーバーを定期的にポーリングし、更新されたステータスを取得して navigator.setAppBadge() を呼び出すことができます。

ただし、同期が呼び出される頻度は完全に信頼できるものではなく、ブラウザの裁量で呼び出されます。

Web Push API

Push API を使用すると、サーバーは Service Worker にメッセージを送信できます。Service Worker は、フォアグラウンドページが実行されていない場合でも JavaScript コードを実行できます。したがって、サーバープッシュは navigator.setAppBadge() を呼び出してバッジを更新できます。

ただし、Chrome を含むほとんどのブラウザでは、プッシュメッセージを受信するたびに通知を表示する必要があります。これは、バッジの更新時に通知を表示する場合など、一部のユースケースでは問題ありませんが、通知を表示せずにバッジを微妙に更新することはできません。

また、プッシュメッセージを受信するには、ユーザーがサイトの通知権限を付与する必要があります。

両方の組み合わせ

完璧ではありませんが、Push API と定期的なバックグラウンド同期を併用すると、優れたソリューションを実現できます。優先度の高い情報は Push API を介して配信され、通知が表示され、バッジが更新されます。優先度の低い情報は、ページが開いているとき、または定期的なバックグラウンド同期を介してバッジを更新することで配信されます。

フィードバック

Chrome チームに、App Badging API の感想をお聞かせください。

API 設計について

API で期待どおりに動作しない点はありますか？または、アイデアを実装するために必要なメソッドやプロパティが不足していますか？セキュリティモデルについてご質問やご意見がある場合

Badging API GitHub リポジトリで仕様の問題を提出するか、既存の問題に自分の考えを追加します。

実装に関する問題を報告する

Chrome の実装にバグが見つかりましたか？それとも実装が仕様と異なるのでしょうか？

https://new.crbug.com でバグを報告します。できるだけ詳細な情報を含め、再現手順を簡単に説明してください。[コンポーネント] を UI>Browser>WebAppInstalls に設定します。Glitch は、再現をすばやく簡単に共有するのに適しています。

API のサポートを表示する

サイトで App Badging API を使用する予定ですか？皆様の公開サポートは、Chrome チームが機能に優先順位を付ける際に役立ちます。また、他のブラウザベンダーにそれらのサポートがいかに重要であるかを示すことができます。

ハッシュタグ #BadgingAPI を使用して @ChromiumDev にツイートし、どこでどのように使用しているかをお知らせください。