© DrHitch/Shutterstock.com
Shortcuts
Progressive Web-Apps

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.

Shortcut Autorenteam


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.Progressive Web-AppsDas 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 Anwendungsstarts nutzen progressive Web-Apps das Muster App Shell. Es hält die unmittelbar nach dem Start benötigten Anwendungsteile im Cache vor. Das bezieht sich sowohl auf den Rahmen der Anwendung als auch auf ausgewählte Daten. A...

Shortcuts
Progressive Web-Apps

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.

Shortcut Autorenteam


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.Progressive Web-AppsDas 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 Anwendungsstarts nutzen progressive Web-Apps das Muster App Shell. Es hält die unmittelbar nach dem Start benötigten Anwendungsteile im Cache vor. Das bezieht sich sowohl auf den Rahmen der Anwendung als auch auf ausgewählte Daten. A...

Neugierig geworden?


    
Loading...

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