Ein Einblick in Progressive Web Apps

Die Idee hinter Progressive Web Apps ist einfach und brillant: Man nutzt einen sogenannten Service Worker und lässt diesen als Proxy zwischen der Webseite und dem eigentlichen Server laufen. Das heißt, dass alle Abfragen, die Ressourcen laden, durch den Service Worker gelangen, bevor die eigentliche Übertragung über das Internet stattfindet. Der Service Worker hat direkten Zugriff auf einen Cache und kann sämtliche Ressourcen einer Webseite darin speichern. Somit ist es möglich, Webseiten und Dienste offline verfügbar zu machen, sodass Benutzer jederzeit – egal ob mit, ohne oder nur wenig Internet – die Webseite nutzen können.

Service Worker

Service Worker sind Skripte, die vom Browser im Hintergrund ausgeführt werden. Die Ausführung erfolgt in einem anderen, von der Webseite unabhängigen Thread. Durch die Entkopplung von der eigentlichen Webseite dienen Service Worker zur Ausführung von Funktionalitäten, die weder eine Webseite, noch Benutzerinteraktion benötigen. Momentan beinhalten Service Worker unter anderem die Möglichkeit, Push-Notifications zu erstellen und Netzwerkabfragen zu bearbeiten. Service Worker haben keinen direkten Zugriff auf das DOM. Werden dennoch DOM-Manipulationen benötigt, kann über das postMessage-Interface die Anweisung an die Webseite übergeben werden.

Beim ersten Aufruf einer Progressive Web App wird der Service Worker vom Server geladen, und es wird versucht, den Service Worker zu installieren. Bei der Installation werden im Service Worker definierte Ressourcen in den Cache gespeichert. Kann eine der angeforderten Dateien nicht geladen werden, bricht die Installation ab und wird beim nächsten Seitenaufruf erneut versucht. Nachdem die Installation erfolgreich war, wird der Service Worker über jede Netzwerkabfrage informiert. Er hat somit die Möglichkeit, diese zu bearbeiten oder umzuleiten.

Nachdem der Service Worker beim ersten Aufruf installiert wurde, ist er bei einem erneuten Aufruf direkt verfügbar. Der Service Worker (und der zugehörige Cache) werden – je nach Browser – im Browsercache gespeichert. Google Chrome speichert die Daten in einer gesonderten Kategorie namens „Cookies und andere Website- und Plug-in-Dateien“. Somit kann man in Chrome problemlos den gesamten Browsercache leeren, ohne Service Worker zu löschen. Wird die Seite nun erneut aufgerufen, agiert der Service Worker als Proxy und lädt von der Webseite benötigte Ressourcen aus dem Cache. Somit wird keine Verbindung zum eigentlichen Webserver benötigt, da sämtliche Dateien auf dem lokalen System gespeichert sind.

Momentan werden Service Worker offiziell nur von Google Chrome, Opera und Firefox unterstützt. Eine Internet Explorer Unterstützung wird Microsoft nicht liefern, jedoch hat die Entwicklung für deren neuen Browser Edge bereits begonnen. Apple unterstützt in der aktuellen Version von Safari ebenfalls keine Service Worker. Um Service Worker produktiv einsetzen zu können, wird eine HTTPS Verbindung vorausgesetzt, da der Service Worker Zugriff auf alle Abfragen hat und somit eine Man-in-the-middle-Attacke einfach durchführbar wäre. Während der Entwicklung und solange der Service Worker auf dem lokalen Computer ausgeführt wird, wird kein HTTPS benötigt.

Architektur

Um die Performance von Webseiten – unabhängig von der Internetgeschwindigkeit – zu optimieren, setzen Progressive Web Apps auf eine besondere Architektur, bei der die Webseite in zwei Bereiche unterteilt wird: Die Application Shell und der Content.

Application Shell und Content

Application Shell und Content


Die Application Shell ist das statische Grundgerüst, auf dem die Webseite basiert. Hierzu gehört beispielsweise der Header oder die Sidebar. Der eigentliche Inhalt der Seite ist dynamisch und wird erst später geladen. Diese Trennung ist wichtig, da der Service Worker hierdurch die Application Shell einfach cachen kann. Bei mehrmaligem Laden der Webseite wird die Application Shell ausschließlich aus dem Cache geladen, was die Ladezeiten deutlich reduziert. Im produktiven Einsatz wird häufig der komplette CSS- und JavaScript-Code für die Application Shell in die HTML-Datei geschrieben, um die Performance zu maximieren. Da der Service Worker jedoch auch externe Ressourcen cachen kann, ist dieses Vorgehen nicht notwendig.

Um den Content auch ohne Internetverbindung füllen zu können, besteht die Möglichkeit, die heruntergeladenen Inhalte ebenfalls zu cachen bzw. in der IndexedDB zu speichern. Mediendateien wie beispielsweise Videos können im selben Cache wie die statischen Ressourcen gespeichert und somit ebenfalls offline verfügbar gemacht werden.

Produktiver Einsatz

Immer mehr Unternehmen ersetzen ihre mobilen Webseiten durch Progressive Web Apps. Durch das direkte Anzeigen von Inhalten ohne (lange) Ladezeiten steigt die Benutzerfreundlichkeit einer Webseite deutlich, was wiederum die Absprungrate drastisch reduziert. Zu den größten Vorreitern in diesem Bereich zählt AliExpress, eine chinesische Business-to-Customer-Handelsplattform. Nach der Umstellung auf eine Progressive Web App wurde die Konversionsrate von Neukunden um 104% gesteigert, jeder Besucher der Seite hat im Durchschnitt doppelt so viele Seiten aufgerufen und dadurch 74% mehr Zeit auf der Seite verbracht wie bisher. Immer noch nicht überzeugt? Noch weitere Erfolgsgeschichten finden Sie in den Google Showcases.

Wie allerdings sieht eine Progressive Web App im produktiven Einsatz aus und wie lässt sie sich handhaben? Hier finden Sie einige Beispiele für produktiv eingesetzte Progressive Web Apps:

Eine umfangreiche Liste von Progressive Web Apps finden Sie hier: https://pwa.rocks/

Hinweis: Die Progressive Web Apps werden primär im mobilen Bereich eingesetzt. Um die Beispiele auch an einem Desktop-Computer ansehen zu können, befolgen Sie mit Google Chrome folgende Schritte:

  1. Öffnen Sie die Entwicklerwerkzeuge, indem Sie F12 drücken.
  2. Klicken Sie den kleinen Knopf „Toggle Device Mode“ links oben bei den Entwicklerwerkzeugen.
  3. Aktualisieren Sie die Webseite.

Fazit

Nachdem ich vor kurzem das erste Mal von Progressive Web Apps gehört habe, war ich direkt begeistert von den Möglichkeiten, die durch offline verfügbare Webseiten eröffnet werden. Einer der größten Vorteile von Progressive Web Apps gegenüber nativen Apps ist der drastisch reduzierte Entwicklungsaufwand und der deutlich geringere Bedarf an Know-How bei der Entwicklung. Da (in Zukunft) Progressive Web Apps von allen gängigen Plattformen unterstützt werden sollen, wird nur noch eine Codebasis und ein Entwicklerteam benötigt. Außerdem bedarf die Entwicklung einer Progressive Web App nicht viel mehr Know-How als die Entwicklung einer „normalen“ Webseite, da lediglich der Service Worker inklusive Caching hinzugefügt werden muss.

Der Trend-Graph von zu den Google Suchanfragen über Progressive Web Apps

Der Trend-Graph von zu den Google Suchanfragen über Progressive Web Apps


Das Thema Progressive Web Apps ist aktuell in seiner Blütezeit. Immer mehr Entwickler entdecken die Technologie, und immer mehr Unternehmen stellen ihre Internetpräsenzen auf Progressive Web Apps um.

Beim Schreiben dieses Fazits habe ich viel über die Zukunft von Progressive Web Apps gelesen und bin dabei auf eine Chat-Konversation zwischen einigen Entwicklern gestoßen, die interessante Aspekte aufgebracht haben, an die ich bisher nicht gedacht habe. In der Konversation geht es hauptsächlich darum, ob Progressive Web Apps native Apps wirklich ablösen können. Die Entwickler sind sich einig, dass native Apps nicht komplett ersetzbar sind. Es gibt zwar sehr viele Apps, die problemlos durch Progressive Web Apps ersetzt werden können, jedoch sind einige Apps auf Hardwarefeatures angewiesen, auf die der Browser keinen Zugriff hat. Der wohl interessanteste Aspekt ist eine mögliche Antwort auf die Frage, wieso Apple momentan keine Service Worker unterstützt. Kurzgefasst: aus monetären und politischen Gründen. Sollten Progressive Web Apps tatsächlich native Apps ablösen, fällt mit dem App Store ein großes Standbein von Apple weg. Vergleicht man die beiden App Stores von Google und Apple, fällt direkt auf, dass Googles Play Store weit weniger Umsatz (1,3 Milliarden Dollar vs. 10 Milliarden Dollar) einfährt als Apples App Store. Außerdem verliert Apple damit eine Menge Kontrolle (und Daten), da Apple momentan Informationen über die Installation und Nutzung von Apps sammeln kann. Wird nun ein Großteil der Apps auf Progressive Web Apps umgestellt, verliert Apple den Zugriff auf die Informationen, wohingegen Google durch die weite Verbreitung (~70%) von Google Chrome die Informationen nun sammeln kann.

Ich selbst bleibe jedoch dabei: Progressive Web Apps sind grandios, und wenn durch eine weite Verbreitung genug Druck ausgeübt wird, wird auch Apple früher oder später nachziehen. Allen, die sich noch tiefer mit diesem Thema beschäftigen wollen, kann ich folgendes Video nur empfehlen. Jake Archibald erklärt in seiner Google I/O Präsentation auf witzige Art und Weise das Grundkonzept von Progressive Web Apps und wieso sie die Zukunft sind:

Quellen

Short URL for this post: http://wp.me/p4nxik-2EO
This entry was posted in Web as a Platform and tagged . Bookmark the permalink.

4 Responses to Ein Einblick in Progressive Web Apps

  1. We don´t have service workers working yet, at http://www.selio.com but we did manage to get all the other features working including server-side rendering on the first paint. It is a dramatic improvement for users to be able to try the webapp in less than a second.

Leave a Reply