Progressive Web-App (PWA) vs. Web-App

Die Idee hinter der PWA

Nachdem wir uns im vergangenen Beitrag mit den verschiedenen App-Arten befasst und sie miteinander verglichen haben, möchten wir jetzt noch etwas detaillierter auf eine bestimmte Form zu sprechen kommen: die Progressive Web-App (PWA).

Die Idee der PWA ist nicht neu. Sie spielt schon seit einigen Jahren eine Rolle in Bezug darauf, wie sich gewisse Probleme lösen lassen. Diese Probleme entstehen dadurch, dass alle App-Arten ihre Vorteile mitbringen - aber eben auch ihre Nachteile. Bei der Performance sind native Apps unangefochten, bezüglich der Reichweite können Web-Apps mehr bieten. Die Progressive Web-App ist ein Versuch, einige Schwächen auszumerzen und verschiedene Vorteile miteinander zu kombinieren. Die Grenzen dessen, was die verschiedenen Technologien mitbringen, verschwimmen – die Vorzüge des Web sollen mit denen einer nativen App kombiniert werden.

"Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase. […] Between modern APIs, WebAssembly, and new and upcoming APIs, web applications are more capable than ever, and those capabilities are only growing." [Quelle: web.dev]

Differenzierung zwischen Web-App & Progressive Web-App

Es gibt verschiedene Technologien, die in der App-Entwicklung eingesetzt werden. Dieser technische Hintergrund ist letztendlich dafür verantwortlich, welche Art App programmiert wird. In diesem Beitrag soll es speziell darum gehen, was eine Progressive Web-App (PWA) ist und was sie von einer "normalen" Web-App unterscheidet.

Es ist gar nicht so einfach, die PWA von der Web-App abzugrenzen. Während beispielsweise der Unterschied zur nativen App sehr deutlich ist, wird es bei der Differenzierung von Web-App und Progressive Web-App schon schwieriger. Wir müssen tiefer in die technische Ebene eintauchen, um die Unterschiede fassen zu können.

Grundsätzlich sind Progressive Web-Apps Anwendungen, die Besonderheiten einer Web-App mitbringen. Unter anderem sollen sie leistungsfähiger sein und installiert werden können, um einer nativen App näher zu kommen.

Die Definitionen von Web-App und PWA

Eine Web-App ist im Grunde eine Website, die allerdings deutlich mehr mitbringt. Web-Apps werden über einen Browser abgerufen, weshalb sie nicht auf einem Gerät installiert werden müssen und auch nicht auf ein spezielles Betriebssystem begrenzt sind. Sie bieten jede Menge Möglichkeiten, beispielsweise als Schnittstellen oder um Produkte durch Konfiguratoren greifbarer zu machen.

Die Progressive Web-App (PWA) kann grundsätzlich als Weiterentwicklung der Web-App gesehen werden. Oft werden PWAs auch als Kombination aus responsiver Website und nativer App beschrieben. Durch zusätzliche Funktionen sollen sie aber die User Experience steigern - also die positiven Erfahrungen, die Nutzer:innen mit einer Anwendung machen. Diese Funktionen werden durch einen sogenannten Service Worker ermöglicht. Eine Technologie, auf die wir im Verlauf dieses Artikels noch näher eingehen.

Die Gemeinsamkeiten

Da die Web-App sozusagen die Grundlage für die Progressive Web-App ist, ähneln sie sich in ihrem grundsätzlichen Aufbau. Beide Technologien werden in der Regel mit HTML, CSS und JavaScript ausgeführt.

Endgerät und Betriebssystem spielen erst mal keine Rolle: Hauptsache, Browser und Internetverbindung sind vorhanden. Sowohl bei der Web-App als auch bei der PWA wird eine URL in einen Browser eingegeben, um sie abzurufen. Nur durch eine URL kann der Webserver die Anfrage entgegennehmen und an Webanwendung oder PWA weiterleiten.

Nachdem die URL aufgerufen wurde, wird ein generierter HTML-Quellcode via HTTP(S)-Response vom Webserver zurück zum Browser geschickt. Dadurch sehen die Nutzer:innen sowohl bei einer Web-App als auch bei einer PWA etwas, was wie eine normale Website aussieht.

Die Unterschiede

Wie eingangs erwähnt, unterscheiden sich Web-App und native App grundlegend voneinander, während die Progressive Web-App einige Eigenschaften nativer Apps mitbringt.

PWA

Eine PWA kann bei Bedarf auf Computer, Smartphone oder Tablet installiert werden - obwohl sie ursprünglich über eine URL abgerufen wird. Es kann ein Icon auf dem Display generiert werden, über das die PWA wie eine normale App in einem eigenen Fenster geöffnet werden kann. Dadurch können PWAs auch die meisten Funktionen nutzen, die das jeweilige Endgerät mitbringt - beispielsweise die Kamerafunktion, um innerhalb der App Fotos aufzunehmen und hochzuladen.

Zudem kann eine PWA - und das ist wohl der gravierendste Unterschied zur Web-App - auch offline genutzt werden. PWAs bringen durch ihre spezielle Programmierung eine Funktionsweise mit, die eine Offline-Nutzung erlaubt: und zwar dann, wenn Inhalte bereits abgerufen wurden. Informationen, die man sich einmal über die PWA hat anzeigen lassen, können ohne Verbindung zum Internet erneut abgerufen werden.

Durch die Kombination verschiedener Technologien soll die Progressive Web-App installierbar, zuverlässiger und bzgl. der Ladezeiten schneller sein.

Web-App

Eine Web-App kann hingegen auf keinem Endgerät installiert werden, sondern wird immer über Browser und URL abgerufen. Sie ist demnach auf eine Internetverbindung angewiesen und funktioniert nicht offline, ohne Verbindung zu Server oder Cloud.

Das heißt auch, dass die Funktionen vom Browser abhängen. Es kann also sein, dass eine native Gerätefunktion - wie beispielsweise die Kamera - über den einen Browser funktioniert, über einen anderen hingegen nicht: Nicht jeder Browser ist mit jeder Funktion kompatibel.

Weitere Unterschiede zwischen Web-App und PWA zeigen sich bei Ladezeit und Kosten. Durch die Möglichkeit der Installation sind PWAs schneller. Günstiger sind sie, weil sie Website und (Web-)App miteinander vereinen. Ein Unternehmen muss also nicht mehr zwangsläufig beides gesondert programmieren lassen.

Service Worker: Das Offline-Pattern

Neben der Installationsmöglichkeit ist die Offline-Funktion der Progressive Web-App das, was sie besonders macht. Deshalb möchten wir noch etwas genauer auf die Technologie eingehen, die diese Funktion möglich macht.

Der Service Worker ist eine Browsertechnologie, die dem Problem einer schlechten oder fehlenden Internetverbindung entgegenwirkt. Im Wesentlichen handelt es sich um "eine JavaScript-Datei, die getrennt vom Haupt-Thread des Browsers ausgeführt wird und Netzwerkanfragen abfängt, Ressourcen im Cache speichert oder aus dem Cache abruft und Push-Nachrichten übermittelt. […] Ein Service Worker ist ein programmierbarer Netzwerk-Proxy, mit dem Sie steuern können, wie Netzwerkanfragen von Ihrer Seite behandelt werden", heißt es bei Google Developers.

Service Worker laufen also asynchron und quasi unabhängig von der Progressive Web-App. Das ermöglicht es dem Worker, Nachrichten oder Informationen zu empfangen und an die PWA weiterzuleiten - auch wenn diese gerade nicht im Browser ausgeführt wird, sondern nur auf dem Smartphone, Tablet oder Computer. Das ist auch die Basis dafür, dass Inhalte, die schon einmal abgerufen wurden, auch offline zur Verfügung stehen.

Wenn Sie sich für die technischen Details interessieren, gibt es bei Informatik Aktuell einen Artikel, der die Service Worker noch etwas näher und aus Entwicklersicht beleuchtet.

Fazit

In den Grundlagen der Technologie ähneln sich Web-Apps und Progressive Web-Apps. Beides sind eigentlich Webseiten, die allerdings verschiedene Funktionen ermöglichen. Durch die Möglichkeit, eine PWA zu installieren und auch offline auf bestimmte Inhalte zugreifen zu können, bietet die PWA vor allem für Unternehmen einige Vorteile. Sie kann eine doppelte Entwicklung von Website und App überflüssig machen, da sie beides ineinander vereint.

"At their heart, Progressive Web Apps are just web applications. Using progressive enhancement, new capabilities are enabled in modern browsers. Using service workers and a web app manifest, your web application becomes reliable and installable. If the new capabilities aren't available, users still get the core experience." [Quelle: web.dev]

Bei allen Vorzügen einer Progressive Web-App muss allerdings auch immer mit einbezogen werden, dass sie im Vergleich zu anderen App-Arten mit der geringsten Leistung daherkommt. Funktioniert eine Anwendung auf mehreren Plattformen, ist die Entwicklungszeit kürzer und die Kosten sind geringer - allerdings wird man an der einen oder anderen Stelle Abstriche machen müssen.

Auch beim Thema Sicherheit hat eine PWA ihre Schwachstellen. Service Worker laufen zwar über HTTPS - dadurch, dass sie aber Netzwerkanfragen abfangen, verarbeiten und weiterleiten können, besteht eine potenziell größere Gefahr für Angriffe als bei einer nativen App oder einer Web-App.

Nichtsdestotrotz können Progressive Web-Apps viele Bedürfnisse von Nutzer:innen bedienen, die in der heutigen Zeit Schnelligkeit und Verlässlichkeit erwarten, wenn es um digitale Produkte geht. Müssen wir zu lange auf die Antwort einer App oder Website warten, brechen wir den Vorgang ab. Wir erwarten, Informationen zu jederzeit abrufen zu können - im Zweifel auch ohne oder mit einer schlechten Internetverbindung.

Mehr Informationen?

Haben Sie noch Fragen zum Thema? Möchten sie eine Anwendung entwickeln lassen? Sprechen Sie uns gerne an! Wir beraten Sie und zeigen Ihnen die Möglichkeiten für Ihr Unternehmen auf.

Schreiben Sie uns eine Mail, nutzen Sie unser Kontaktformular oder rufen uns einfach an, um einen Termin zu vereinbaren. Wir erstellen Ihnen gerne ein Angebot – selbstverständlich kostenlos und unverbindlich!