Badging API: Notification-Badges für Progressive Web Apps

Mobil- und Desktop-Betriebssysteme erlauben die Anzeige von Notification-Badges, also kleiner Hinweise auf neue Aktivitäten innerhalb einer Anwendung, zum Beispiel ungelesene E-Mails. Mithilfe der Badging API sollen sich auch Progressive Web Apps hier bald integrieren können.

In Pocket speichern vorlesen Druckansicht
Lesezeit: 3 Min.
Von
  • Christian Liebel

Verschiedene Mobil- und Desktop-Betriebssysteme erlauben die Anzeige von Notification-Badges, also kleiner Hinweise auf neue Aktivitäten innerhalb einer Anwendung, zum Beispiel ungelesene E-Mails oder WhatsApp-Nachrichten. Auch Progressive Web Apps sollen sich hier bald integrieren können. Mit der Badging API wagt Google den Vorstoß.

Badge-Notifications unter iOS

Die Badging API ist ein Vorschlag der Web Platform Incubator Community Group (WICG), angetrieben von einem Mitglied des Google-Chrome-Teams. Die Schnittstelle ist damit von einem offiziellen Standard noch recht weit entfernt. Die WICG ist aber gerade dafür ins Leben gerufen worden, neue Features für die Webplattform in einem "leichtgewichtigen" Prozess vorzuschlagen und zu diskutieren.

Die Badging API erweitert das Symbol der Progressive Web App auf dem Home-Bildschirm oder in der Taskleiste beziehungsweise dem Dock, das mithilfe des Web App Manifest definiert wird. Schon heute können Progressive Web Apps über diesen Weg auf den Home-Bildschirm oder in die Programmliste des Betriebssystems installiert werden. Die Badging API lässt sich sowohl per JavaScript aus der Webanwendung als auch aus dem Service Worker heraus aufrufen. Somit kann das Badge zum Beispiel als Resultat eines Push-Ereignisses angepasst werden, auch wenn die Webanwendung zu diesem Zeitpunkt gar nicht geöffnet ist.

Die Schnittstelle hat jedoch das Problem zu bewältigen, dass Badge-Notifications auf unterschiedlichen Plattformen grundsätzlich anders funktionieren: Unter iOS kann auf dem Home-Bildschirm nur eine positive Ganzzahl dargestellt werden, unter macOS im Dock auch einzelne Zeichen. Windows erlaubt zusätzlich die Darstellung bestimmter Symbole, Android zeigt hingegen nur einen Punkt an, sobald Benachrichtigungsbanner für eine App vorliegen.

Die Badging API stellt dem Anwender eine einfache Schnittstelle mit zwei Methoden zur Verfügung: set() und clear(). Die erste Methode nimmt optional einen Wert entgegen, der auf dem Badge angezeigt werden soll. Wird kein Wert übergeben, soll ein neutrales Badge dargestellt werden, sofern auf der Plattform verfügbar. Alternativ kann der Methode auch eine positive Ganzzahl oder ein Unicode-Grapheme, also ein logisches Zeichen (das technisch aus mehreren Unicode-Zeichen bestehen kann, etwa Emoji mit Skin-Tone-Modifier) übergeben werden. Zum Zurücksetzen der Badge-Notification wird die zweite Methode aufgerufen.

self.Badge.set();
self.Badge.set(14);
self.Badge.set('🌥');
self.Badge.clear();

Der Webbrowser, der die Badging API implementiert, muss die Angabe des Anwenders bestmöglich für die Zielplattform übersetzen. Da unter iOS beispielsweise keine neutrale Badge-Notification dargestellt werden kann, würde der Webbrowser hier stattdessen ein Badge mit der Ziffer 1 darstellen. In Zukunft sollen beide Methoden noch mit einem optionalen Parameter versehen werden, der die Angabe des Scope erlaubt, falls ein Service Worker mehrere installierte Anwendungen bedient.

Ab Google Chrome 71, das im Dezember 2018 veröffentlicht wird, soll die Badging API standardmäßig aktiviert werden. Von Seiten anderer Browserhersteller gibt es gegenwärtig zwar noch keine öffentlichen Signale, doch zeigt die Schnittstelle das ununterbrochene Investment von Google in Progressive Web Apps. Die Badging API ist ein Teil der Strategie, die Anwendererfahrung von Progressive Web Apps auf dem Desktop noch besser zu machen. Außerdem steht bei Google die Unterstützung von Tastenkürzeln und Link Capturing auf dem Plan, also dem Öffnen der Progressive Web App in ihrem nativen Rahmen, wenn ein Hyperlink angeklickt wird, den die Anwendung verarbeiten kann. ()