Kennzeichnung für App-Symbole

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

Pete LePage
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 Web-Apps ein App-übergreifendes Logo festlegen, das an einem betriebssystemspezifischen Ort angezeigt wird, der mit der App verknüpft ist (z. B. in der Ablage oder auf dem Startbildschirm).

Mithilfe von Badges können Sie Nutzer unaufdringlich darüber informieren, dass es neue Aktivitäten gibt, die ihre Aufmerksamkeit erfordern könnten, oder eine kleine Menge an Informationen anzeigen, z. B. die Anzahl der ungelesenen Nachrichten.

Symbole sind in der Regel nutzerfreundlicher als Benachrichtigungen und können viel häufiger aktualisiert werden, da sie die Nutzer nicht unterbrechen. Da sie den Nutzer nicht unterbrechen, ist keine Nutzereinwilligung 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 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. Auf Android-Geräten wird die Badging API nicht unterstützt. Stattdessen zeigt Android bei einer ungelesenen Benachrichtigung automatisch ein Kennzeichen auf dem App-Symbol der installierten Web-App an, 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 Badge-Wert 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. Das Festlegen von number auf 0 entspricht dem Aufrufen von clearAppBadge().
  • clearAppBadge(): Das Logo der App wird entfernt.

Beide geben leere Promis zurück, die du für die Fehlerbehandlung verwenden kannst.

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 dieses Gerät bereitzustellen. 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 Nummer rufen Sie einfach setAppBadge(unreadCount) auf und der User-Agent kann dies dann entsprechend anzeigen.

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. Wenn nicht, ist es einfach nicht der Fall.

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

Sie können das App-Logo auch im Hintergrund mithilfe des Dienst-Workers festlegen. 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 zuverlässig und wird im Ermessen des Browsers festgelegt.

Web Push API

Mit der Push API können Server Nachrichten an Service Worker senden, die auch dann JavaScript-Code 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 bereitgestellt, wobei eine Benachrichtigung angezeigt und das Logo aktualisiert wird. 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? Fehlen Methoden oder Eigenschaften, die Sie für die Implementierung 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 den Fehler unter https://new.crbug.com. Geben Sie so viele Details wie möglich an, fügen Sie eine einfache Anleitung zur Reproduktion hinzu und setzen Sie Components auf UI>Browser>WebAppInstalls. Glitch eignet sich hervorragend, um schnelle und einfache Reproduktionen zu teilen.

Unterstützung für die API anzeigen

Sie möchten 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.

Nützliche Links

Hero-Foto von Prateek Katyal auf Unsplash