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

アプリアイコンのバッジ

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

Pete LePage

App Badging API とは何ですか？

8 つの通知を表示した Twitter と、フラグタイプのバッジを表示する別のアプリの例。 — </ph> 8 つの通知とフラグを表示する別のアプリの Twitter の例タイプバッジになります。

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

バッジを表示すると、新しいアクティビティがあることをユーザーに簡単に通知できます注意が必要なメッセージや、わずかな変更を示す未読件数などの情報が表示されます

バッジは通知よりもユーザーフレンドリーなものになりがちで、更新できます。はるかに高い頻度で実行できますそして、なぜならユーザーの作業を邪魔せず、ユーザーの許可も必要ないためです。

考えられるユースケース

たとえば、次のようなアプリでこの API を使用できます。

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

サポート

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

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

ユーザーエージェントによるバッジの表示方法について、想定しないでください。ユーザーエージェントによっては、「4000」などの数字を取ることがあります。次のように書き換えます。「99+」。自分でバッジを飽和させる場合（「99」に設定するなど）「+」は表示されません。電話番号にかかわらず、 setAppBadge(unreadCount)し、ユーザーエージェントに適切に表示されます

Chrome で App Badging API を使用するにはアプリをインストールする必要がありますが、インストール状態に応じて Badging API を呼び出します。まず API を使用します。他のブラウザでは、バッジが他の場所に表示される場合があります。うまくいけば、うまくいきます。そうでない場合、機能しません。

Service Worker からバックグラウンドでバッジを設定およびクリアする

Service Worker を使用して、アプリバッジをバックグラウンドで設定することもできます。次のいずれかを行う定期的なバックグラウンド同期、Push API、またはその両方の組み合わせを使用することにより、トラフィックをストリーミングできます。

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

定期的なバックグラウンド同期により、Service Worker でサーバーを定期的にポーリングし、最新のステータスを取得する navigator.setAppBadge() を呼び出します。

ただし、同期が呼び出される頻度は完全に信頼できるとは言えません。これはブラウザの裁量で呼び出されます

ウェブプッシュ API

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

ただし、Chrome を含むほとんどのブラウザでは、ブラウザへのプッシュメッセージを受信するたびに表示されます。用途によってはこれで十分更新するときに通知を表示するなど、更新することはできませんが、変更せずにバッジを手動で更新することは通知を表示します。

また、ユーザーが次の目的でサイトの通知を許可する必要があります。 push メッセージを受信できます。

両方の組み合わせ

完全ではないものの、Push API と定期的なバックグラウンド同期を併用すると、優れたソリューションを提供します優先度の高い情報は push 経由で API、通知の表示とバッジの更新優先度が低い場合バッジを更新して情報を配信しています。ページが開いているとき定期的にバックグラウンド同期を行います

フィードバック

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

API 設計について教えてください

想定どおりに動作しないものが API にありますか？またはアイデアを実装するために不足しているメソッドやプロパティはありませんか？セキュリティモデルについてご不明な点がある場合や、

Badging API GitHub リポジトリで仕様に関する問題を報告するか、考えをまとめます

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

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

https://new.crbug.com でバグを報告します。できる限り詳しく説明し簡単な手順で再現できます。また、[Components] を UI>Browser>WebAppInstalls。Glitch が適しているケース簡単に複製できます。

API のサポートを表示する

サイトで App Badging API を使用するご予定でしたら、皆様の公的なサポートは、 Chrome チームが機能の優先度を判断し、他のブラウザベンダーがどれほど重要であるかを説明しますサポートすることです。

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