Jede App verdient ein Abzeichen
Es ist ein sehr häufiges UI-Muster, das Sie jeden Tag für die nativen Apps auf Ihrem Gerät sehen: ein Benachrichtigungsabzeichen. Es ist ein großartiges Konzept, das Benutzer über einen einfachen und kleinen Indikator über einige verpasste Informationen informiert. Am häufigsten ist es ein Zähler und für einige spezielle Apps wird ein benutzerdefiniertes Badge oder eine visuelle Anpassung des Symbols verwendet, beispielsweise in der Schlüsselbund-App von macOS, wo eine orange Münze anzeigt, dass der Schlüsselbund entsperrt und zugänglich ist.
Aber zurück zum Standard-Badging. Da Google das Web stetig vorantreibt, kann Ihre installierte Progressive Web App auch einen Zähler als Badge anzeigen.
Voraussetzungen
Damit Ihre Web-App ein Badge anzeigen kann, muss sie die unten im Anhang verlinkten „Installationskriterien“ von Google erfüllen. Und das macht absolut Sinn: Ihre PWA muss auf einem Gerät installiert sein, um einen festen Platz in Ihrem System zu haben. Unter Windows befinden sich Ihre Apps in der Taskleiste und unter macOS im Dock.
Wenn Sie es noch nicht wissen, kann Ihre Web-App schrittweise erweitert werden, um sich zu einer neuen Klasse von Anwendungen namens „Progressive Web Apps“ oder kurz PWA zu entwickeln. PWAs unterstützen eine Vielzahl neuer Funktionen, die bisher nur nativen Apps zur Verfügung standen. Sie können viele Artikel über PWAs in dieser Web-App lesen, die selbst eine PWA ist, die installiert werden kann.
Beachten Sie, dass die Unterstützung für die App Badging API derzeit auf Chromium-Browser beschränkt ist und nur auf Desktop-Geräten sowie Android unterstützt wird. Der Gesamtzustand der API ist für Chromium stabil, wird jedoch von anderen Browsern in keiner Weise unterstützt. Daher sollte die Nutzung keine zwingende Voraussetzung für die Nutzung der App sein, sondern die bestehende UX schrittweise verbessern.
Wie es funktioniert
Die eigentliche Implementierung ist sehr einfach und erfordert nur wenige Codezeilen, um alle Anwendungsfälle abzudecken.
// 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();
}
Ein sehr schöner Aspekt dieser neuen API ist, dass sie auch in Ihrem Service Worker verwendet werden kann, was bedeutet, dass Ihre installierte PWA bei Implementierung Daten im Hintergrund abrufen und Push-Benachrichtigungen erhalten kann, die wiederum das Badge Ihrer App aktualisieren können !
Fazit
Wie Sie gesehen haben, ist die Verwendung der App Badging API wirklich einfach. Alles, was Sie zum Testen benötigen, ist ein Chromium-basierter Browser sowie eine einfache PWA, die installiert werden kann. Es ist nicht zu erwarten, dass diese API in absehbarer Zeit auf Safari oder Firefox verfügbar sein wird, da dies auch ein stärkeres Engagement dieser Teams für PWAs im Allgemeinen bedeutet. Aber für eine verbesserte UX für Ihre Web-App, wenn möglich, ist es ein großer Gewinn und sollte auf jeden Fall verwendet werden!
