アプリアイコンのバッジ

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 アプリと同様に、未読の通知がある場合は、インストールされているウェブアプリのアプリアイコンにバッジが自動的に表示されます。

試してみる

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

App Badging API の使用方法

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

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

  • setAppBadge(number): アプリのバッチを設定します。値が指定されている場合は、指定された値にバッジを設定します。指定されていない場合は、単純な白いドット(またはプラットフォームに応じて他のフラグ)を表示します。number0 に設定することは、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.
});

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

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

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

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

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

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

定期的なバックグラウンド同期を使用すると、サービス ワーカーはサーバーを定期的にポーリングできます。これにより、最新のステータスを取得して 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 で期待どおりに動作しない点はありますか?または、アイデアを実装するために必要なメソッドやプロパティが不足していますか?セキュリティ モデルについてご不明な点がある場合や、

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

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

  • https://new.crbug.com でバグを報告します。できる限り詳細な情報と再現するための簡単な手順を記載し、[Components] を UI>Browser>WebAppInstalls に設定します。Glitch は、再現をすばやく簡単に共有するのに適しています。

API のサポートを表示する

サイトで App Badging API を使用する予定ですか?一般公開された機能へのサポートは、Chrome チームが機能の優先順位を決める際に役立ちます。また、他のブラウザ ベンダーに、その機能のサポートがどれほど重要であるかを示します。

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

関連情報

UnsplashPrateek Katyal によるヒーロー 写真