Tutorial: Progressive Web Apps mit Workbox, Teil 2

Integrativ

Steffen Jahr

Progressive Web Apps muss der Entwickler in die jeweilige Betriebsumgebung einbinden – egal ob mobiles Gerät oder Desktop. Allerdings machen hier noch nicht alle Browser mit.

Eine Einführung in die Welt der Progressive Web Apps (PWA) und Workbox hat mein Kollege Christian Liebel im ersten Artikel dieses Tutorials gegeben (iX 10/2018, S. 116). Der zweite Teil soll nun zeigen, wie man seine PWA in die Betriebsumgebung mobiler Geräte einbindet, konkret, wie der Entwickler sie auf dem Home-Bildschirm ablegt (derzeit nur auf dem Smartphone) und den Benutzer per Push-Benachrichtigung auf neue Vorgänge in der Anwendung hinweist. Das Hinzufügen auf dem Desktop ist bisher noch nicht oder nur mittels experimenteller Features möglich.

Wie das genau geht, soll eine kleine Anwendung demonstrieren. Sie besteht aus einer Liste, der man Aufgaben hinzufügt, die man bearbeitet, erledigt und löscht. Das Single-Page-Application-Framework Angular hilft dabei, die Handhabung der Liste zu verbessern und ihr ein natives Verhalten beizubringen, etwa dynamisches Austauschen der Inhalte. Allerdings nutzt die Beispielapplikation zur Umsetzung des Service Workers nicht die Angular-eigene Service-Worker-Implementierung, sondern aus Flexibilitätsgründen und aus dem Wunsch nach Unabhängigkeit vom Framework einen eigenen Ansatz in Kombination mit Workbox. Die Demoanwendung ist inklusive Installationsanleitung auf GitHub zu finden (siehe ix.de/ix1811140).

Manifestdatei einbinden

Listing 1: manifest.json der Demoanwendung

{
  "short_name": "PWA Demo",
  "name": "PWA Demo",
  "icons": [
    {
      "src": "assets/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "assets/icon-1024x1024.png",
      "sizes": "1024x1024",
      "type": "image/png"
    }
  ],
  "theme_color": "#ff584f",
  "background_color": "#ffffff",
  "start_url": "/index.html",
  "display": "standalone"
}

Um die PWA auf dem Home-Bildschirm abzulegen, benötigt der Browser, in dem sie aufgerufen wird, einige Details. Diese Metainformationen schreibt der Entwickler in die Datei manifest.json (Listing 1). Sie besitzt Eigenschaften, die den Browsern Hinweise für verschiedene Aktionen und Dialoge geben:

– name und short_name: Der Name der Anwendung wird auf dem Home-Bildschirm und in anderen Dialogen verwendet, der Kurzname im browsereigenen Installationsbanner.

– icons: Hier hinterlegt der Entwickler Icons der Anwendung in verschiedenen Größen (je nach Gerät), die er für den Homescreen verwenden kann.

– theme_color: Die Angabe bestimmt die Farbgebung der Navigationsleisten.

Der Startbildschirm der Demoanwendung wird durch Informationen aus manifest.json erzeugt (Abb. 1).

– background_color: Dieser Parameter erstellt den Startbildschirm (Splash Screen) (Abbildung 1).

– start_url: Mit dieser URL ruft der Browser die Anwendung auf.

– display: Der Befehl gibt an, wie die Applikation gestartet werden soll. Es existieren verschiedene Möglichkeiten: fullscreen (Vollbildmodus ohne Browserelemente), standalone (ohne Browserelemente, Look-and-Feel einer nativen Anwendung), browser (Anwendung startet im Browser).

Zum Einbinden der Manifestdatei in die Anwendung wird sie im <head>-Bereich von index.html verlinkt:

<link rel="manifest" href="manifest.json">

Grundsätzlich sollte der Browser eine PWA erkennen. Allerdings beherrscht dieses Feature noch nicht jeder (Abb. 2).

Nun erkennt der Browser, dass es sich um eine PWA handelt. Nutzt die Anwendung neben dem Manifest einen Service Worker und wird sie mittels HTTPS ausgeliefert, bekommt der Benutzer automatisch ein Installationsbanner angezeigt (Abbildung 2), derzeit allerdings nur in Chrome auf Android-Geräten.

In neueren Versionen von Chrome (68+) erscheint dieses Banner nicht mehr automatisch, man muss es aufrufen. Dafür registriert der Entwickler das Event beforeinstallprompt und ruft die Methode prompt() auf. Folgende Aktion öffnet das Installationsbanner und fügt die Anwendung dem Heimbildschirm hinzu:

window.addEventListener ⤦
 ('beforeinstallprompt', event => {
     event.prompt()
});

Die Anwendung wird auf dem Home-Bildschirm und als eigenständige Applikation ohne Browserelemente gestartet (Abb. 3).

Das bedeutet nicht, dass die Anwendung auch offline verfügbar ist, sondern lediglich, dass sie mit den in manifest.json hinterlegten Parametern startet (Abbildung 3).

Die PWA von Twitter im Microsoft Store. Man erkennt keinen Unterschied zu einer nativen Anwendung (Abb. 4).

Die hinterlegten Informationen dienen zusätzlich anderen Zwecken. Zum einen sollen sie Suchmaschinen in die Lage versetzen, Webseiten als PWA zu erkennen und sie in den Suchergebnissen als solche darzustellen. Zum anderen können PWA über diese Datei heute schon in App Stores aufgenommen werden. So integriert Microsofts Suchmaschine Bing in einer ersten Testversion automatisch PWA anhand ihrer Metainformation in den hauseigenen App Store. Es ist auch möglich, selbst PWA dort einzustellen. Beispiel: die App von Twitter (Abbildung 4).