アプリアイコンのバッジ

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

App Badging API とは何ですか?

8 件の通知が表示された Twitter と、旗タイプのバッジを表示しているもう 1 つのアプリの例。
Twitter と 8 件の通知がある例と、別のアプリでフラグタイプのバッジが表示されている例。

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

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

バッジは通知よりもユーザー フレンドリーになる傾向があり、ユーザーの邪魔にならないため、はるかに頻繁に更新できます。また、ユーザーの操作を妨げることがないため、ユーザーの許可も必要ありません。

考えられるユースケース

この API を使用する可能性があるアプリの例:

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

サポート

App Badging API は、Windows と macOS の Chrome 81 と Edge 81 以降で動作します。 現在、ChromeOS のサポートは開発中で、今後のリリースで提供される予定です。Android では、Badging API はサポートされていません。Android アプリと同様に、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.
});

オペレーティング システムによってはバッジが正しく表示されない場合があります。そのような場合、ブラウザはそのデバイスに最適な表現を提供しようとします。たとえば、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() を呼び出すことができます。

ただし、同期が呼び出される頻度は完全には信頼できるとは限らず、ブラウザの裁量により変更される可能性があります。

ウェブプッシュ 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 宛てにツイートを送信し、使用場所と使用方法をお知らせください。

関連情報

ヒーロー 写真(作成者: Prateek KatyalUnsplash