Jörg | 05.08.2020

Was ist eine Progressive Web App (PWA)?

Webentwicklung > Was ist eine Progressive Web App (PWA)?

Vorteile, Nachteile und Abgrenzungen einer PWA zu anderen App-Formen einfach erklärt

Eine Progressive Web App (PWA) vereint die Vorteile klassischer Webseiten mit den Vorteilen einer nativen mobilen App. Sind Webseiten entsprechend entwickelt, nutzen diese von modernen Internet-Browsern unterstützte Features und bieten so bestimmte Zusatzfunktionen an. PWAs erlauben, dass eine Webseite auf dem Smartphone, Tablet oder PC wie eine App direkt im Browser ausgeführt wird.

Durch PWAs können daher Anwendungen plattformübergreifend und unabhängig vom Betriebssystem realisiert werden. Sie sind eine Weiterentwicklung der Web-App. Sie funktionieren zugleich als Webseite als auch als App, verhalten sich aber wie native Apps. Diese Eigenschaften erlauben ein schnelles Laden sowie einen uneingeschränkten Offline-Betrieb.

Was ist eine PWA: Die Anwendungsgebiete

Mit PWAs können eine Reihe von Ideen schnell und kostengünstig in Anwendungen umgesetzt werden. Ihre Vorteile zeigen sich nicht nur im Online-Betrieb, sie sind vor allem im Offline-Bereich interessant. So können beispielsweise über PWAs Offline-Kataloge für Vertriebsmitarbeiter zur Verfügung gestellt werden, die jederzeit und unabhängig vom Internetempfang auf Smartphones, Tablets oder PCs geladen werden können. Auch Formulare und Datensammlungen können über PWAs realisiert werden.

Daneben lassen sich kleine Spiele-Apps, Quiz-Apps, Tools für den Büroalltag oder Kalkulatoren zur Analyse von Daten über PWAs umsetzen. Der Phantasie sind hier grundsätzlich keine Grenzen gesetzt und die Anwendungen funktionieren natürlich auch im Online-Modus. Einige wenige Einschränkungen zeigen sich allerdings im direkten Vergleich zu anderen App-Lösungen.

Was ist eine PWA: Abgrenzung zu anderen Lösungen

PWAs sind eine Weiterentwicklung klassischer Web-Anwendungen. Verwandte Lösungen sind insbesondere native Apps und Hybrid Apps. Von diesen unterscheiden sich PWAs in bestimmten Bereichen.

Native Apps sind sehr viel größer als PWAs, da sie eigens für jedes Betriebssystem entwickelt und in diese integriert werden müssen. Auch unterscheiden sich die jeweils zu verwendenden Sprachen. So unterstützt Google auf Android Kotlin, während Apple auf iOS Swift bevorzugt. Zudem müssen native Apps heruntergeladen werden, wofür oft viel mehr Speicherplatz sowie eine gute Internetverbindung benötigt wird. Menschen mit einer langsamen Verbindung oder einem Vertrag mit geringem Datenvolumen laden daher native Apps häufig nicht herunter. Gerade in diesem Markt sind PWAs sinnvoll. Sie bieten eine Möglichkeit, Anwendungen für mobile Geräte anzubieten, ohne spezifisch eine mobile App entwickeln zu müssen. Sie sind ein plattformunabhängiges Hilfsmittel, um Personen, die lediglich über ein Smartphone und eine langsame Internetverbindung verfügen, mobile Anwendungen anzubieten. Aufgrund der fehlenden Integration in das Betriebssystem stehen dafür bislang häufig nicht alle Funktionen einer typischen nativen App zur Verfügung (siehe Abschnitt Nachteile). Aber durch die gerade stattfindenden Weiterentwicklungen der Internet-Browser werden diese Einschränkungen der Funktionalität in Zukunft voraussichtlich unbedeutend.

Hybrid-Apps verhalten sich wie native Apps und versuchen, deren Defizite zu umgehen. Allerdings müssen auch Hybrid Apps in das Betriebssystem integriert werden. Dies ermöglicht in aller Regel die Inklusion eines Großteils der nativen Gerätefunktionen, wenn auch weniger als bei nativen Apps. Aufgrund ihrer Plattformabhängigkeit sind sie in der Entwicklung aufwändiger als PWAs, aber weniger aufwändig als native Apps. Auch im benötigten Speicherplatz bewegen sie sich zwischen PWAs und nativen Apps.

Was ist eine Progressive Web App: Die Vor- und Nachteile

PWAs gehen aufgrund ihrer spezifischen Charakteristika mit einigen Vor- und Nachteilen einher. Diese sollen im Folgenden kurz beleuchtet werden.

Die Vorteile einer PWA

1. Schnelle Installation: Eine PWA wird über die URL angesteuert, installiert und im Browser ausgeführt. Sie benötigt daher keinen Download im klassischen Sinne und nur wenig Speicherplatz auf dem Gerät, was für viele User als Vorteil empfunden wird. Laut Studien können über PWAs Conversions und Userzahlen gesteigert werden, insbesondere wegen des nicht erforderlichen Downloads.

2. Offline-Anwendung: PWAs arbeiten uneingeschränkt im Offline-Modus. Hierzu muss der Homescreen eines internetfähigen Geräts lediglich mit der korrespondierenden URL verknüpft werden, um die App aufrufen zu können. Bei der Installation wird im Browser zudem ein Offline-Cache eingerichtet, der das Funktionieren im Offline-Modus oder bei einer schlechten Internetverbindung gewährleistet.

3. Automatisches Update: User aktualisieren eher selten native Apps. Im Online-Modus wird eine PWA unabhängig vom Userverhalten automatisch auf Updates geprüft und aktualisiert. Auch neue Funktionen werden automatisch zur Verfügung gestellt.

4. Geringere Kosten: Da PWAs auf einfach zu unterhaltenen Browserstandards basieren, entfallen die Entwicklung- und Wartungskosten für die verschiedenen Plattformen. Es müssen lediglich die PWAs weiterentwickelt werden. Zudem werden PWAs über URLs geteilt, was die Anschaffungskosten erheblich reduziert.

5. Automatische Kompatibilitätsprüfung: Die App prüft bei der Installation Browser und Gerät auf Kompatibilität. Dadurch werden nur kompatible Gerätefunktionen ausgeführt. PWAs sind daher in der Lage, ihren Funktionsumfang an die vom Gerät bereitgestellte Hardware und Software anzupassen. Bei Inkompatibilitäten kann die PWA im reduzierten Umfang genutzt werden. Ist beispielsweise die Kamerafunktion nicht kompatibel, wird lediglich dieses Feature ausgeklammert. Sämtliche anderen Funktionen können genutzt werden. Dies gewährleistet, dass die Webanwendungen schnell, nahtlos und verlässlich sind.

6. Mobile First: Progressive Web Apps verbessern als Mobile First-Anwendung Erfahrung und Nutzen für die User. PWAs sind sehr mobile-friendly und ein weiterer Schritt in Richtung Mobile First. Die Bedienung des Mobile First-Prinzips ist nicht zu vernachlässigen, da die meisten User weltweit lediglich über ein Smartphone verfügen. Zudem verbringen die meisten Menschen den Großteil ihrer Zeit am Smartphone und nicht am Desktop oder Tablet.

Die Nachteile einer PWA

Diesen Vorteilen stehen natürlich auch einige Nachteile gegenüber. Dass PWAs beispielsweise über URLs angesteuert werden, geht mit Vor- und Nachteilen einher. Sie sind zwar nicht auf einen bestimmten App-Store angewiesen, weshalb die zu zahlenden Anteile für die Vermarktung entfallen. Zugleich können PWAs aber eben auch nicht in einer zentralisierten Anlaufstelle wie Google Play für Android oder dem iOS App Store für Applegeräte abgerufen werden. Stattdessen müssen die User auf die korrespondierende URL gehen, wo sie auf die PWA hingewiesen werden. Das bedeutet auch, dass für den Nutzer die Anschaffungskosten und somit Einnahmen entfallen, die dann über andere Wege reinkommen müssen.

Darüber hinaus befinden sich PWAs noch in der Entwicklung, weshalb sie heute noch in einigen Bereichen gegenüber nativen Apps benachteiligt sind. So sind PWAs zwar mit einer responsiven Webanwendung, die sich wie eine native App verhält, vergleichbar. Sie erlauben Funktionen, die auch für native Apps typisch sind, wie Push-Nachrichten, Zugriff auf Kamera und Mikrofon, GPS-Ortung usw. Auch die Usability, Bedienung und Reaktionszeiten bei Wischbewegungen sind wie bei einer nativen App. Aber es fehlt aktuell noch der Zugriff auf Funktionen wie Kontakte, Kalender, NFC oder Bluetooth. Die Einschränkungen hängen zudem partiell noch vom verwendeten Browser und Betriebssystem ab. Insbesondere iOS-Geräte sind diesbezüglich im Vergleich zu Android-Geräten noch im Nachteil, was auch auf Anstrengungen seitens Google zurückzuführen ist. Aber auch Apple hat eine bessere Unterstützung von PWAs angekündigt. Daher ist davon auszugehen, dass diese Nachteile in Zukunft wegfallen werden.

Die zugrundeliegende Technologie

PWAs basieren auf den drei Grundbausteinen des Internets: HTML, CSS und JavaScript (JS). Es werden also genau die gleichen Technologien wie beim Aufbau von Webseiten und Web-Anwendungen verwendet. Die meisten Webentwickler kennen sich mit diesen Elementen aus und müssen sich nicht erst noch zusätzliche Technologien aneignen. Auch spezifische iOS- oder Android-Technologien spielen hier keine Rolle. Die User klicken auf der Webseite auf das entsprechende Symbol und werden dann auf ein spezielles benutzerdefiniertes Begrüßungsdisplay umgeleitet, von wo aus schließlich das Produkt aus genutzt werden kann.

Um aus einer Webseite eine Web-App bzw. PWA zu machen, müssen lediglich einige Anpassungen im HTML-Code vorgenommen werden. Vorderste Voraussetzung ist HTTPS, da es andernfalls zu Sicherheitslücken kommen würde. Im Header der Startseite (index.html) wird dem Browser mithilfe eines HTML-Codes angezeigt, dass es sich um eine PWA handelt. Zudem muss im Head eine manifest.json-Datei hinterlegt werden, die sämtliche Informationen zur PWA wie Name, Icons usw. enthält. Auch Hintergrundfarben, Theme Colors etc. können hier definiert werden.

Ein weiterer wichtiger Baustein von PWAs sind die sogenannten Service Worker, die im Hintergrund als JavaScript ausgeführt werden und wichtige Dateien aus der App im Cache zwischenspeichern. Dies ermöglicht auch das Arbeiten im Offline-Modus, da bei fehlender Internetverbindung einfach die Cache-Dateien abgerufen werden. Sobald der User aber online geht, werden die Cache-Dateien aktualisiert, sodass der User immer die aktuellste Version zur Verfügung gestellt bekommt.

Fazit

PWAs können zum jetzigen Zeitpunkt native Apps noch nicht vollständig ersetzen, da die in das jeweilige Betriebssystem integrierten Anwendungen immer stärker auf Geräte und Systemressourcen zurückgreifen und mehr Funktionen zur Verfügung stellen können. Aber durch immer besser werdende Browser-Standards werden die Unterschiede zwischen nativen und Web Apps zukünftig immer geringer. Aufgrund der geringeren Entwicklungs- und Wartungskosten ist entsprechend davon auszugehen, dass sich PWAs langfristig durchsetzen werden. Im Offline-Bereich sind sie bereits heute allen anderen Lösungen überlegen und stellen eine echte Alternative dar.

Headshot of Jörg Herbst
Jörg (CEO)

... ist ein erfahrener Geschäftsführer und Projektleiter im Bereich innovativer Webprojekte, spezialisiert auf die Entwicklung von Kundenportalen zur Optimierung der Kommunikation zwischen Unternehmen... mehr anzeigen

LinkedIn

More from Jörg

Unsere Entwicklungsexpertise

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund