Kennzeichnung für App-Symbole

Mit der App Badging API können installierte Webanwendungen ein anwendungsweites Logo auf dem App-Symbol platzieren.

Pete LePage

Was ist die App Badging API?

Beispiel für Twitter mit acht Benachrichtigungen und einer anderen App mit einem Kennzeichen in Form einer Flagge
Beispiel für Twitter mit acht Benachrichtigungen und einer anderen App mit einem Kennzeichen in Form einer Flagge.

Mit der App Badging API können installierte Webanwendungen ein anwendungsweites Logo festlegen, das an einer betriebssystemspezifischen Stelle angezeigt wird, die mit der Anwendung verknüpft ist (z. B. im Bereich „Shelf“ oder auf dem Startbildschirm).

Mit Kennzeichnungen kann der Nutzer leicht darüber informiert werden, dass es neue Aktivitäten gibt, die seine Aufmerksamkeit erfordern könnten, oder auf eine geringe Menge an Informationen, z. B. eine Zahl mit ungelesenen Informationen, hingewiesen werden.

Badges sind in der Regel nutzerfreundlicher als Benachrichtigungen und können viel häufiger aktualisiert werden, da sie den Nutzer nicht stören. Da sie den Nutzer nicht unterbrechen, ist auch keine Berechtigung des Nutzers erforderlich.

Mögliche Anwendungsfälle

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

  • Chat-, E-Mail- und Social-Media-Apps, um anzuzeigen, dass neue Nachrichten eingegangen sind, oder um die Anzahl der ungelesenen Elemente anzuzeigen.
  • Produktivitäts-Apps, um anzuzeigen, dass eine lang laufende Hintergrundaufgabe (z. B. das Rendern eines Bilds oder Videos) abgeschlossen ist.
  • In Spielen, um anzuzeigen, 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 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 Symbol auf dem App-Symbol der installierten Web-App an, wenn es eine ungelesene Benachrichtigung gibt, genau wie bei Android-Apps.

Ausprobieren

  1. Öffnen Sie die App Badging API-Demo.
  2. Klicken Sie auf Installieren, um die App zu installieren, oder verwenden Sie das Chrome-Menü.
  3. Öffnen Sie sie als installierte PWA. Hinweis: 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 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

Wenn Sie die App Badging API verwenden möchten, 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): Legt das Logo der App fest. Wenn ein Wert angegeben ist, setzen Sie das Symbol auf den angegebenen Wert. Andernfalls wird ein einfacher weißer Punkt (oder ein anderes Symbol, das für die Plattform geeignet ist) angezeigt. Wenn Sie number auf 0 festlegen, ist das dasselbe wie das Aufrufen von clearAppBadge().
  • clearAppBadge(): Das Logo der App wird entfernt.

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

Das Symbol kann entweder über die aktuelle Seite oder über den registrierten Dienst-Worker festgelegt werden. Wenn Sie das Symbol auf der Seite im Vordergrund oder im Service Worker festlegen oder löschen möchten, 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.
});

In einigen Fällen erlaubt das Betriebssystem möglicherweise nicht die genaue Darstellung des Logos. In solchen Fällen versucht der Browser, die beste Darstellung für das jeweilige Gerät zu liefern. Da die Badging API beispielsweise unter Android nicht unterstützt wird, wird dort immer nur ein Punkt anstelle eines numerischen Werts angezeigt.

Gehen Sie nicht davon aus, wie der User-Agent das Logo anzeigt. Einige User-Agents können eine Zahl wie „4000“ in „99+“ umwandeln. Wenn Sie das Gütesiegel selbst sättigen (z. B. auf „99“ festlegen), wird das „+“ nicht angezeigt. Unabhängig von der tatsächlichen Anzahl rufen Sie einfach setAppBadge(unreadCount) auf und lassen Sie den User-Agent die Anzeige entsprechend vornehmen.

Für die App Badging API in Chrome ist eine installierte App erforderlich. Sie sollten jedoch keine Aufrufe der Badging API vom Installationsstatus abhängig machen. Rufen Sie einfach die API auf, sobald sie vorhanden ist, da das Logo in anderen Browsern möglicherweise an anderen Stellen angezeigt wird. Wenn es funktioniert, funktioniert es. Andernfalls wird sie einfach nicht angezeigt.

Symbol im Hintergrund über einen Dienst-Worker setzen und löschen

Sie können das App-Logo auch mit dem Service Worker im Hintergrund platzieren. Dies kann entweder über die regelmäßige Hintergrundsynchronisierung, die Push API oder eine Kombination aus beiden 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 aufgerufen wird, ist jedoch nicht ganz 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 auch dann ausführen können, wenn keine Vordergrundseite ausgeführt wird. So kann ein Server-Push das Kennzeichen aktualisieren, indem navigator.setAppBadge() aufgerufen wird.

Bei den meisten Browsern, einschließlich Chrome, ist es jedoch erforderlich, dass beim Empfang einer Push-Nachricht eine Benachrichtigung angezeigt wird. Das ist für einige Anwendungsfälle in Ordnung (z. B. wenn beim Aktualisieren des Logos eine Benachrichtigung angezeigt wird), macht es aber unmöglich, das Logo unauffällig zu aktualisieren, ohne eine Benachrichtigung anzuzeigen.

Außerdem müssen Nutzer Ihrer Website die Berechtigung zum Senden von Benachrichtigungen erteilen, um Push-Nachrichten zu erhalten.

Eine Kombination aus beiden

Die Kombination aus Push API und regelmäßiger Hintergrundsynchronisierung ist zwar nicht perfekt, aber eine gute Lösung. Informationen mit hoher Priorität werden über die Push API gesendet. Dabei wird eine Benachrichtigung angezeigt und das Symbol aktualisiert. Informationen mit niedrigerer Priorität werden durch Aktualisieren des Logos angezeigt, entweder wenn die Seite geöffnet ist oder über eine regelmäßige Hintergrundsynchronisierung.

Feedback

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

Informationen zum API-Design

Funktioniert etwas in der API nicht wie erwartet? Oder fehlen Methoden oder Eigenschaften, die Sie zur 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 unterscheidet sich die Implementierung von der Spezifikation?

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

Unterstützung für die API anzeigen

Möchtest du die App Badging API auf deiner 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 ihn verwenden.

Nützliche Links

Hero-Foto von Prateek Katyal auf Unsplash