すべてのアプリはバッジに値します
これは、デバイス上のネイティブアプリで日常的に見られる非常に一般的なUIパターンである通知バッジです。これは、シンプルで小さなインジケーターを介して、見逃した情報についてユーザーに通知する優れたコンセプトです。最も一般的にはカウンターであり、一部の特別なアプリでは、カスタムバッジまたはアイコンの視覚的調整が使用されます。たとえば、macOSのキーチェーンアプリでは、オレンジ色のコインがキーチェーンのロックが解除されてアクセス可能であることを示します。
ただし、デフォルトのバッジに戻ります。 Googleが着実にウェブを前進させているおかげで、インストールされているプログレッシブウェブアプリはカウンターをバッジとして表示することもできます。
前提条件
ウェブアプリでバッジを表示できるようにするには、以下の補遺にリンクされているGoogleの「インストール可能性の基準」を満たしている必要があります。そして、これは絶対に理にかなっています。システム内の場所を固定するには、PWAをデバイスにインストールする必要があります。 Windowsでは、アプリはタスクバーにあり、macOSではDockにあります。
まだわからない場合は、Webアプリを段階的に拡張して、「プログレッシブWebアプリ」（略してPWA）と呼ばれる新しいクラスのアプリケーションに進化させることができます。 PWAは、以前はネイティブアプリでしか利用できなかったさまざまな新機能をサポートしています。インストール可能なPWA自体であるこのWebアプリで、PWAに関する多くの記事を確認できます。
App Badging APIのサポートは現在、Chromiumブラウザーに限定されており、Androidだけでなくデスクトップデバイスでもサポートされていることに注意してください。 APIの全体的な状態は、Chromiumに対して安定していますが、他のブラウザーではサポートされていません。したがって、使用はアプリを使用するための必須要件ではなく、既存のUXを段階的に強化する必要があります。
使い方
実際の実装は非常に簡単で、すべてのユースケースをカバーするために必要なコードは数行だけです。
// These code examples asume you're using
// Typescript, as they use optional chaining.
//
// Also note that the API-calls for badging
// return a promise that can directly be
// catched.
async function setSimpleBadge(){
// Just a simple indicator without any value.
// This is the simplest variant of a badge.
await navigator?.setClientBadge();
}
async function incrementBadgeCount(){
// Get our dummy count and update it,
// just to give more context for this demo.
const countNow = getUnreadMessagesCount();
await setUnreadMessagesCount(countNow + 1);
// Update the UI.
await navigator.setAppBadge(countNow + 1)
.catch((error) => { /* ... */ });
}
async function resetBadge(){
// As simple as it gets: reset the badge UI.
await navigator.clearClientBadge();
}
この新しいAPIの非常に優れた点は、Service Worker内でも使用できることです。つまり、実装されている場合、インストールされているPWAはバックグラウンドでデータをフェッチし、プッシュ通知を受信して、アプリのバッジを更新できます。 ！！
結論
ご覧のとおり、App BadgingAPIの使用は非常に簡単です。テストに必要なのは、Chromiumベースのブラウザとインストール可能なシンプルなPWAだけです。このAPIがSafariまたはFirefoxですぐに利用可能になるとは予想されていません。これは、これらのチームによる一般的なPWAへの取り組みが強化されることも意味するためです。ただし、可能な場合はWebアプリのUXを強化することは大きなメリットであり、間違いなく使用する必要があります。
