Blog

JavaScript Days | Angular Days | React Days | HTML & CSS Days
Die großen Trainingsevents für JavaScript, Angular, React, HTML & CSS
16. - 19. März 2020 | München
23
Nov

PROGRESSIVE WEB APPS: DIE NÄCHSTE GENERATION CLIENTANWENDUNG

Christian Liebel

Progressive Web Apps (PWA) sind in aller Munde. Zurecht, denn die Chancen, dass dieses Anwendungsmodell eine große Verbreitung erfahren wird, stehen gut. Die Idee ist einfach: Webanwendungen werden genauso mächtig wie native Anwendungen – Eigenschaften wie Offlinefähigkeit oder Pushbenachrichtigungen inklusive. Ganz ohne Installation können diese Anwendungen im Browser eines Anwenders ausgeführt werden. Möchte dieser die App häufiger verwenden, bekommt sie per Fingertipp ein Icon auf dem Homescreen.

Das PWA-Anwendungsmodell wurde von Google definiert. Es handelt sich dabei allerdings nicht um eine Technologie, sondern um eine Sammlung bestimmter Eigenschaften, die eine Anwendung erfüllen kann oder muss. In welchem Framework eine PWA realisiert wird, ist daher unerheblich. Nachstehend folgt ein kurzer Rundflug über zehn PWA-Eigenschaften:

PWAs setzen das Prinzip des Progressive Enhancement um: Nutzer von Browsern, welche das PWA-Modell unterstützen, haben Zugriff auf die erweiterten Features. Auf übrigen Browsern funktioniert die Anwendung aber dennoch, lediglich mit reduziertem Funktionsumfang. Da davon auszugehen ist, dass die Anwender über Zeit auf aktuelle Browserausgaben wechseln, sollte sich die Nutzerbasis, die in den Genuss des erweiterten Feature-Sets kommt, graduell vergrößern.

Weiterhin besitzen PWAs ein Responsive Layout, sie passen sich also den zur Verfügung stehenden Bildschirmabmessungen an. Sie sind zudem verbindungsunabhängig, funktionieren also auch bei schwachen oder nicht vorhandenen Netzverbindungen – zumindest im Rahmen der Möglichkeiten. Da sie die nächste Generation Clientanwendung werden wollen, sollen PWAs App-ähnlich aussehen und sich so verhalten. Sie bieten einen stets aktuellen Datenumfang, zum Beispiel aktuelle Nachrichten oder Produktzustände.

Sie sind sicher, da sie ausschließlich über das Hypertext Transfer Protocol Secure übertragen werden dürfen. PWAs können dank Metadaten von reinen Webseiten unterschieden werden. Dies erlaubt es Suchmaschinen, eine gesonderte Suche nach solchen Anwendungen anzubieten. Microsoft übernimmt gefragte PWAs anhand dieser Metadaten automatisch in den Windows Store, indem es sie als Anwendung für die Universal Windows Platform (UWP) verpackt. Überdies erlauben PWAs das Reengagement von Anwendern durch Pushbenachrichtigungen à la „Max Schmitt hat Ihren Post kommentiert. Tippen Sie hier, um den Kommentar zu lesen.“ Die Benachrichtigungen integrieren sich in die normale Benachrichtigungszentrale des jeweiligen Systems. Wünscht der Anwender einen schnellen Zugriff auf die PWA, so kann er mit einem Fingertipp ein Symbol der Anwendung zum Homebildschirm hinzufügen.

Abschließend sind PWAs verlinkbar: Als inhärente Eigenschaft des Web kann mithilfe eines URL auf die Anwendung oder sogar Anwendungssichten und -zustände direkt verwiesen werden.
Das zentrale technische Mittel zur Erreichung dieser Eigenschaften stellt der Service Worker dar. Er agiert als Interceptor bzw. Proxy, der zwischen Website und Internet sitzt. Als zentrale Stelle kann er entscheiden, ob eine Anfrage aus seinem Cache beantwortet werden kann oder über Netzwerk gesendet wird. So bietet es sich an, Anwendungsassets wie HTML-Sichten, CSS-Regeln oder JavaScript-Dateien dort abzulegen, sodass das Anwendungsgrundgerüst (App Shell) immer aus dem Cache bedient werden kann. Dieses kann etwa eine Meldung ausgeben, dass derzeit keine Internetverbindung zur Verfügung steht und eine Anfrage des Benutzers daher nicht beantwortet werden kann. Ein Service Worker kann von jeder beliebigen Website registriert werden und wird unabhängig von ihrem Lebenszyklus ausgeführt: So können etwa soziale Netze über neue Posts informieren und dem Anwender eine Pushbenachrichtigung schicken, ohne dass die Website geöffnet sein muss.

Eine weitere Technologie im Umfeld der Progressive Web Apps stellt das Web App Manifest dar, das zur Umsetzung der Unterscheidbarkeit reiner Websites und Webanwendungen sowie der Definition des Homescreen-Icons herangezogen wird.

Alle großen Browserhersteller sind mittlerweile an Bord: In Google Chrome und Mozilla Firefox sind die erforderlichen Technologien bereits seit einigen Ausgaben implementiert. Microsoft hat die Implementierung des Service Workers in seinen Browser Edge Anfang 2016 aufgenommen, aber noch nicht fertiggestellt. Anfang August 2017 wurde bekannt, dass auch Apple seinen Browser Safari um die Unterstützung für Service Worker erweitert. Zum gegenwärtigen Zeitpunkt können PWAs also noch nicht plattformübergreifend eingesetzt werden. Sobald dies aber der Fall ist, dürfte die plattformübergreifende Entwicklung von Clientanwendungen dank der Progressive Web Apps endlich gelöst sein. Übergangstechnologien wie Apache Cordova oder GitHub Electron, die derzeit zur Entwicklung plattformübergreifender Anwendungen auf Basis von Webtechnologien herangezogen werden, würden damit weniger relevant. Ebenso obsolet würde das derzeit noch aktuelle Konzept der App-Stores als zentrale Vertriebsplattform für Anwendungen.
Googles Single-Page-Web-Application-Framework Angular enthält mit dem NgServiceWorker eine Schnittstelle zur Registrierung eines Service Workers. Die Angular CLI kann zudem Angular-Anwendungen dergestalt bündeln, dass sie zur Verwendung mit dem Service Worker geeignet sind. Somit können auch Angular-Apps auf einfache Weise in den Genuss von Offlinefähigkeit oder Pushbenachrichtigungen kommen.

Angesichts der zu erwartenden breiten Browserunterstützung ist jetzt ein guter Zeitpunkt, um Progressive Web Apps zu evaluieren. Eine Real-Word-Anwendung, die schon heute als PWA herausgegeben wird, ist der mobile Client von Twitter, der unter mobile.twitter.com zur Verfügung steht. Auf Desktop- und Mobilbrowsern, die PWAs schon heute unterstützen, kann der Client ausprobiert werden: Inklusive Offlinefähigkeit, Homescreen-Icon und Pushbenachrichtigungen.

 

Gastbeitrag von Christian Liebel