Progressive Web-Apps: Offlinefähige Web-Anwendungen mit nativen Qualitäten

Von Manfred Steyer

Progressive Web-Apps bieten den Komfort nativer Anwendungen, indem sie auf moderne Browser-APIs setzen. Sie sind installierbar sowie offlinefähig und nutzen Hintergrundprozesse für Datensynchronisation und Push Notifications. Falls der Browser der Wahl die genutzten APIs noch nicht unterstützt, stellen sie zumindest den Kern ihrer Funktionalität zur Verfügung. Manfred Steyer stellt anhand eines Beispiels praxisnah die Verwendung von Progressive Web-Apps dar. Dabei widmet er sich der Implementierung unterschiedlicher Caching-Strategien mit Service Workern, beschreibt die Arbeit mit Browserdatenbanken und zeigt, wie Sie echte Push Notifications einsetzen.

• Sprache: Deutsch
• Herausgeber: entwickler.press
• Erscheinungsdatum: 18. Apr. 2017
• ISBN: 9783868027532

Buchvorschau

GmbH

1 Progressive Web-Apps mit Angular 2 und Service Worker

Progressive Web-Apps bieten den Komfort nativer Anwendungen, indem sie auf moderne Browser-APIs wie Service Worker setzen. Sie sind installierbar sowie offlinefähig und nutzen Hintergrundprozesse für Datensynchronisation und Push Notifications. Falls der Browser der Wahl die genutzten APIs noch nicht unterstützt, stellen sie zumindest den Kern ihrer Funktionalität zur Verfügung.

Die Möglichkeiten moderner Browseranwendungen sind geradezu verlockend: Sie sind plattformunabhängig, bieten eine stressfreie Bereitstellung und auch in puncto Benutzerfreundlichkeit lassen sie dank reichhaltiger JavaScript-Komponenten sowie Responsive Design keine Wünsche offen. Ein kurzer Blick auf Produkte wie Office 365 beweist: Im Browser ist mittlerweile so gut wie alles möglich.

Allerdings gibt es auch Bereiche, bei denen Webanwendungen nicht mit ihren nativen Gegenstücken mithalten können: Ladezeit, Offlinefähigkeit, Push Notifications und Datensynchronisation im Hintergrund sind ein paar Beispiele dafür. Lösungen hierfür versprechen progressive Web-Apps, die die nächste Stufe moderner Webanwendungen darstellen. Dieses Kapitel geht darauf ein und zeigt anhand eines Beispiels, wie sie zu offlinefähigen Browseranwendungen beitragen.

Bei diesem Beispiel geht es um eine Web-App, die gebuchte Flüge präsentiert (Abb. 1.1). Der Quellcode dieses Beispiels steht in zwei Varianten unter [1] sowie [2] zur Verfügung.

Abbildung 1.1: Beispielanwendung für eine progressive Web-App

Progressive Web-Apps

Das Schlagwort progressive Web-Apps steht für moderne Webanwendungen, die prinzipiell in jedem gängigen Browser laufen und beim Betrieb in moderneren Modellen zusätzlichen Komfort bieten. Sie sind beispielsweise responsive, fühlen sich wie Apps an und stehen auf Wunsch über ein Icon am Startbildschirm zur Verfügung. Auf diese Weise gestartete Apps können sogar die Adresszeile des Browsers ausblenden, sodass der Benutzer auf den ersten Blick keinen Unterschied zu einer nativen App bemerkt. Das Verhalten dieser „installierten" Weblösungen steuert ein so genanntes Web-App-Manifest. Browser, die dieses Konzept noch nicht unterstützen, nehmen Einstellungen dieser Art in der Regel über Metatags entgegen.

Sofern im Browser der Wahl vorhanden, setzen progressive Web-Apps auf Service Worker. Dabei handelt es sich um Hintergrundprozesse, die losgelöst von der eigentlichen App ablaufen, und Offlineszenarien, Datensynchronisation sowie Push Notifications unterstützen. Als der vorliegende Text verfasst wurde, unterstützten Chrome, Firefox und Opera dieses aufstrebende Konzept. Seitens der Teams hinter Safari und Edge gab es Interessensbekundungen.

Zur Unterstützung der Offlinefähigkeit und zur Beschleunigung des