Progressive Web Apps mit Angular 7

 

Wer sich heute mit den neuesten Entwicklungen in der Webentwicklung auseinander setzt, ist aller Wahrscheinlichkeit nach schon auf die Buchstaben PWA—kurz für Progressive Web App—gestoßen. Der Begriff verbindet Funktionalitäten moderner Browser, die eine Webanwendung mit Merkmalen einer nativen App anreichert. Hierzu zählen unter anderem Installierbarkeit und Benachrichtigungen.

Im Folgenden wird erklärt, wie man eine Angular-Anwendung für PWA-Funktionen einrichtet und wie man die Anwendung auf einem Endgerät installiert. Ausgangspunkt ist eine Single Page Application (SPA). Um aus einer SPA eine Progressive Web App zu machen, muss ein Service Worker hinzugefügt werden. Mozilla beschreibt Service Workers so:

Service Worker verhalten sich im Wesentlichen wie Proxy-Server, welche zwischen der Webanwendung bzw. dem Browser und dem Netzwerk (sofern dieses verfügbar ist) sitzen. Sie sollen u. a. das Erstellen wirksamer Offline-Erfahrungen ermöglichen und können Netzwerkanfragen abfangen und passende Maßnahmen abhängig davon ergreifen, ob das Netzwerk verfügbar ist und ob der Server veränderte Ressourcen enthält. Sie erlauben außerdem den Zugriff auf Push-Benachrichtigungen und background sync APIs.

In der Praxis wird der Service Worker beim Aufruf der Anwendung registriert:

navigator.serviceWorker.register('./sw.js')

Der Service Worker ist das Kernelement einer PWA. Alle modernen Browser unterstützen die Service Worker API.

Das Beispiel-Projekt

Zur Demonstration einer PWA erstellen wir ein neues Angular-Projekt mit der Angular CLI. Die Webanwedung soll auch eine nützliche Funktion haben. Es ist eine Timer-App für Fitnessübungen. Der Timer zählt 60 Sekunden herunter und beginnt danach eine neue Runde. Die Anzahl der Runden lässt sich zu Beginn des Workouts festlegen.

Angular-Projekt initialisieren:

$ ng new EMOM-Timer

Wenn die Anwendung—wie in unserem Beispiel—auf Angular basiert, muss man das beschriebene Setup nicht manuell durchführen. Für das Setup einer PWA bietet die Angular CLI folgenden Befehl:

$ ng add @angular/pwa --project EMOM-Timer

PWAs lassen sich auf dem Smartphone dem Homescreen hinzufügen. So werden sie wie Apps aus dem App Store angezeigt. Der Pfad zu dem dabei angezeigten App-Icon wird in einer Datei namens manifest.json hinterlegt. Diese Datei wird mit dem letzten CLI-Befehl dem src-Ordner hinzugefügt. In dieser Datei sind weitere Konfigurationen möglich, um die PWA noch mehr wie eine native App wirken zu lassen.

Für das Styling wird Angular Material verwendet. Sobald die Logik des Timers implementiert ist—der Code des EMOM-Timers findet sich hier—kann die Anwendung gebaut werden:

$ ng build --prod

Nun wird die Anwendung noch auf einem Server bereitgestellt und schon ist der EMOM-Timer für alle CrossFit- und PWA-Enthusiasten erreichbar.

Zum Homescreen hinzufügen

Service Workers haben in Safari unter iOS noch den Status “Experimental Feature” (Stand: März 2019). Diesen Status wird die Funktion voraussichtlich mit der iOS-Version 12.2 verlassen. Bis dahin muss die Funktion manuell aktiviert werden. Die Einstellung findet man unter Einstellungen > Safari > Erweitert > Experimental Features > ServiceWorkers.

Danach rufen wir die Webanwendung auf: https://emom-timer.herokuapp.com. Ein Klick auf das Teilen-Icon öffnet das Kontext-Menü. Hier wählen wir “Zum Homescreen” aus. Wir schließen den Browser und finden auf dem Homescreen die neue App. Die Funktion nennt sich Add to Home screen und ist ein Baustein von PWAs.

Interessant: Bisher gab es die Funktion “Zum Homescreen” auch schon. Das ist allerdings ein Shortcut, um eine Website zu öffnen. Dazu öffnete sich bisher der Browser. iOS erkennt, dass es sich um eine PWA handelt und behandelt sie wie eine native App. So lässt sich zwischen PWA, Browser und anderen nativen Apps einfach wechseln.

Progressive Web Apps können nicht nur auf Mobilgeräten installiert werden. In Chrome auf macOS findet sich die Funktion “PWA installieren”.

Weitere Möglichkeiten von PWAs

Es wurde gezeigt, wie man eine Progressive Web App mit Angular initial einrichtet und wie man die Anwendung auf einem Endgerät installiert. Wie eingangs erwähnt, sind auch Benachrichtigungen mit Progressive Web Apps möglich. Außerdem kann man auf die Hardware des Geräts zugreifen. So lassen sich die Kamera oder der Accelerator nutzen. Als wichtiges Feature ist auch die Offline-Funktionalität zu nennen. Hierfür gibt es die IndexedDB für die Client-seitige Datenspeicherung.

Progressive Web Apps sind eine Möglichkeit für Entwickler, ihre Anwendungen ohne den Umweg über einen App Store dem Nutzer bereitzustellen. Wer weitere Progressive Web Apps testen möchte, der findet auf pwa.rocks eine Auswahl von Anwendungen.