© best_vector/Shutterstock.com
Windows Developer
PWAs erstellen mit Angular und @angular/pwa

Von null auf Progressive in einem Schritt


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 auf GitHub [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 Notifications 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. Einen durchdachten Ü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, e...

Windows Developer
PWAs erstellen mit Angular und @angular/pwa

Von null auf Progressive in einem Schritt

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.

Manfred Steyer


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 auf GitHub [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 Notifications 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. Einen durchdachten Ü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, e...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang