Mit der App Badging API können installierte Web-Apps ein anwendungsweites Kennzeichen auf dem App-Symbol setzen.
Was ist die App Badging API?
![Beispiel von Twitter mit acht Benachrichtigungen und einer weiteren App mit einem Kennzeichensymbol](https://developer.chrome.com/static/docs/capabilities/web-apis/badging-api/image/example-twitter-eight-n-6eda9c7385a6d.jpg?authuser=6&hl=de)
Mit der App Badging API können installierte Webanwendungen ein anwendungsweites Kennzeichen festlegen, das an einer betriebssystemspezifischen Stelle angezeigt wird, die mit der Anwendung verknüpft ist (z. B. in der Ablage oder auf dem Startbildschirm).
Durch Kennzeichen können Sie den Nutzer ganz einfach über neue Aktivitäten informieren, die seine Aufmerksamkeit erfordern, oder auf eine kleine Menge an Informationen hinweisen, z. B. die Anzahl der ungelesenen Nachrichten.
Badges sind in der Regel nutzerfreundlicher als Benachrichtigungen und können viel häufiger aktualisiert werden, da sie den Nutzer nicht unterbrechen. Da sie den Nutzer nicht unterbrechen, wird seine Berechtigung nicht benötigt.
Mögliche Anwendungsfälle
Beispiele für Apps, die diese API möglicherweise verwenden:
- Chat-, E-Mail- und Social Apps, um zu signalisieren, dass neue Nachrichten eingegangen sind, oder um die Anzahl der ungelesenen Elemente anzuzeigen.
- Produktivitäts-Apps, um zu signalisieren, dass eine lang andauernde Hintergrundaufgabe (z. B. das Rendern eines Bildes oder Videos) abgeschlossen ist.
- Spiele, um zu signalisieren, dass eine Aktion des Spielers erforderlich ist (z.B. beim Schach, wenn der Spieler an der Reihe ist).
Support
Die App Badging API funktioniert unter Windows und macOS in Chrome 81 und Edge 81 oder höher. Die Unterstützung für ChromeOS befindet sich in der Entwicklung und wird in einer zukünftigen Version verfügbar sein. Unter Android wird die Badging API nicht unterstützt. Stattdessen zeigt Android automatisch ein Kennzeichen auf dem App-Symbol für die installierte Web-App an, wenn eine ungelesene Benachrichtigung vorliegt, genau wie bei Android-Apps.
Jetzt testen
- Öffnen Sie die Demoversion der App Badging API.
- Wenn Sie dazu aufgefordert werden, klicken Sie auf Installieren, um die App zu installieren, oder installieren Sie sie über das Chrome-Menü.
- Öffnen Sie es als installierte PWA. Sie muss als installierte PWA ausgeführt werden (in der Taskleiste oder im Dock).
- Klicken Sie auf die Schaltfläche Festlegen oder Löschen, um das Symbol für das App-Symbol festzulegen oder zu entfernen. Sie können auch eine Zahl für den Wert des Logos angeben.
App Badging API verwenden
Damit Sie die App Badging API verwenden können, muss Ihre Webanwendung die Kriterien für die Installierbarkeit von Chrome erfüllen und Nutzer müssen sie ihren Startbildschirmen hinzufügen.
Die Badge API besteht aus zwei Methoden für navigator
:
setAppBadge(
number
)
: Legt das App-Logo fest. Ist ein Wert angegeben, legen Sie für das Logo den angegebenen Wert fest und verwenden Sie einen einfachen weißen Punkt (oder eine andere Kennzeichnung für die Plattform). Wenn Sienumber
auf0
festlegen, entspricht dies dem Aufrufen vonclearAppBadge()
.clearAppBadge()
: Das App-Logo wird entfernt.
Beide geben leere Promise zurück, die Sie zur Fehlerbehandlung verwenden können.
Das Badge kann entweder von der aktuellen Seite oder vom registrierten Service Worker aus festgelegt werden. Um das Logo festzulegen oder zu löschen (entweder auf der Vordergrundseite oder im Service Worker), rufen Sie Folgendes auf:
// 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.
});
Manchmal lässt das Betriebssystem die genaue Darstellung des Logos nicht zu. In diesen Fällen versucht der Browser, die beste Darstellung für das jeweilige Gerät zu liefern. Da die Badging API beispielsweise nicht unter Android unterstützt wird, wird in Android immer nur ein Punkt anstelle eines numerischen Werts angezeigt.
Gehen Sie nicht davon aus, wie der User-Agent das Badge anzeigt.
Einige User-Agents nehmen eine Zahl wie "4000" und schreiben sie in "99+" um. Wenn Sie das Badge selbst sättigen, indem Sie es beispielsweise auf "99" setzen, wird kein Pluszeichen angezeigt. Rufe einfach setAppBadge(unreadCount)
auf, damit der User-Agent sie entsprechend anzeigt. Dabei spielt es keine Rolle, wie die Nummer tatsächlich lautet.
Für die App Badging API in Chrome ist eine installierte App erforderlich. Sie sollten die Badging API jedoch nicht abhängig vom Installationsstatus aufrufen. Rufen Sie einfach die API auf, wenn sie vorhanden ist, da das Logo in anderen Browsern möglicherweise an anderen Stellen angezeigt wird. Wenn es funktioniert, funktioniert es. Wenn nicht, ist es einfach nicht.
Festlegen und Löschen des Logos im Hintergrund durch einen Service Worker
Sie können das App-Badge auch im Hintergrund mithilfe des Service Workers festlegen. Dies kann entweder über eine regelmäßige Hintergrundsynchronisierung, die Push API oder eine Kombination aus beidem erfolgen.
Regelmäßige Hintergrundsynchronisierung
Mit der regelmäßigen Hintergrundsynchronisierung kann ein Service Worker den Server regelmäßig abfragen, um einen aktualisierten Status abzurufen und navigator.setAppBadge()
aufzurufen.
Die Häufigkeit, mit der die Synchronisierung ausgeführt wird, ist jedoch nicht absolut zuverlässig. Dies liegt im Ermessen des Browsers.
Web Push API
Mit der Push API können Server Nachrichten an Service-Worker senden. Diese können JavaScript-Code auch dann ausführen, wenn keine Seite im Vordergrund ausgeführt wird. Daher könnte ein Server-Push das Badge durch Aufrufen von navigator.setAppBadge()
aktualisieren.
Bei den meisten Browsern, einschließlich Chrome, muss jedoch eine Benachrichtigung angezeigt werden, wenn eine Push-Nachricht empfangen wird. Dies ist für einige Anwendungsfälle in Ordnung (z. B. Anzeige einer Benachrichtigung bei der Aktualisierung des Logos), macht es jedoch unmöglich, das Logo subtil zu aktualisieren, ohne dass eine entsprechende Benachrichtigung angezeigt wird.
Außerdem müssen Nutzer Ihrer Website die Berechtigung zum Senden von Push-Nachrichten erteilen.
Eine Kombination aus beidem
Die Push API und die regelmäßige Hintergrundsynchronisierung sind zwar nicht perfekt, aber gemeinsam sind eine gute Lösung. Informationen mit hoher Priorität werden über die Push API gesendet, wobei eine Benachrichtigung angezeigt und das Badge aktualisiert wird. Informationen mit geringerer Priorität werden durch die Aktualisierung des Logos – entweder beim Öffnen der Seite oder durch eine regelmäßige Hintergrundsynchronisierung – bereitgestellt.
Feedback
Das Chrome-Team möchte mehr über Ihre Erfahrungen mit der App Badging API hören.
Informationen zum API-Design
Gibt es in der API etwas, das nicht wie erwartet funktioniert? Oder fehlen Methoden oder Eigenschaften, um Ihre Idee zu implementieren? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell?
- Sie können ein Spezifikationsproblem im GitHub-Repository für die Badging API melden oder Ihre Gedanken einem vorhandenen Problem hinzufügen.
Problem mit der Implementierung melden
Haben Sie einen Fehler bei der Implementierung in Chrome gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation?
- Melden Sie einen Fehler unter https://new.crbug.com. Geben Sie so viele Details wie möglich und eine einfache Anleitung zum Reproduzieren an. Setzen Sie Components (Komponenten) auf
UI>Browser>WebAppInstalls
. Glitch eignet sich hervorragend für schnelle und einfache Reproduktionen.
Unterstützung für die API zeigen
Möchten Sie die App Badging API auf Ihrer Website verwenden? Ihre öffentliche Unterstützung hilft dem Chrome-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen.
- Sende einen Tweet mit dem Hashtag
#BadgingAPI
an @ChromiumDev und teile uns mit, wo und wie du es verwendest.
Nützliche Links
- Öffentliche Erklärung
- Entwurf der Spezifikation
- Badging API Demo | Badging API Demo Source
- Tracking-Fehler
- ChromeStatus.com-Eintrag
- Blink-Komponente:
UI>Browser>WebAppInstalls
Hero-Foto von Prateek Katyal auf Unsplash