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

アプリアイコンのバッジ

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

Pete LePage

App Badging API とは

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 から設定することもできます。バッジを設定または消去するには（フォアグラウンドページまたはサービスワーカーのいずれかで）、次を呼び出します。

// 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.
});

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

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

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

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

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

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

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

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

Web Push API

Push API を使用すると、サーバーは Service Worker にメッセージを送信できます。Service Worker は、フォアグラウンドページが実行されていない場合でも JavaScript コードを実行できます。したがって、サーバー push は 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 にツイートを送信し、どこでどのように使用しているかをお知らせください。