Kennzeichnung für App-Symbole

Mit der App Badging API können installierte Web-Apps ein anwendungsweites Badge für das App-Symbol festlegen.

Pete LePage

Was ist die App Badging API?

Beispiel für Twitter mit acht Benachrichtigungen und eine andere App mit einem Badge vom Typ „Flagge“.
Beispiel für Twitter mit acht Benachrichtigungen und eine andere App mit einem Flaggen-Badge.

Mit der App Badging API können installierte Web-Apps ein anwendungsweites Badge festlegen, das an einem betriebssystemspezifischen Ort angezeigt wird, der mit der Anwendung verknüpft ist, z. B. im Shelf oder auf dem Startbildschirm.

Mit Badges können Sie Nutzer auf unaufdringliche Weise über neue Aktivitäten informieren, die möglicherweise ihre Aufmerksamkeit erfordern, oder eine kleine Menge an Informationen anzeigen, z. B. die Anzahl der ungelesenen Elemente.

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, ist keine Einwilligung des Nutzers erforderlich.

Mögliche Anwendungsfälle

Beispiele für Apps, die diese API verwenden könnten:

  • Chat-, E‑Mail- und Social-Media-Apps, um anzuzeigen, dass neue Nachrichten eingegangen sind, oder um die Anzahl der ungelesenen Elemente zu zeigen.
  • 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 Spieleraktion erforderlich ist (z.B. im 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 ist in der Entwicklung und wird in einer zukünftigen Version verfügbar sein. Unter Android wird die Badging API nicht unterstützt. Stattdessen wird auf dem App-Symbol der installierten Web-App automatisch ein Badge angezeigt, wenn es eine ungelesene Benachrichtigung gibt, genau wie bei Android-Apps.

Ausprobieren

  1. Öffnen Sie die App Badging API-Demo.
  2. Klicken Sie bei Aufforderung auf Installieren, um die App zu installieren, oder verwenden Sie das Chrome-Menü.
  3. Öffnen Sie sie als installierte PWA. Die PWA muss als installierte PWA (in der Taskleiste oder im Dock) ausgeführt werden.
  4. Klicken Sie auf die Schaltfläche Festlegen oder Löschen, um das Symbol auf dem App-Symbol festzulegen oder zu entfernen. Sie können auch eine Zahl für den Badge-Wert angeben.

App Badging API verwenden

Damit Sie die App Badging API verwenden können, muss Ihre Web-App die Installationskriterien von Chrome erfüllen und Nutzer müssen sie auf ihren Startbildschirmen hinzufügen.

Die Badge API besteht aus zwei Methoden für navigator:

  • setAppBadge(number): Hiermit wird das App-Symbol festgelegt. Wenn ein Wert angegeben ist, legen Sie das Symbol auf den angegebenen Wert fest. Andernfalls zeigen Sie einen einfachen weißen Punkt (oder ein anderes Flag, das für die Plattform geeignet ist) an. Das Festlegen von number auf 0 entspricht dem Aufrufen von clearAppBadge().
  • clearAppBadge(): Entfernt das App-Symbol.

Beide geben leere Promises zurück, die Sie für die Fehlerbehandlung verwenden können.

Das Badge kann entweder auf der aktuellen Seite oder über den registrierten Service Worker festgelegt werden. Rufen Sie Folgendes auf, um das Badge festzulegen oder zu entfernen (entweder auf der Vordergrundseite oder im 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.
});

In einigen Fällen lässt das Betriebssystem möglicherweise keine genaue Darstellung des Logos zu. In solchen Fällen versucht der Browser, die beste Darstellung für das jeweilige Gerät zu bieten. Da die Badging API beispielsweise unter Android nicht unterstützt wird, wird unter 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 können eine Zahl wie „4000“ in „99+“ umschreiben. Wenn Sie das Symbol selbst sättigen, indem Sie es beispielsweise auf „99“ festlegen, wird das „+“ nicht angezeigt. Unabhängig von der tatsächlichen Zahl rufen Sie einfach setAppBadge(unreadCount) auf und lassen Sie den User-Agent die entsprechende Darstellung übernehmen.

Die App Badging API in Chrome erfordert zwar eine installierte App, Sie sollten Aufrufe der Badging API jedoch nicht vom Installationsstatus abhängig machen. Rufen Sie die API einfach auf, wenn sie vorhanden ist, da das Symbol in anderen Browsern an anderen Stellen angezeigt werden kann. Wenn es funktioniert, funktioniert es. Andernfalls wird sie nicht angezeigt.

Badge im Hintergrund über einen Service Worker festlegen und entfernen

Sie können das App-Symbol auch im Hintergrund mit dem Service Worker festlegen. Dies kann entweder durch 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 zu erhalten und navigator.setAppBadge() aufzurufen.

Die Häufigkeit, mit der die Synchronisierung aufgerufen wird, ist jedoch nicht perfekt zuverlässig und wird nach Ermessen des Browsers aufgerufen.

Web Push API

Mit der Push API können Server Nachrichten an Service Worker senden, die JavaScript-Code ausführen können, auch wenn keine Seite im Vordergrund ausgeführt wird. Daher kann durch einen Server-Push das Badge durch Aufrufen von navigator.setAppBadge() aktualisiert werden.

Die meisten Browser, einschließlich Chrome, erfordern jedoch, dass eine Benachrichtigung angezeigt wird, wenn eine Push-Nachricht empfangen wird. Das ist für einige Anwendungsfälle in Ordnung (z. B. zum Anzeigen einer Benachrichtigung beim Aktualisieren des Badges), macht es aber unmöglich, das Badge unauffällig zu aktualisieren, ohne eine Benachrichtigung anzuzeigen.

Außerdem müssen Nutzer Ihrer Website die Berechtigung zum Senden von Benachrichtigungen erteilen, damit sie Push-Nachrichten erhalten können.

Eine Kombination aus beidem

Die gemeinsame Verwendung von Push API und regelmäßiger Hintergrundsynchronisierung ist zwar nicht perfekt, bietet aber eine gute Lösung. Informationen mit hoher Priorität werden über die Push-API bereitgestellt. Dabei wird eine Benachrichtigung angezeigt und das Badge aktualisiert. Informationen mit niedrigerer Priorität werden durch Aktualisieren des Badges bereitgestellt, entweder wenn die Seite geöffnet ist oder über die regelmäßige Hintergrundsynchronisierung.

Feedback

Das Chrome-Team möchte mehr über Ihre Erfahrungen mit der App Badging API erfahren.

Informationen zum API-Design

Gibt es etwas in der API, das nicht wie erwartet funktioniert? Oder fehlen Methoden oder Attribute, die Sie für die Umsetzung Ihrer Idee benötigen? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell?

Problem mit der Implementierung melden

Haben Sie einen Fehler in der Chrome-Implementierung gefunden? Oder weicht die Implementierung von der Spezifikation ab?

  • Melden Sie einen Fehler unter https://new.crbug.com. Geben Sie so viele Details wie möglich und eine einfache Anleitung zur Reproduktion an und legen Sie Components auf UI>Browser>WebAppInstalls fest. Glitch eignet sich hervorragend, um schnell und einfach Reproduktionen zu teilen.

API-Support 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.

  • Senden Sie einen Tweet an @ChromiumDev mit dem Hashtag #BadgingAPI und teilen Sie uns mit, wo und wie Sie die Funktion verwenden.

Nützliche Links

Hero-Foto von Prateek Katyal auf Unsplash