© Spirit Boom Cat/Shutterstock.com
Kolumne: Die Angular-Abenteuer

Kolumne: Die Angular-Abenteuer


Mit dem neuen Paket @angular/pwa lässt sich eine klassische Angular-Anwendung augenblicklich in eine offlinefähige und installierbare Progressive Web App umwandeln. Das ist dermaßen einfach, dass es fast keinen Grund gibt, auf diese Vorteile zu verzichten.

2018 ist das Jahr der Progressive Web Apps (PWAs), alle wichtigen Browseranbieter sind nun im Boot. Die Vorzüge von Webanwendungen lassen sich mit jenen ihrer nativen Gegenstücke kombinieren. Eine einfache Auslieferung übers Web, gepaart mit Offlinefähigkeit und einem raschen Start über den Home Screen sind nur einige der neuen Möglichkeiten. Abbildung 1 zeigt ein Beispiel für solch eine Anwendung, die gerade eine Push Notification empfängt – eine weitere Möglichkeit von PWAs.

Auch wenn die dafür geschaffenen Browser-APIs vom Prinzip her simpel sind: Handlich sind sie nicht gerade. Deswegen bieten sich darauf aufbauende Bibliotheken an. In dieser Ausgabe möchte ich eine dieser Bibliotheken vorstellen. Sie nennt sich @angular/pwa und ist eine Rundum-sorglos-Lösung des Angular-Teams. Dank Scaffolding und der Bibliothek @angular/service-worker lässt sich damit im Handumdrehen eine normale Angular-App in eine Progressive Web App verwandeln. Den Quellcode dafür gibt es wie immer in meinem Repository unter [1].

steyer_aa_1.tif_fmt1.jpgAbb. 1: Installierte Progressive Web App mit Push Notification

Service Worker

Das Herzstück von Progressive Web Apps ist der Service Worker. Dabei handelt es sich um einen Hintergrundprozess, der von einer Webanwendung im Browser installiert wird und danach autark – also auch ohne Webanwendung – läuft. Dieser Hintergrundprozess ist jedoch nicht ständig am Arbeiten, sondern reagiert lediglich auf Ereignisse. Er nimmt zum Beispiel Push Notification in Empfang oder fängt HTTP-Anfragen ab (Abb. 2).

steyer_aa_2.tif_fmt1.jpgAbb. 2: Service Worker

Nach dem Abfangen einer HTTP-Nachricht kann der Service Worker entscheiden, wie er darauf antworten möchte. Beispielsweise kann er mit Daten aus dem Cache antworten oder aktuelle Daten aus dem Internet laden. Somit lassen sich verschiedene Caching-Strategien für den Offlinebetrieb implementieren. Ein durchdachter Überblick dazu findet sich im „Offline Cookbook“ von Jake Archibald aus dem Google-Chrome-Team [2].

Im Gegensatz zum normalen HTTP-Cache hat der Entwickler das Verhalten des Service Workers voll unter Kontrolle und kann somit bestimmen, was unter welchen Umständen von wo geladen wird. Wichtig ist auch, dass der Service Worker der Same-Origin Policy unterliegt. Das heißt, er darf nur für die Origin, von der er installiert wurde, tätig werden. Für zusätzliche Sicherheit sorgt auch, dass Service Workers nur über HTTPS ausgeliefert werden dürfen. Eine Ausnahme ist localhost, um lokal zu testen.

Web App Manifest

Damit sich die Anwendung auch auf dem Home Screen installieren lässt, muss sie ein Web App Manifest anbieten. Dabei handelt es sich um eine JSON-Datei mit Metadaten wie dem Namen und dem Icon, mit denen die Anwendung auf dem Home Screen auftauchen soll (Listing 1).

Listing 1: JSON-Datei mit Metadaten

{ "name": "flight-app", "short_name": "flight-app", "theme_color": "#1976d2", "background_color": "#fafafa", "display": "standalone", "scope": "/", "start_url": "/", "icons": [ { "src": "assets/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, […] ] }

Um festzulegen, wie sich die Anwendung nach dem Start über den Home Screen zu präsentieren hat, setzt man die Eigenschaft display ein. Der hier verwendete Wert standalone sorgt dafür, dass keine Adresszeile erscheint und die Anwendung deswegen wie eine native aussieht (Abb. 1).

Damit der Browser das Web App Manifest entdeckt, muss die Anwendung darauf verweisen. Das erfolgt über einen link-Tag: <link rel="manifest" href="manifest.json">....

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang