Ein Abzeichen auf dem App-Symbol anzeigen

App-Abzeichen werden nur unterstützt, wenn eine PWA auf ihrem Host-Betriebssystem installiert ist. Abzeichen erscheinen auf dem App-Symbol, das nur nach der Installation der App existiert.

Auf Desktop-Betriebssystemen werden Abzeichen nur auf Windows und macOS unterstützt, und nur wenn die PWA von Chrome oder Edge installiert ist. Während die Badging API in Chromium-basierten Browsern auf Linux unterstützt wird, werden Abzeichen auf diesem Betriebssystem nicht angezeigt.

Safari und Firefox auf dem Desktop unterstützen die Badging API nicht und unterstützen nicht die Installation von PWAs.

Abzeichen werden in Safari auf iOS und iPadOS unterstützt, beginnend mit iPadOS 16.4. Die Badging API wird nicht von Chromium-basierten Browsern auf Android unterstützt. Stattdessen zeigt Android automatisch ein Abzeichen auf dem App-Symbol der PWA, wenn eine ungelesene Benachrichtigung vorhanden ist, genau wie bei Android-Apps.

Bevor Sie lernen, wie Sie Abzeichen verwenden, berücksichtigen Sie diese besten Praktiken, um sicherzustellen, dass Ihre App Abzeichen auf die effektivste und nützlichste Weise für Ihre Benutzer verwendet.

Um zu gewährleisten, dass die Badging API im Browser und Betriebssystem des Benutzers unterstützt wird und um das Auftreten eines JavaScript-Fehlers zu verhindern, prüfen Sie die Unterstützung, bevor Sie die API verwenden:

if (navigator.setAppBadge) {
  // The API is supported, use it.
} else {
  // The API is not supported, don't use it.
}

Verlassen Sie sich nicht ausschließlich auf Abzeichen, um Benutzer über die Verfügbarkeit neuer Inhalte zu informieren. Browser, die die Badging API unterstützen, können auf Betriebssystemen installiert sein, die die Anzeige eines Abzeichens nicht unterstützen. Zum Beispiel, während Chrome die Badging API unterstützt, werden Abzeichen auf installierten Anwendungssymbolen unter Linux nicht angezeigt.

Obwohl Benachrichtigungs-Abzeichen auf iOS und iPadOS unterstützt werden, erscheinen Abzeichen nicht, bis der Anwendung Benachrichtigungsrechte gewährt wurden. Um Benachrichtigungsrechte anzufordern, rufen Sie die Methode Notification.requestPermission() auf:

Notification.requestPermission().then((result) => {
  console.log(result);
});

Optionale können Sie mit der Permissions API überprüfen, ob ein Benutzer bereits Benachrichtigungsrechte gewährt hat.

Ähnlich wie Benachrichtigungen können Abzeichen eine sehr effektive Methode sein, um Nutzer mit Ihrer App erneut zu engagieren, wenn sie sparsam verwendet werden. Stellen Sie sicher, dass Sie Abzeichen nur verwenden, um neue Inhalte anzuzeigen, die für Ihre Nutzer wichtig sind.

Stellen Sie sicher, dass Sie das App-Abzeichen in Echtzeit aktualisieren. Das bedeutet, die Abzeichenanzahl zu aktualisieren, um widerzuspiegeln, wie viele neue Elemente tatsächlich für den Benutzer übrig sind, und das App-Abzeichen zu löschen, wenn keine neuen Elemente vorhanden sind.

Wenn beispielsweise eine E-Mail-Client-Anwendung im Hintergrund neue Nachrichten empfängt, sollte sie ihr Abzeichen aktualisieren, um die richtige Anzahl ungelesener Nachrichten im Posteingang anzuzeigen und möglicherweise Nachrichten aus anderen Ordnern wie einem Spam-Ordner herauszufiltern. Es ist möglich, Abzeichen im Hintergrund zu aktualisieren, indem Sie die Methode navigator.setAppBadge() von einem Service Worker verwenden.

Sobald der Benutzer die App startet und die Nachrichten liest, sollte die E-Mail-Client-Anwendung ihr Abzeichen entsprechend aktualisieren, indem sie navigator.setAppBadge() mit der neuen Anzahl ungelesener Nachrichten aufruft oder navigator.clearAppBadge() aufruft, wenn keine ungelesenen Nachrichten mehr vorhanden sind.

Wenn Ihre App neue Inhalte erhält und ein Abzeichen auf dem App-Symbol hinzufügt, stellen Sie sicher, dass diese neuen Inhalte für Benutzer hervorgehoben werden, wenn sie die App starten.

Wenn beispielsweise ein E-Mail-Client die Anzahl ungelesener Nachrichten auf dem App-Symbol-Abzeichen anzeigt, sollten diese Nachrichten fett oder auf andere Weise hervorgehoben sein, wenn die App geöffnet wird.

Um ein Abzeichen auf dem App-Symbol Ihrer PWA anzuzeigen, das eine Anzahl ungelesener Nachrichten zeigt, verwenden Sie die Methode Navigator.setAppBadge():

// Check for support first.
if (navigator.setAppBadge) {
  // Display the number of unread messages.
  navigator.setAppBadge(numberOfUnreadMessages);
}

Sie können auch ein leeres Abzeichen mit derselben Methode anzeigen, indem Sie den Zählparameter weglassen oder ihn auf 0 setzen:

// Check for support first.
if (navigator.setAppBadge) {
  // Just display the badge, with no number in it.
  navigator.setAppBadge();
}

Um das Abzeichen auf dem App-Symbol zu entfernen, verwenden Sie die Methode Navigator.clearAppBadge():

// Check for support first.
if (navigator.clearAppBadge) {
  // Remove the badge on the app icon.
  navigator.clearAppBadge();
}

Abzeichen können nützlich sein, um Benutzer mit Ihrer App erneut zu engagieren, wenn sie die App nicht bereits verwenden. Dies bedeutet, dass Ihre App ihr Abzeichen aktualisieren können muss, selbst wenn sie nicht läuft.

PWAs können die folgenden Mechanismen verwenden, um im Hintergrund zu aktualisieren und ihre Abzeichen anzuzeigen, zu aktualisieren oder zu verbergen:

Push API

PWAs können diese API verwenden, um Nachrichten von einem Server zu empfangen, selbst wenn die App nicht läuft. Die meisten Browser erfordern, dass eine Benachrichtigung angezeigt wird, wenn eine Push-Nachricht empfangen wird. Dies ist für einige Anwendungsfälle in Ordnung (zum Beispiel, wenn die Benachrichtigung beim Aktualisieren des Abzeichens angezeigt wird), macht es jedoch unmöglich, das Abzeichen subtil zu aktualisieren, ohne eine Benachrichtigung anzuzeigen. Darüber hinaus müssen Benutzer Ihrer Website Benachrichtigungsrechte erteilen, um Push-Nachrichten zu empfangen. Weitere Informationen finden Sie in der ServiceWorkerRegistration: showNotification() Methode.

Background Synchronization API

PWAs können diese API verwenden, um Code im Hintergrund auszuführen, wenn eine stabile Netzwerkverbindung erkannt wird.

Web Periodic Background Synchronization API

PWAs können diese API verwenden, um Code im Hintergrund in regelmäßigen Intervallen auszuführen.

Hier ist ein Service-Worker-Codebeispiel, das zeigt, wie auf Push-Nachrichten eines Servers gehört werden kann und das App-Abzeichen aktualisiert wird, um eine Anzahl ungelesener Nachrichten widerzuspiegeln:

// Listen to "push" events in the service worker.
self.addEventListener("push", (event) => {
  // Extract the unread count from the push message data.
  const message = event.data.json();
  const unreadCount = message.unreadCount;

  // Set or clear the badge.
  if (navigator.setAppBadge) {
    if (unreadCount && unreadCount > 0) {
      navigator.setAppBadge(unreadCount);
    } else {
      navigator.clearAppBadge();
    }
  }
  // It's obligatory to show the notification to the user.
  self.registration.showNotification(`${unreadCount} unread messages`);
});

• Anleitung zur Erstellung eines App-Abzeichens
• Abzeichen für App-Symbole
• Nutzer mit Abzeichen, Benachrichtigungen und Push-Nachrichten erneut ansprechen
• Codelab: Erstellen eines Push-Benachrichtigungsservers