Einleitung
In letzter Zeit stolpert man bei der Recherche im Netz zu mobilen Anwendungen immer öfter über den Begriff der Progressive Web App, oder kurz PWA. Im diesem Artikel möchten wir Ihnen erzählen was eine PWA eigentlich genau ist und darauf eingehen welche Vorteile und Nachteile durch den Einsatz von PWAs, im Vergleich zu traditionellen Webseiten oder sogenannten “nativen” Apps, entstehen. Ausserdem möchten wir kurz auf PWAs als Desktopanwendungen eingehen.
Neugierig geworden? Dann lass uns damit beginnen was eine PWA ist. Dafür nehmen wir den Namen einfach mal auseinander und gucken uns zunächst erstmal das Web an.
Was sind eigentlichen Webtechnologien?
PWAs basieren auf den gleichen Webtechnologien (HTML5, Javascript, CSS3) mit deren Hilfe zum Beispiel auf dieser Blog erstellt wurde den du gerade liest. Zum Ausführen von Programmen, die mit diesen Technologien erstellt wurden, verwendet man in der Regel einen sogenannten (Internet-) Browser wie z.B. Chrome, Firefox, Safari oder Edge. Welche Funktionen möglich sind wird also in erster Linie davon vorgegeben, welche Schnittstellen/Möglichkeiten diese Browser zur Verfügung stellen.
Mit einer immer größeren Verbreitung der Internetnutzung in alle Lebensbereiche hinein, hat sich auch der Funktionsumfang von Internet Browsern in den vergangen Jahren immer mehr erweitert. Zum Ende des letzten Jahrtausends wurden diese hauptsächlich eingesetzt um verknüpfte Informationen darzustellen. Heutzutage kann man im Browser so verschiedene Dinge tun wie z.B. in einer Business Anwendung wie SAP zu arbeiten, Office Programme bedienen, Netflix gucken, mit anderen Leuten chatten oder Computerspiele spielen.
Sie sind also mittlerweile längst zu einer Plattform zum Ausführen von Programmen aller Art geworden und übernehmen so Aufgaben die früher von “nativen”, also speziell für ein bestimmtes Betriebssystemen wie Windows, Linux, MacOS, Android oder iOS, geschriebenen Programmen erledigt wurden.
Das Schreiben von Programmen unter Zuhilfenahme von Webtechnologien hat viele Vorteile (link zu Blogartikel?) gegenüber klassischer installierter Software. So müssen z.B. Updates nicht immer auf jedem Endgerät installiert werden und ein einmal geschriebenes Programm kann direkt unter allen Betriebssystemen ausgeführt werden auf denen ein Browser zur Verfügung steht, anstatt für jedes eine eigene Version entwickeln zu müssen. Nutzt man nun diese Programme muss man immer die entsprechende Webseite über ihre Adresse (wie z.B. https://netflix.com) in Browser aufrufen. Um dies zu vereinfachen kann man sich Lesezeichen im Brower hinterlegen – aber so komfortabel wie ein installiertes Programm fühlt sich das nicht an. Da kommt das App aus “Progressive Web App” ins Spiel.
Was ist eine App(-lication)
Die Bezeichnung “App” hat sich vor allem seit Veröffentlichung des ersten iPhones mit dem “AppStore” verbreitet durchgesetzt. Sie beschreibt im Grunde ein installierbares Programm das man auf seinem Endgerät (z.B. Smartphone, SmartTV, Tablet, Computer) installieren und anschliessend verwenden kann. Insofern ist es im Grunde nichts anders als das was man früher einfach Software oder Programm genannt hat. Wenn eine App installiert wurde kann sie, im Gegensatz zu klassischen Webseiten, ohne Zuhilfenahme eines Browsers mit Internet Zugriff, direkt vom Gerät aus (meist über einen “Homescreen”, “Desktop”, “Launcher” oder ein “Startmenu” oder “Finder”) gestartet werden. Da auf all den oben genannten Endgeräten auch Browser zum Anzeigen von Webseiten zur Verfügung stehen, kann man über diese auch mit Webtechnologien geschriebene Programme, die als “klassische” Webseiten implementiert wurden, zugreifen.
Wenn wir also ein mit Webtechnologien entwickeltes Programm direkt auf einem Endgerät installieren könnten, würden wir beide Vorteile vereinen. Nur müsste sich dieses Programm auf einem Smartphone anders verhalten als z.B. auf einem Laptop, da sich in diesem Fall Bedienungs- und Darstellungsmöglichkeiten deutlich unterscheiden. Des weiteren ist auf dem Smartphone z.B. ein nicht existierender Internetzugang zumindest von Zeit zu Zeit nahezu unvermeidlich.
Eine Lösung für diese Probleme geht auf das im Jahre 2003, als Steven Champeon das Konzept der progressiven Verbesserung engl. progressive Enhancement vorstellte. Dieses beeinflusste die Browserentwicklung und lieferte uns den letzten Baustein für unsere PWAs.
Der andere Weg: Progressive Enhancement
Webseiten wurden schon zu ihren ersten Tagen in verschiedenen Browsern und auf ganz unterschiedlichen Computern ausgeführt. Daher ist die Möglichkeit das eine bestimmte Funktion für einen Benutzer nicht zur Verfügung steht, schon seit je her fester Bestandteil der Konzeptions von webbasierten Applikationen. Ursprünglich wurde dieses Problem durch die sogenannte “würdevolle Herabstufung” (engl. “graceful degradation”) angegangen.
Dabei wird das Programm zunächst für die modernste und umfangreichste Plattform entworfen und im Anschluss eine alternativer Entwurf für ältere / schlichtere Umgebungen erstellt. So wird z.B. zu einem Link ein alternativer Text hinterlegt der in (sehr alten) textbasierten Browsern, die keine Bilder darstellen können, anstatt des Bildes angezeigt wird.
Selbst heute werden diese sogenannten alt-texts noch gepflegt – allerdings hauptsächlich um Suchmaschinen wie Google, eine einfache Möglichkeit zu bieten den Inhalt des Bildes einschätzen zu können.
Die progressive Verbesserung geht einen anderen Weg: Inhalt und Darstellung werden konzeptionell komplett voneinander getrennt. Verschiedene Sammlungen von unterstützten Funktionalitäten und Anforderungen (wie z.B. Touch Eingabe oder Displaygrösse) werden von dem Programm erkannt, um anschliessend eine jeweils optimierte Version der Darstellung oder Bedienung zu nutzen. Als Beispiel, wenn Sie in einem Chrome oder Safari Browser auf Ihrem Smartphone die Adresse https://spiegel.de aufrufen, werden Sie eine mobil optimierte Darstellung der Spiegel Online Seite erhalten, welche sich in Optik und Bedienung deutlich von der Seite unterscheidet die im Safari oder Chrome Browser auf Ihrem Laptop oder Tablet anzeigt.
Hinzu kommen weitere, im Laufe der Jahre entstandene, Technologien die je nach Plattform und Browser mal zur Verfügung stehen können und manchmal nicht. Beispiele sind der Zugriff auf eine Webcam oder Handy Kamera, der Zugriff auf den Standort des Benutzers, die Möglichkeit auf ein Audioaufnahmegerät zuzugreifen, Videos im Vollbild darzustellen, aber auch Nachrichten (sogenannte Push Notifications) zu empfangen (selbst wenn die Webseite gerade gar nicht geöffnet ist) und vieles mehr.
Damit haben wir jetzt alle Bausteine um eine Progressive Web App zu erstellen.
Was ist nun eine Progressive Web App?
Eine Progressive Web App ist eine mit Webtechnologien erstellte Applikation. In einer maschinenlesbaren Beschreibung vermittelt diese dem Browser, die benötigten Technologien, sowie ein paar weitere Informationen wie z.B. ein App Logo und den Namen der Applikation. Mithilfe dieser Informationen kann ein Browser, der alle benötigten Technologien unterstützt, dem Benutzer anbieten die Applikation direkt auf dem Endgerät zu installieren. Ein Umweg über einen AppStore ist nicht notwendig. Anschliessend kann die App von Benutzern, wie jede andere auf dem System installierte App, gestartet und verwendet werden – ohne dafür extra den Browser öffnen und eine Adresse eingeben zu müssen. Dabei muss zumindest die Grundfunktionalität der Seite auch ohne Internetzugriff gegeben sein. Dies kann aber z.B. auch dadurch behandelt werden, dass man einen Hinweis anzeigt, dass momentan keine Internetverbindung besteht und die App daher nicht vollumfänglich nutzbar ist.
PWAs im Vergleich zu “normalen”, webbasierten Applikationen
Alle PWAs sind somit auch “normale” WAs, also webbasierte Applikationen. Jedoch sind sie zusätzlich dazu installierbar und können auch ohne Internetzugriff starten.
Alle Webapplikation besteht in der Regel aus zwei Teilen:
Das sogenannte Frontend bezeichnet den Teil der Applikation, der auf dem Browser des jeweiligen Nutzers ausgeführt wird. Im Gegensatz dazu bezeichnet das Backend den Teil der Applikation, der im Rechenzentrum betrieben wird und beispielsweise eine Datenbank enthält, Film-Streams ausliefert oder auch Office Dokumente speichert.
Um die technischen Anforderungen für eine PWA bei der Entwicklung einfach erfüllen zu können, ist es oft sinnvoll die Entwicklung von Back- und Frontend komplett zu entkoppeln. Die Kommunikation zwischen dem Frontend und dem Backend wird dann über eine standardisierte Schnittstelle wie z.B. GraphQL oder REST abgewickelt. Dieser Ansatz ist auch zum alternativen Entwickeln von “nativen” Apps und aus einer ganzen Reihe von anderen Gründen oft sinnvoll. Eine bereits mit getrenntem Back- und Frontend entwickelte Anwendung lässt sich meist mit wenig Aufwand um die PWA Funktionalität erweitern.
Wir beraten Sie gerne!
Progressive Web Apps im Vergleich zu “nativen” Applikationen
“Native” Applikationen wurden im Gegensatz zu Progressive Web Apps speziell für eine bestimmte Plattform entwickelt. Dadurch können diese Funktionalitäten nutzen die PWAs (noch) nicht zur Verfügung stehen. Beispielsweise können PWAs auf iPhones leider keine Push Notifications empfangen, da Apple eine Implementierung, auch im alternativ zu Safari für iOS zur Verfügung stehenden Chrome Browser, aus unternehmerischen Gründen unterbindet.
Wird eine solche Funktionalität zwingend benötigt, so führt kein Weg an klassischen App Entwicklung vorbei. Das gleiche gilt, wenn man im AppStore bzw. PlayStore gefunden werden möchte. In einem solchen Fall kann aber unter Umständen eine Hybridlösung möglich sein: Um weiterhin mithilfe von Webtechnologien entwickeln zu können, kann eine “native” App als Wrapper, um einen Browser der im Vollbild dargestellt wird, entworfen werden. Damit erhält man dann Zugriff auf native Schnittstellen und bekommt die App in der Regel auch relativ problemlos in den jeweiligen AppStores freigegeben. So man kann eben Webtechnologien einsetzen, was einem eine separate Entwicklung für die verschiedenen Betriebsysteme erspart.
Bei sehr rechenintensiven Anwendungen wie z.B. 3D Computerspielen, bemerkt man allerdings einen deutlichen Leistungsverlust durch die zusätzliche Abstraktionsschicht des Webbrowsers. In solchen Fällen sollte, trotz des erheblichen Mehraufwands, besser eine native Anwendung entwickelt werden. Gleiches gilt für sehr hardwarespezifische Anwendungen.
Stark vereinfacht könnte man sagen, dass das Entwickeln einer PWA mehr Sinn macht, umso kleiner die Anforderungen an Rechenkapazität oder spezielle Hardware auf dem Endgerät sind und desto weniger sich Versionen für verschiedene Endgeräte unterscheiden sollen.
Progressive Web Apps auf dem Desktop
Durch den Einsatz von Frameworks wie Electron werden seit einigen Jahren immer mehr Desktop Apps mithilfe von Webtechnologien entwickelt. Berühmte Beispiele sind etwa Visual Studio Code, Atom, der Facebook Messanger für Desktop oder die Twitch Desktop App.
Das Konzept der PWAs wurde zunächst in erster Linie in Hinsicht auf Smartphones entwickelt, aber kann natürlich auch hier eingesetzt werden:
Seit etwas über einem Jahr lassen sich PWAs über den Chrome Browser unter Windows und Linux installieren und nutzen. Ein gutes Beispiel hierfür ist der Spotify Web Player. Probiere es einfach mal aus indem du mit einem Chrome Browser die Webseite:
https://play.spotify.com öffnest. Am rechten Ende der Adressleiste erscheint ein Button um den Player direkt auf deinem Computer zu installieren.
Die Vorteile einer Progressive Web Apps
PWAs vereinen die Bequemlichkeit von nativen Anwendungen mit den Vorteilen der webbasierten Anwendungsentwicklung. Wenn keine großen Anforderungen an Rechenleistung oder sehr spezifische Hardware bestehen können sie folgende Vorteile gegenüber anderen Lösungen bieten:
- eine schnellere und günstigere Entwicklung
- plattformübergreifende Einsatzmöglichkeiten
- auch auf klassischen Desktop Computern
- die Bequemlichkeit einer “nativen” App
- eine Installation jenseits der klassischen App Stores
Natürlich lässt sich nicht pauschal entscheiden ob eine PWA für ein individuelles Einsatzszenario die beste Wahl ist. Daher helfen wir Ihnen gerne den jeweils optimalen Ansatz für Ihre Anforderungen zu finden.
