Was ist eine Progressive Web App?

Native Apps, die über die Stores von Google und Apple publiziert werden, verhalten sich, wie man es gewohnt ist (und wie Apple und Google sich das vorstellen): es gibt ein Button auf dem Homescreen, die Apps senden Push-Notifications, sie funktionieren ohne Internetzugang usw. Mobile Web Apps – die über den Browser aufgerufen werden – können alle diese Dinge nicht.

Progressive Web Apps schließen diese Lücke:

Um Unklarheiten vorzubeugen: bei PWA geht es um mobile Web-Apps, die im Browser laufen. Hybride Apps, die z.B. mit Apache Cordova oder PhoneGap geschrieben wurden (siehe auch dieser Blogbeitrag, laufen zu 100% in der nativen App Umgebung, mit allen Features, die wir von nativen Apps erwarten. Wenn aber daraus Webinhalte erzeugt werden (Web-App), die dann in einem mobilen Browser aufgerufen werden, ist die App sehr eingeschränkt durch die Möglichkeiten des Browsers.

PWA ermöglichen das selbe Benutzererlebnis, das man von nativen Apps gewöhnt ist. Allerdings über den mobilen Browser von Smartphones, Tablets und Desktop-Computern. Sie laufen in einem sicheren Umfeld, der allerdings – im Gegensatz zu nativen Apps – von jedem frei und ohne vorherigen Download über das Internet zugänglich ist.

‍

Progressive Web Apps nutzen Webtechnologien, um eine App-artige User Experience zu erzeugen

‍

Im Folgenden soll gezeigt werden, was genau für Vorteile Progressive Web Apps gegenüber „normalen“ Web-Apps bieten:

1. Progressive Web Apps funktionieren offline

Service Workers sind die mächtige Kerntechnologie hinter Progressiven Web Apps. Im Grunde genommen ist ein Service Worker eine JavaScript Datei, die hinter den Kulissen – unabhängig von der eigentlichen App – arbeitet. Sie wird vom Browser gesteuert reagiert auf Events ohne Nutzerinteraktion (z.B. Ausfallen der Internetverbindung). Sie ermöglichen Offline-Funktionen, Push-Notifications, Aktualisierung von Inhalten im Hintergrund, Caching und noch vieles mehr.

Durch die Service Workers entsteht eine sehr hohe Flexibilität in der App-Entwicklung. Diese geht aber einher mit einer Komplexität, die man bisher in der Entwicklung von Web-Apps nicht kannte. Der Bedarf an vordefinierten “Rezepten” für beliebte Service Workers wird wohl bald rasant ansteigen. Mozilla hat ein Cookbook mit Demos und Code Beispielen für Service Workers veröffentlicht. Zum Beispiel wird dort erklärt, wie man einen einfachen Offline Mode umsetzt, der Daten aus dem Cache anzeigt, wenn ein Netzwerkfehler auftritt.

Momentan sind Service Workers zwar standardmäßig nur für Google Chrome (Android) verfügbar. Mit Polymer gibt es aber schon eine Webcomponents Library, die Service Workers auch für Firefox, IE 11+/Edge, Safari 7+ und Safari (iOS 7.1) verfügbar macht.

‍

2. Progressive Web Apps sind schneller

Das zweite Kernelement von PWA ist die App Shell. Damit ist ein Designkonzept gemeint, bei dem beim ersten Laden der mobilen Web-App eine Basis Shell für ein App User Interface geladen wird. Der Inhalt für die App wird erst nachträglich geladen.

Die App Shell ist keine Web API oder ein Framework, sondern mehr ein Design Ansatz, den Entwickler nutzen können, um die Caching Möglichkeiten der Service Workers voll auszuschöpfen.

‍

‍

Letztendlich verbirgt sich hinter dem Buzzword ein sehr einleuchtender Ansatz: Durch das App Shell Konzept werden das User Interface der App und der Inhalt klar von einander getrennt und separat zwischengespeichert. Im Idealfall wird zuerst die App Shell gecached, so dass sie sehr schnell laden kann, wenn ein Besucher die Web-App erneut zu einem späteren Zeitpunkt aufruft. Wenn die Shell und der Inhalt separat geladen werden, verbessert das die Performance und Usability der App um ein Vielfaches.

Verwendet man z.B. Ionic als Framework, kann das App Layout sofort beim Start der Web-App geladen werden (Tabs, Navigationselemente, Menüs etc.) und wird dann durch die Service Worker zwischengespeichert. Anschließend werden die Inhalte geladen und angezeigt.

‍

3. Progressive Web Apps lassen sich installieren wie native Apps

Bisher konnten mobile Web-Apps nicht installiert werden wie Apps und hatten daher auch kein Icon auf dem Homescreen. Natürlich war es möglich, händisch ein Icon zu erzeugen und das auf dem iOS und Android Homescreen zu platzieren. Aber das wurde nur selten genutzt, viele Benutzer kannten diese Funktion auch gar nicht. Außerdem war die Web-App ja trotzdem keine “richtige” App mit Offline-Funktionen usw.

Mit Progressiven Web Apps ändert sich das!

Chrome und Android haben eine Funktion integriert, die die Installation von Web-Apps auf dem Homescreen mit einem nativen Installations-Button ermöglicht.

Mit Progressive Web Apps kann man Web-Apps installieren, wie man es von nativen Apps gewöhnt ist. Um dem Browser mitzuteilen, dass eine mobile Website wie eine App installiert werden soll, muss eine Manifest-Datei (manifest.json) auf dem Webserver abgelegt und verlinkt werden.

Momentan unterstützt iOS diese Funktion zwar noch nicht. Aber hoffentlich zieht Apple damit noch im Laufe diesen Jahres nach und ermöglicht diese User Experience auch für iOS Nutzer.

‍

Fazit

Progressive Web Apps sind die Zukunft von Web-Apps und machen diese zu einem vollwertigen Äquivalent zu nativen Apps: Sind Inhalte einmal geladen worden, können sie Offline oder bei langsamer Internetverbindung wieder aufgerufen werden. Für die Apps kann sehr einfach ein Icon auf dem Homescreen installiert werden. Progressive Web Apps bringen die Funktionalität mit, die man von nativen Apps gewohnt ist (z.B. Push-Nachrichten). Durch Caching sind sie extrem schnell und stehen nativen Apps kaum nach.

‍

‍

Die folgende Tabelle zeigt die Vorteile von Web-Apps, nativen Apps und Progressiven Web-Apps im Vergleich:

‍

‍

Allerdings wird es wohl noch einige Monate dauern, bis die Entwicklung von Progressiven Web Apps nicht nur von Android (Chrome), sondern auch von iOS (Safari) voll unterstützt wird.