Progressive Web Apps – so funktionieren Webanwendungen im Browser
Der Ausspruch „Dafür gibt es eine App!“ ist mittlerweile zum Volksgut geworden und kaum ein Anbieter von Online-Services – insbesondere im Bereich E-Commerce – kann es sich noch leisten, seine Angebote nicht in Form einer App für Smartphones oder Tablet-PCs bereitzustellen. Aber ist das überhaupt notwendig?
Der Entwicklungs- und Pflegeaufwand für eine native App (womöglich für mehrere Plattformen) PLUS mobile Website ist nicht gerade gering. Die Technik des responsiven Webdesigns ermöglicht es, Webangebote auf mobilen Browsern mit sehr guter Usability bereitzustellen. Diese Webseiten funktionieren jedoch naturgemäß nur solange, wie eine Online-Verbindung besteht.
An dieser Schwachstelle setzen Progressive Web Apps (kurz: PWAs) an, die Caching-Funktionen in modernen Browsern nutzen und somit den Offline-first-Ansatz erfüllen.
Funktionsweise einer Progressive Web App
Eine Progressive Web App ist optisch nicht von einer „normalen“ responsiven Webseite zu unterscheiden und ist in der Lage, die Vorteile von nativen Apps und webbasierten Apps zu vereinen. Eine PWA passt sich dem jeweiligen Endgerät an, und dies nicht nur in der Darstellung im Browser.
Durch die Nutzung des Browsers in Endgeräten wie Smartphones, Tablet-PCs und auch in aktuellen Versionen mehrerer Desktop-Browser agiert eine Progressive Web App plattformunabhängig. Ganz gleich, ob es sich beim OS des Endgerätes um Android, Windows 10 oder iOS handelt – die Funktionen und Darstellungen sind immer gleich.
Aktuelle Browser-Updates stellen zusätzliche Schnittstellen bereit, die den Zugriff auf die Kamera, den GPS-Koordinaten oder den Neigungssensor erlauben und somit Nutzererfahrungen ermöglichen, wie man sie bislang nur von „echten“ Apps kennt.
Eine Schlüsselfunktion einer Progressive Web App stellt der so genannte Service Worker dar. Hierbei handelt es sich um ein JavaScript, welches vom Webbrowser im Hintergrund ausgeführt wird. Der Service Worker innerhalb einer PWA stellt Caching-Funktionen für die Offline-Verwendbarkeit bereit. Sobald eine Progressive Web App im Browser gestartet wird, können deren Inhalte beim nächsten Besuch erneut angezeigt werden – auch ohne Internetverbindung! Des Weiteren werden Push-Nachrichten, wie sie von nativen Apps bekannt sind, durch die Service-Worker-Technik ermöglicht. Darüber hinaus kann die Startseite einer Progressive Web App wie eine gewöhnliche App auf dem Desktop platziert und von dort aus gestartet werden. Sogar das Einblenden von Zusatzinformationen auf dem Icon (z. B. Anzahl neuer Nachrichten) ist durch den Einsatz von Service Workern möglich.
Service Worker setzen den Einsatz des verschlüsselten HTTPS-Übertragungsprotokolls voraus, was zur zusätzlichen Datensicherheit beiträgt. Zwar müssen Service Worker grundsätzlich eigens programmiert werden, jedoch stellen eine Reihe von Frameworks für die Entwicklung von Web Apps (z. B. Angular und dem darin enthaltenen Mobile Toolkit) Service Worker bereit, so dass diese nicht von Grund auf selbst erstellt werden müssen.
Der Unterschied zwischen einer mobilen Web App und einer PWA ist im Grunde genommen nicht allzu groß. Um aus einer bereits bestehenden mobilen Web App eine Progressive Web App zu machen, bedarf es nur weniger Zusatzfeatures:
– Einbindung eines SSL-Zertifikates (häufig bereits vorhanden)
– eine JSON-Manifest-Datei
– Einbindung eines Service Workers (ggf. durch ein Framework)
Vorteile von Progressive Web Apps
Die genannten Möglichkeiten von Progressive Web Apps bieten eine Reihe von Vorteilen gegenüber herkömmlichen Apps:
- PWAs benötigen keine Installations- und Update-Prozeduren. Auf den Webseiten einer Progressive Web App ist meist ein „Add-to-Homescreen-Button“ enthalten, mit dessen Hilfe die Anwendung auf dem Smartphone-Startdisplay abgelegt werden kann. Hinzu kommt, dass PWAs keinen Speicherplatz auf dem Endgerät belegen. Durch die Tatsache, dass Progressive Web Apps aus mobilen Webseiten bestehen und im Browser arbeiten, aktualisieren sie sich automatisch online, wodurch lästige Updates über den App Store entfallen.
- Zum Abrufen einer PWA muss der Nutzer nicht mehr den Umweg über einen App Store gehen. Die Progressive Web Apps sind mit jeder Suchmaschine online auffindbar, somit entfällt für den Anbieter das zusätzliche Marketing in den App Stores. PWAs können durch entsprechende SEO-Maßnahmen bei Google & Co. platziert und beworben werden.
- Apropos Suchmaschinen: Da mobile Webseiten, zu denen PWAs naturgemäß gehören, durch kurze Ladezeiten bestechen, werden sie insbesondere in der Google-Suchmaschine höher bewertet. Die gute Performance von Progressive Web Apps wird mit entsprechend hohem Ranking belohnt.
- Ein weiterer Aspekt, der dem Ranking in den Suchmaschinen zugute kommt, ist die Teilbarkeit von PWAs durch Verlinkung. Die Web App ist mit einem Fingertipp auf einen Link im WWW leichter zu erreichen als eine klassische App in einem App Store.
- Einen unschätzbaren Vorteil bieten die Service Worker, die den „Offline-First“-Gedanken möglich machen. JavaScripts, die wenig Ressourcen benötigen, regeln den Kommunikationsfluss zwischen dem Client (Browser) und dem Webserver und ermöglichen den Austausch von Offline-Inhalten. Der Nutzer kann somit jederzeit auf „seine“ PWA im Browser zugreifen, auch wenn gerade keine Internetverbindung besteht. Dies ermöglicht höchstmögliche Unabhängigkeit von Netzverfügbarkeiten, Bandbreiten oder Kosten für Mobilfunk-Datenvolumen.
- Nicht zu unterschätzen ist auch der wirtschaftliche Aspekt durch entfallende Doppel-Entwicklung für native und Web Apps. Durch PWAs kann der Aufwand für das Erstellen einer nativen App entfallen, was die Preise für die Entwicklungsarbeit deutlich reduziert.
… und die Nachteile?
Bei aller Euphorie, positiven Erfahrungen von Anwendern und Entwicklern sowie der explosionsartigen Verbreitung von mobilen Web Apps sollen auch die Nachteile von PWAs nicht verschwiegen werden.
Ein großer Vorteil – Unabhängigkeit von App Stores – kann auch als Nachteil gesehen werden: Progressive Web Apps können nicht in App Stores platziert werden. Eine gewisse Ausnahme bildet hierbei der Microsoft Store: PWAs werden von der Suchmaschine Bing aufgefunden, in einem Wrapper verpackt und als native Apps für Windows 10 Mobile angeboten.
Des Weiteren befindet sich das PWA-Format noch immer in der kontinuierlichen Weiterentwicklung; noch längst nicht alle Betriebssysteme und Browser unterstützen sämtliche APIs. Somit bleibt abzuwarten, welche weiteren nativen Gerätefunktionen künftig von PWAs genutzt werden können. Insbesondere das iPhone-eigene iOS war lange Zeit zögerlich bei der Umsetzung der neuen Anforderungen.
Fest steht, dass niemals alle nativen Gerätefunktionen genutzt werden können – es fehlt beispielsweise der Zugriff auf die Kontakte, den Kalender sowie Bluetooth und NFC.
Selbst wenn es durch Weiterentwicklungen im Browser-Segment in absehbarer Zeit möglich sein sollte, Progressive Web Apps tiefer in das jeweilige OS zu integrieren, so werden sie nie native Gerätefunktionen einbeziehen können, wie es bei „echten“ Apps heute möglich ist.
Beispiele für Progressive Web Apps
Der Boom in Sachen Progressive Web Apps ist ungebrochen. So hat Google seit jeher die PWA-Entwicklung unterstützt. Dies wird z. B. deutlich in der Umsetzung von Google Maps, welches über eine schlanke Progressive Web App verfügt.
Probieren Sie den Kartendienst des Branchenprimus auf einem mobilen Browser aus und Sie werden feststellen, dass einmal geladene Karten später auch offline zur Verfügung stehen. Auch die Website von Starbucks kann auf einem Smartphone als PWA genutzt werden. Eine umfangreiche Übersicht, was Progressive Web Apps leisten können, zeigt die Übersicht https://pwa.rocks.
Fazit
Progressive Web Apps sind zeitgemäße Alternativen zu meist teuren und aufwändigen nativen Apps. Sie verfügen über eine hohe Usability und können auf fast allen Smartphones und Tablets installiert werden – einfach durch Browser-Aufruf.
Wie bereits angedeutet, kann jedoch die Nutzung einer Progressive Web App auf einigen mobilen Geräten Probleme mit sich bringen. Während Mozilla, Google Chrome, Opera und MS-Edge bereits viele Funktionen unterstützen, hängt u. a. Apple im Vergleich in der Entwicklung noch ein wenig hinterher. Seit dem Erscheinen von iOS 11.3 im April 2018 unterstützt das Betriebssystem immerhin die Nutzung von Service Workern.
Interessante Beitraege:
PWA erklärt auf Wikipedia
Was können solche Web Apps? Eine Betrachtung von bam
Bilder: Canva
Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.
Schreibe einen Kommentar