Progressive Web Apps (PWA): Kern-Features, Architektur und die Vor- und Nachteile im Überblick

Und ein Großteil dieser Internetnutzung findet über Apps statt. Das hat eine Studie in den USA festgestellt.

Vor nicht all zu langer Zeit standen Unternehmen also vor der Frage, welchen Ansatz sie bei der App-Entwicklung verfolgen sollen. Dabei hatten sie zunächst drei Optionen: native, hybride oder sogenannte Cross-Plattform-Entwicklung. Heute ist mit den Progressiven Web Apps noch eine vierte Option hinzugekommen – und die verdient eine genauere Betrachtung, sehen viele in genau diesen PWAs das App-Modell der Zukunft. 2020, so die Vorhersage von Gartner-Experten, wird rund die Hälfte aller mobilen Apps durch Progressive Web Apps ersetzt sein.

Warum aber Entwickler und Unternehmen auf Progressive Web Apps setzen, das soll diese dreiteilige Blogserie klären.

Was versteckt sich hinter Progressive Web Apps?

Letztlich sind Progressive Web Apps die Antwort auf die immer wiederkehrende Frage, ob sich mobile Apps oder responsive Webseiten langfristig durchsetzen werden, also Webseiten, die an eine Mobilnutzung angepasst sind. PWAs lassen diese bislang bestehende strikte Trennung verschwimmen. Sie nutzen Browsertechnologien, um native App-Funktionen mit der Barrierefreiheit und dem Web-Erlebnis des Internets zu verbinden. Führende Browser sind bereits PWA-kompatibel, darunter Google und Mozilla. Kurz gefasst: PWAs sind Web-Apps mit dem Geschmack nativer Apps. Nach der Installation klicken Nutzer im Home-Bildschirm auf ein kleines Icon und werden dann direkt zur Webseite geleitet. PWAs nutzen Web Stacks (JavaScript, HTML, CSS) und verbinden reichhaltige Funktionalität mit einem reibungslosen Nutzungserlebnis, wie man es von nativen Apps kennt. Google präsentierte diese Idee erstmals 2015 und seitdem sind Progressive Web Applikationen zu einem vieldiskutierten Thema geworden.

Die Beliebtheit von PWAs korreliert mit einem anderen Trend: Dem Phänomen der App-Müdigkeit. Nutzer sind häufig von der Anzahl möglicher Apps überwältigt und begrenzen die Anzahl von Apps auf ihren Geräten – auch um den Speicherplatz nicht auszureizen. Es kann also sein, dass ein Unternehmen, das eine native App entwickelt, erstaunt feststellen muss, dass die Downloadzahlen gar nicht so groß sind, wie man sich ursprünglich erhofft hatte. Progressive Web Apps verbinden dem gegenüber Merkmale, wie Nutzer sie bereits von nativen Apps kennen – aber ohne den datenintensiven Download. Und genau das macht sie ideal für Gelegenheitsnutzer.

Man denke dabei zum Beispiel an eine Shopping-App: Die meisten großen Unternehmen, die online verkaufen, haben auch eine App. Doch viele Kunden kaufen dort nur gelegentlich ein und sehen eigentlich gar keinen Sinn in einer App, empfinden diese vielleicht als unnötigen Datenmüll auf dem Mobiltelefon. Und genau

da können Unternehmen ansetzen: Mit einer traditionellen App für Vielnutzer und einer PWA für alle anderen. PWAs verbrauchen dabei nur wenig Speicherplatz, Nutzer müssen lediglich eine Webseite aufrufen und ein Icon erstellen. Ein Freigabeprozess, wie beim Download aus einem App-Store, fällt dabei weg, ebenso wie die Kontrolle durch Apple oder Google.

Kunden wollen Mehrwert und das müssen Progressive Web Apps bieten: sinnvolle Funktionen, Inhalte in Echtzeit und hohe Qualität. Dabei sollten auch Fragen wie die Offline-Verfügbarkeit berücksichtigt werden, vor allem wenn man bedenkt, dass in Deutschland beispielsweise der flächendeckende Ausbau des mobilen Highspeed-Internets noch zu Wünschen übrig lässt.

Welche Voraussetzungen können und sollten PWAs also erfüllen?

• Responsiveness und Browser Kompatibilität: Content muss für jeden zugänglich sein, egal über welchen Browser er auf die Inhalte zugreift oder wie gut die Verbindung ist. PWAs funktionieren mit jedem Browser und auf allen Geräten, ganz egal welcher Größe oder welcher Spezifikation. Tablet und Handy-Nutzer haben die gleiche Nutzererfahrung. Auch ist es egal, ob der Nutzer ein iPhone oder ein Android-Telefon hat.
• Unabhängigkeit von einer Internetverbindung: Fortschrittliche Applikationen funktionieren auch offline oder in einem Netz mit schlechter Internetverbindung.
• Ein App-ähnliches Interface: Progressive Web Applikationen haben eine ähnliche Navigation und Interaktion, wie Nutzer sie von nativen Apps kennen – und inzwischen erwarten.
• Push-Notifikationen: Als Teil einer gezielten Strategie können Push-Mitteilungen die Aufmerksamkeit und das Interesse von Kunden wach halten. Sie motivieren dazu, die App zu öffnen und häufiger zu nutzen.
• Selbstständiges Update: Updates sollten ganz automatisch möglich sein, so dass die App immer auf dem neuesten Stand ist, ohne dass der Nutzer das ständig kontrollieren muss.
• Sicherheit: Die Apps funktionieren über HTTPS, so dass nur ein autorisierter Nutzerzugang möglich ist. Und das ist ein wichtiger Faktor.
• Leichte Auffindbarkeit und einfach zu installieren: Suchmaschinen klassifizieren PWAs als Apps, sie sind aber nicht über die normalen App-Stores auffindbar. Sie können für eine leichte Auffindbarkeit aber mittels URL geteilt werden. Die Installation ist einfach und beinhaltet lediglich das Besuchen einer Webseite und das Hinzufügen des Icons zum Startbildschirm.

Die bisherigen Aspekte kurz zusammengefasst: Progressive Web Applikationen haben die Funktionalität von nativen und Web Applikationen übernommen. Sie laufen schnell – egal auf welchem Betriebssystem – und stellen eine große Bandbreite an Funktionalitäten zur Verfügung. Dank einfacher Installation, leichter Auffindbarkeit, automatischer Updates und der Möglichkeit selbst bei langsamer Internetverbindung oder offline damit zu arbeiten, können PWAs das Nutzererlebnis merkbar erhöhen.

Vier technische Komponenten sind für Progressive Web Apps entscheidend:

1. Web App Manifest

Das Web App Manifest ist die erste wichtige Komponente für das Erscheinungsbild eines nativen App Interfaces. Mit Hilfe des Manifests kann ein Entwickler kontrollieren, wie dem Nutzer eine App dargestellt wird und wie sie eingeführt wird. Es liefert einen Platz für die Metadaten der Web-App. Das Manifest beinhaltet normalerweise eine Start URL, den vollen und kurzen Namen der App, Links zu Icons und deren Größe, Typ und Ort. Es kann beispielsweise auch die Farbgestaltung der Adressleiste festlegen. Um diese Settings zu nutzen, muss der Entwickler lediglich einen einzelnen Link zum Manifest in alle Header der Unterseiten einfügen.

2. Service Worker

Dies ist ein weiteres technisches Element, dass die Haupt-Features einer Progressiven Web Applikation unterstützt – nämlich die Möglichkeit offline zu arbeiten, Synchronisierung im Hintergrund und die erwähnten Push-Mitteilungen. Es reagiert auf Interaktionen der Nutzer mit der App. Da der Service Worker nur für ein bestimmtes Ereignis zuständig ist, ist seine Lebensspanne recht gering.

3. Die Shell Architecture der Applikation

Das Bauen und die Aufrechterhaltung von PAWs beinhaltet die Trennung von statischem und dynamischem Inhalt. Und so ist die Nutzung einer Shell Architecture ein wichtiges Element. Sie beinhaltet die Kern-Designelemente, die notwendig sind, damit die App auch ohne Internetverbindung läuft. Dieser Ansatz funktioniert besonders gut für JavaScript basierte Apps, die aus einer Seite bestehen und Apps mit einer relativ stabilen Navigation und sich änderndem Content.

4. Transport Layer Security (TLS)

PWAs setzen wirksam das Transport Layer Security Protokoll ein. TLS ist der Standard eines sicheren und robusten Datenaustauschs zwischen zwei Applikationen. Die Datenintegrität erfordert es, die Webseite via HTTPS zu bedienen und ein SSL Zertifikat auf dem Server zu installieren.

Vorteile der Progressive Web Apps:

Was also sind zusammengefasst die Vorteile von PWAs? Ein wichtiger Aspekt ist hier sicherlich die Kostenersparnis, da die Entwicklung von PWAs weniger aufwändig ist und weniger Zeit erfordert. Ein Grund dafür ist, dass Entwickler die App nicht für verschiedene Plattformen bauen müssen, da eine Progressive Web App gut auf Android, iOS und anderen Geräten zeitgleich läuft.

Auch gibt es weniger Reibungen bei der Installation. Auffindbarkeit, als eines der Kernelemente, erhöht die Wettbewerbsfähigkeit gegenüber nativen Apps. Dieser Vorteil ist vor allem deshalb bedeutend, weil jeder zusätzliche Schritt beim Download einer App die Anzahl potentieller Nutzer um ganze 20 Prozent reduziert. Alles, was Nutzer machen müssen, ist auf eine Webseite gehen, die App zum Startbildschirm hinzufügen und dann die Webseite öffnen. Ein Umweg über einen App-Store ist nicht notwendig.

Auch Updates sind sehr viel einfacher: Nutzer haben immer die aktuellste Version der App zu Hand und müssen nicht extra ein Update im App-Store machen. Unternehmen müssen daher auch keine alten Versionen weiterbetreiben, um Kunden und Nutzern mit veralteter Software den Zugang zu ermöglichen. Alle sind auf dem neuesten Stand.

Höhere Nutzerbindung gehört ebenfalls zu den Vorteilen von PWAs. Rund 80 Prozent aller Nutzer legen Apps gerne auf den Homescreen ab. Die Fähigkeit PWAs dort direkt hinzuzufügen, gibt ihnen einen Vorteil gegenüber Web Apps. Weitere wichtige Faktoren für eine dauerhafte App-Nutzung sind unter anderem ein einfacher und schneller Zugriff. Und genau da liegt eine Stärke von PWAs.

Nachteile von Progressive Web Apps

Wie bei allen Technologien gibt es natürlich auch Nachteile – und die stehen in diesem Fall in direktem Zusammenhang mit den erwähnten Vorteilen. Verglichen mit nativen Apps haben PWAs eine begrenztere Funktionalität und verursachen einen höheren Batterieverbrauch, denn auch wenn sie progressiv sind: Sie sind immer noch Web-Apps, das heißt sie verbrauchen Strom, wenn sie sich mit dem Internet verbinden. Sie können einige für native Apps typischen Features nicht unterstützen: Fingerabdruck-Erkennung, NFC, Bluetooth, Geofencing, Inter-App-Kommunikation und fortschrittliche Kamera-Steuerung.

Wie bereits erwähnt ist es einfacher die PWAs zu installieren, da kein Umweg über den App-Store notwendig ist. Darin liegt aber auch einer der Nachteile: Dadurch, dass PWAs nicht in Apps-Stores verfügbar sind, können auch Kunden verloren gehen, wenn diese nur im App-Store nach neuen Apps browsen und die PWA dort nicht finden können.

Beispiele für erfolgreiche PWAs

Es gibt bereits einige herausragende Erfolgsbeispiele, die zeigen, was PWAs leisten können. Die Washington Post suchte zum Beispiel nach einer neuen Möglichkeit, Nutzern Inhalte zukommen zu lassen. Dabei war klar, dass rund 55 Prozent mittels eines Mobilgeräts auf die Inhalte zugreifen. Zu bedenken war auch, dass Nutzer dazu neigen eine Webseite zu verlassen, dauert das Laden der Seite länger als 3 Sekunden. Die Zeitung wollte also sicherstellen, dass Nutzer die Inhalte innerhalb eines Wimpernschlags auch zur Verfügung hatten. Gleichzeitig sollte es möglich sein, entsprechende Artikel offline zu lesen. Mittels PWA und Accelerated Mobile Pages (AMP, unmittelbares Laden der Seite) konnte die Washington Post die Ladezeit der Webseite um 88 Prozent verbessern. Auch verbesserte sich deutlich die Zahl von Leser an mobilen Geräten, die innerhalb von 7 Tagen erneut auf die Seite zugriffen – und zwar um gut 23 Prozent. Die Progressive Web App ist allerdings noch in der Beta-Phase, das heißt Entwickler arbeiten derzeit weiterhin an den notwendigen Features.

Die Social Media Plattform Twitter hat mit Twitter Lite PWA ebenfalls eine Progressive Web App entwickelt, um die Nutzerbindung zu erhöhen und das

Datenvolumen zu verringern. Das ist vor allem deshalb entscheidend, weil etwa 80 Prozent der Nutzer von Mobilgeräten auf Twitter zugreifen. Twitter Lite verbraucht weniger als 3 Prozent Speicherplatz auf Geräten und verbraucht bis zu 70 Prozent weniger Datenvolumen, erlaubt es aber zeitglich Nutzern Tweets so schnell wie möglich zu teilen.

Zusammengefasst lässt sich sagen: PWAs sind also aus vielerlei Hinsicht interessant für Unternehmen. Sie erhöhen die Nutzerbindung erheblich. Auch erschließen sie neue Nutzergruppen, selbst wenn das Unternehmen bereits über eine native App verfügt. Da Nutzer weitestgehend auf ein drahtloses Netzwerk angewiesen sind, bevorzugen sie Webseiten und Apps, die möglichst geringe Datenmengen verbrauchen und zumindest in Teilen auch offline nutzbar sind. Und genau das bieten Progressive Web Apps.