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?

<ph type="x-smartling-placeholder">
</ph> Beispiel für Twitter mit acht Benachrichtigungen und einer weiteren App mit einem Flaggenlogo <ph type="x-smartling-placeholder">
</ph> Beispiel für Twitter mit acht Benachrichtigungen und einer weiteren App mit einer Flagge Badge.

Mit der App Badging API können installierte Web-Apps ein anwendungsweites Logo die an einem betriebssystemspezifischen Ort angezeigt werden, der mit der Anwendung verknüpft ist z. B. in der Ablage oder auf dem Startbildschirm.

Mit Badges kann der Nutzer ganz einfach über neue Aktivitäten informiert werden. die ihre Aufmerksamkeit erfordern, z. B. die Anzahl der ungelesenen Nachrichten,

Badges sind in der Regel nutzerfreundlicher als Benachrichtigungen und können aktualisiert werden. viel häufiger, da sie den Nutzer nicht stören. Und da der Nutzer nicht unterbrochen wird, braucht er nicht seine Zustimmung.

Mögliche Anwendungsfälle

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

  • Chat, E-Mail und Social Apps, um zu signalisieren, dass neue Nachrichten eingegangen sind, oder Anzahl der ungelesenen Elemente anzeigen.
  • Produktivitäts-Apps, um zu signalisieren, dass eine lang andauernde Hintergrundaufgabe (z. B. Rendering eines Bilds oder Videos) abgeschlossen ist.
  • Spiele, um zu signalisieren, dass eine Aktion erforderlich ist (z.B. beim Schach ist der Spieler an der Reihe.

Support

Die App Badging API funktioniert unter Windows und macOS in Chrome 81 und Edge 81 oder höher. Support für ChromeOS befindet sich in der Entwicklung und wird in Zukunft verfügbar sein Veröffentlichung. Auf Android-Geräten wird die Badging API nicht unterstützt. Stattdessen Android zeigt automatisch ein Logo auf dem App-Symbol für die installierte Web-App an wenn eine ungelesene Benachrichtigung vorhanden ist, genau wie bei Android-Apps.

Ausprobieren

  1. Öffnen Sie das Demo der App Badging API
  2. Wenn Sie dazu aufgefordert werden, klicken Sie auf Installieren, um die App zu installieren, oder verwenden Sie den Chrome-Browser um sie zu installieren.
  3. Öffnen Sie sie als installierte PWA. Hinweis: Sie muss als installierte PWA ausgeführt werden. (in der Taskleiste oder im Dock).
  4. Klicken Sie auf die Schaltfläche Festlegen oder Löschen, um das Logo in der App festzulegen oder zu entfernen. . Sie können auch eine Zahl als Wert des Logos angeben.

App Badging API verwenden

Um die App Badging API verwenden zu können, muss Ihre Webanwendung folgende Anforderungen erfüllen: Kriterien für die Installierbarkeit von Chrome und Nutzer müssen es ihren Startbildschirmen hinzufügen.

Die Badge API besteht aus zwei Methoden auf navigator:

  • setAppBadge(number): Legt das Logo der App fest. Wenn ein Wert angegeben wird, legen Sie den Parameter mit dem angegebenen Wert versehen, zeigen Sie andernfalls einen einfachen weißen Punkt (oder einen anderen als angemessen kennzeichnen). Das Festlegen von number auf 0 entspricht clearAppBadge() wird angerufen.
  • clearAppBadge(): Entfernt das Logo der App.

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

Das Badge kann entweder von der aktuellen Seite oder von der registrierten Service Worker. Um das Logo festzulegen oder zu löschen (entweder auf der Vordergrundseite oder 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.
});

In einigen Fällen kann es vorkommen, dass das Betriebssystem die genaue Darstellung des Logos nicht unterstützt. In diesen Fällen versucht der Browser, die beste Darstellung für auf diesem Gerät. Da die Badging API z. B. unter Android nicht unterstützt wird, In Android wird immer nur ein Punkt anstelle eines numerischen Werts angezeigt.

Vermuten Sie nichts darüber, wie der User-Agent das Badge anzeigt. Einige User-Agents verwenden möglicherweise eine Zahl wie „4000“ und schreibe ihn so um, „99+“. Wenn Sie das Badge selbst gesättigt haben, z. B. indem Sie es auf „99“ setzen dann das "+" werden nicht angezeigt. Rufen Sie einfach an setAppBadge(unreadCount) und lass den User-Agent Folgendes verarbeiten: um sie entsprechend anzuzeigen.

Für die App Badging API in Chrome ist zwar eine installierte App erforderlich, die Badging API abhängig vom Installationsstatus aufrufen. Rufen Sie einfach die API verwenden, da das Logo in anderen Browsern möglicherweise an anderen Stellen angezeigt wird. Wenn es funktioniert, dann ist es auch. Wenn nicht, tut es sie einfach nicht.

Das Logo wird von einem Service Worker im Hintergrund eingerichtet und gelöscht.

Sie können das App-Logo auch mit dem Service Worker im Hintergrund platzieren. Führen Sie dazu entweder durch regelmäßige Hintergrundsynchronisierung, die Push API oder eine Kombination aus beidem.

Regelmäßige Hintergrundsynchronisierung

Regelmäßige Hintergrundsynchronisierung ermöglicht einem Service Worker um den Server regelmäßig abzufragen, um den aktuellen Status abzurufen, und rufe navigator.setAppBadge() an.

Die Häufigkeit, mit der die Synchronisierung aufgerufen wird, ist jedoch nicht zuverlässig. Dies liegt im Ermessen des Browsers.

Web Push API

Mit der Push API können Server Nachrichten an Service Worker senden, Damit kann auch dann JavaScript-Code ausgeführt werden, wenn keine Webseite im Vordergrund ausgeführt wird. Das heißt: Ein Server-Push könnte das Badge durch Aufrufen von navigator.setAppBadge() aktualisieren.

Die meisten Browser, darunter auch Chrome, erfordern jedoch eine Benachrichtigung, wird angezeigt, wenn eine Push-Nachricht empfangen wird. Für eine gewisse Nutzung reicht dies aus. (z. B. Anzeige einer Benachrichtigung beim Aktualisieren Das Logo lässt sich aber nur leicht aktualisieren, ohne dass eine Benachrichtigung angezeigt wird.

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

Eine Kombination aus beidem

Auch wenn es nicht perfekt ist, können Sie die Push API und die regelmäßige Hintergrundsynchronisierung zusammen verwenden. ist eine gute Lösung. Informationen mit hoher Priorität werden über die Push- API, die eine Benachrichtigung anzeigt und das Logo aktualisiert. Und eine niedrigere Priorität werden bereitgestellt, indem das Logo aktualisiert wird, entweder wenn die Seite geöffnet ist, oder regelmäßige Synchronisierung im Hintergrund.

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 sind fehlende 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 bei der Implementierung von Chrome einen Fehler gefunden? Oder ist die Implementierung von der Spezifikation abweichen?

  • Melden Sie den Fehler unter https://new.crbug.com. Geben Sie so viele Details wie können Sie einfache Anweisungen zur Reproduktion eingeben und Komponenten auf UI>Browser>WebAppInstalls Glitch eignet sich hervorragend für Reproduktionen schnell und einfach teilen.

Unterstützung für die API anzeigen

Möchtest du die App Badging API auf deiner Website verwenden? Ihre öffentliche Unterstützung hilft Chrome-Team priorisiert Funktionen priorisiert und zeigt anderen Browseranbietern, wie wichtig sie zu unterstützen.

Nützliche Links

Hero-Foto von Prateek Katyal auf Nicht mehr anzeigen