© shutterstock.com/Talaj, © iStockphoto.com/derrrek, © S&S Media
Ohne Umwege zu offlinefähigen Webanwendungen mit Angular und @ angular/service-worker

Progressive Web Apps auf Knopfdruck?


Das vom Angular-Team bereitgestellte Paket @angular/service-worker erleichtert die Umsetzung von Progressive Web Apps, indem es einen Service Worker für Offlineszenarien einrichtet. Das Caching-Verhalten lässt sich über eine Konfiguration anpassen. Außerdem wird die Arbeit mit Push Notifications erheblich vereinfacht.

Video: Interview mit Manfred Steyer

Progressive Web Apps verbinden die Vorzüge des Webs mit dem Besten aus der Welt nativer Anwendungen. Das Ergebnis sind Webanwendungen, die sich vom Home-Screen starten lassen und dank Offlinefähigkeit schlechte oder fehlende Datenverbindungen überbrücken. Eine Schlüsseltechnologie hierfür sind Service Workers, die als Hintergrundprozesse im Browser laufen und bei Bedarf Anfragen aus einem Cache beantworten, Browserdatenbanken mit Web-APIs synchronisieren oder Push Notifications entgegennehmen.

Auch wenn Service Workers sehr mächtig sind, implementieren sie häufig dieselben Aufgaben. Genau hier setzt das Angular-Team mit dem Paket @angular/service-worker [1] an: Es bietet eine schlanke Abstraktion für die nicht immer handlichen Browser-APIs rund um Service Workers und implementiert immer wiederkehrende Anforderungen. Dazu gehört etwa das Cachen von Anwendungsbestandteilen, aber auch das Empfangen und Anzeigen von Push-Nachrichten.

Dieser Artikel geht anhand eines Fallbeispiels auf dieses Paket ein, das beginnend mit Angular 4.3 veröffentlicht werden soll und derzeit schon von der eigenen Website https://angular.io genutzt wird. Dabei handelt es sich um eine einfache Anwendung zum Suchen nach Flügen (Abb. 1), die dank @angular/service-worker nach und nach um die genannten Möglichkeiten erweitert wird. Das gesamte Beispiel findet sich unter [2].

steyer_service_worker_1.tif_fmt1.jpgAbb. 1: Fallbeispiel

Service Workers

Service Workers sind lediglich von einer Website installierte Skripte, die der Browser im Hintergrund ausführt. Sie laufen fortan sogar ohne die Website und können so anstehende Daten synchronisieren oder Push-Nachrichten empfangen. Allerdings beschäftigen sie die CPU in der Regel nicht ständig, sondern nur dann, wenn sie von einem Browserereignis informiert werden.

Zur Realisierung offlinefähiger Webanwendungen können Service Workers auch HTTP-Anfragen abfangen und entscheiden, wie sie zu beantworten sind. Beispielsweise können sie dazu auf einen Cache zugreifen oder frische Daten aus dem Web heranschaffen.

Um Sicherheitslücken zu vermeiden, gilt für Service Workers die Same Origin Policy (SOP). Das bedeutet salopp formuliert,...

Neugierig geworden?

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