Was ist eine Progressive Web App? PWA einfach erklärt

Gerrit Meyer
Nov 23, 2024

Viele Unternehmen kennen das Problem: Arbeitszeiterfassung oder die Rückmeldung von Auftragszeiten sind aufwändige Prozesse, die oft manuell erledigt werden müssen. Das kostet nicht nur Zeit, sondern erhöht auch das Fehlerrisiko. Zwar gibt es digitale Lösungen, doch die sind oft weder benutzerfreundlich noch auf mobil-optimiert.

Genau hier kann der Einsatz einer App, die auch auf mobilen Geräten funktioniert, Abhilfe schaffen. Dabei ist die Zeiterfassung nur ein Beispiel – es gibt viele weitere Prozesse, bei denen der Einsatz einer App sinnvoll sein kann.

Nun stellt sich die Frage nach der technischen Umsetzung: Eignet sich eine native App oder eine Progressive Web App (PWA) besser? In diesem Artikel erklären wir, was eine PWA ist, welche Vorteile sie bietet und wie du die optimale Lösung für dein Unternehmen findest.

Was sind Progressive Web Apps?

Was ist eine PWA? Eine Progressive Web App erscheint wie eine Website, die Funktionen nativer Apps enthält, beispielsweise Push-Benachrichtigungen oder offline nutzbare Inhalte. Sie gilt als Hybrid aus einer via Browser erreichbaren responsiven Website und einer nativen App, die speziell für die Hard- und Software ihrer jeweiligen Zielplattform konzipiert ist.

Progressive Web App vs. „klassische“ Web-App

Eine Progressive Web App kann Dinge, die eine klassische Web-App nicht kann. Beide sind über einen Browser ansteuerbar. Die PWA wird allerdings auf dem Endgerät installiert und kann in App-Stores angeboten werden, während die Web-App nicht installiert werden kann.

Progressive Web App vs. Website

Eine Website läuft im Browser und passt sich bestenfalls dem Bildschirm des Endgerätes an. Eine PWA ist zwar auch webbasiert, dabei aber downloadbar und auch offline zu gebrauchen und interagiert stärker mit dem Endgerät. Es handelt sich bei einer PWA quasi um eine Website, die sich wie eine App nutzen lässt.

Progressive Web App vs. Native App

Native App und Progressive Web App teilen sich einige Merkmale, etwa, dass sie per Home-Bildschirm-Icon geöffnet werden können. Eine native App aber ist an die Hardware und Software einer bestimmten Zielplattform gebunden. Eine Progressive Web App hingegen ist eine installierbare Website, die weder an bestimmte Software noch Hardware geknüpft ist.

Viele Vorteile: Zahlreiche Gründe sprechen für die PWA

Was eine Progressive Web App ist, haben wir geklärt. Warum kann es sinnvoll sein, auf eine PWA zu setzen? Grundsätzlich führt sie alles zusammen, was an einer Native App und einer Website positiv ist. Hier ein paar Beispiele für die potenziellen Vorteile einer Progressive Web App:

  • Plattformübergreifend: Anders als native Apps sind Progressive Web Apps mit allen möglichen Plattformen und Browsern kompatibel. 

  • Einfache Installation: Anders als eine Website kannst du eine PWA installieren und hast so immer direkten Zugriff. 

  • Offline-Funktionalität: Die Funktionen einer Progressive Web App bleiben auch bei schlechter Verbindung oder ohne Netzabdeckung nutzbar, sofern dieses Feature implementiert ist.

  • Preiswert: Im Vergleich zur nativen Variante sind Progressive Web Apps in Entwicklung und Wartung günstig. Die PWA als weit verbreitete Web-Technologie hat u.a. den Vorteil, dass nur eine Version zu pflegen ist und nicht etwa separate Varianten für iOS und Android. 

  • Suchmaschinen-tauglich: Anders als native Apps können Progressive Web Apps von Suchmaschinen indexiert werden.

  • Einfach teilen: Progressive Web Apps kannst du easy über eine URL oder einen QR-Code teilen.

  • Benachrichtigungen: Eine Progressive Web App kann Push-Notifications auf das jeweilige Endgerät senden – bei einer Website ist das nicht möglich.

Schattenseiten, Schwächen, Schwierigkeiten: Gibt es Minuspunkte?

Progressive Web Apps haben also einige Vorteile, aber – wie bei allem – gibt es auch ein paar Schwächen. Ob die für dich relevant sind, ist auch immer von deinem spezifischen Use Case abhängig. Folgende Punkte solltest du bei Progressive Web Apps besser im Hinterkopf behalten:

  • Unsichere Browser können zu Sicherheitslücken beim Download von Progressive Web Apps sorgen. Bei Firmen-Endgeräten minimiert ein Standard-Browser dieses Risiko jedoch erheblich.

  • User Experience und Design-Funktionen können bei Progressive Web Apps vergleichsweise limitiert sein. Du solltest dir also überlegen, welche Ansprüche du an Optik und Endnutzung stellst, bevor du eine Progressive Web App erstellst. Bei einer PWA für industrielle, eher funktionale Zwecke fallen diese Aspekte natürlich weniger ins Gewicht.

  • Der Zugriff auf die nativen Funktionen der genutzten Hardware kann für eine Progressive Web App eingeschränkt sein. Sie kann sich demnach nicht immer alle technischen Eigenschaften zunutze machen, die bspw. ein Smartphone bietet. Was heute schon möglich ist, zeigt dir z. B. dieses PWA-Projekt.

  • Hinsichtlich der Performance ist eine native App bei speicher- und rechenintensiven Anwendungen der Progressive Web App unter Umständen überlegen. Im Zweifel solltest du prüfen, wie rechen- und speicherintensiv die geplante Anwendung ist.

Eine Welle der Entrüstung ging durch die PWA Developer Community, als Apple ankündigte, PWA in Europa aus Sicherheitsgründen nicht mehr zu unterstützen. Nach kurzer Zeit wurde diese Entscheidung jedoch revidiert, sodass PWA weiterhin auch auf iPhones nutzbar sind und nicht über den Apple App Store installiert werden müssen.

Gut zu wissen: Funktionsweise & Merkmale der PWA

Neben den Vorteilen und Herausforderungen ist für den Gesamtüberblick auch noch der technische Hintergrund interessant. Zentrale Begriffe sind hier Service Worker, Application Shell und Web App Manifest. Und das verbirgt sich dahinter:

Der Service Worker ist, einfach erklärt, ein Programm auf dem Endgerät, das als Proxy eine Vermittlerrolle zwischen Webanwendung und Netzwerk einnimmt. Er sorgt u. a. mit smartem Caching dafür, dass Inhalte auch offline nutzbar sind. Außerdem ist er für Hintergrundaktualisierungen sowie Push-Notifications zuständig. 

Beim Web App Manifest handelt es sich um eine JSON-Datei voller Informationen über die Progressive Web App und ihre Funktionen. Es ist ein Leitfaden für das Endgerät, der u. a. definiert, dass die PWA auf dem Startbildschirm installiert wird, wie der App-Start zu laufen hat und wie die Benutzeroberfläche aussieht. 

Die Application Shell ist die Grundstruktur (aus HTML, CSS und JavaScript) für eine responsive Benutzeroberfläche. Sie trennt Inhalt und Kerninfrastruktur voneinander und ist für ein positives Nutzererlebnis zuständig, etwa für schnelle Ladezeiten bei wiederholten Besuchen.

PWA-Praxis: Beispiel & Use Case aus der Immobilienvermittlung

Die Einsatzmöglichkeiten von PWA reichen von geschäftlichen bis Consumer-Anwendungen. Unsere Low-Code-Plattform Heisenware eignet sich besonders für Low-Code App-Development für unternehmenseigene Lösungen. Damit die praktische Seite der Progressive Web App greifbarer wird, hier als Beispiel ein echter PWA-Use-Case:

Einer unserer Kunden ist auf die Vermittlung von Immobilien als Kapitalanlage spezialisiert. Potenzielle Käufer mussten Formulare, Gehaltsnachweise etc. ehemals händisch ausfüllen, einscannen und an den Immobilienvertrieb mailen. 

Dank einer grafisch programmierten PWA lassen sich jetzt alle Daten digital erfassen, unterzeichnen und die Handykamera wird zum Scanner für Papierunterlagen. 

Das ist für die Käufer komfortabel, und der Immobilienvermittler freut sich über deutlich höhere Rückmeldequoten und einen beschleunigten Qualifizierungsprozess.

Warum macht hier eine Progressive Web App Sinn? 

  • Die Kunden haben die verschiedensten Endgeräte, vom Android-Smartphone bis zum Mac – die PWA lässt sich auf jedem Endgerät öffnen und installieren und lässt auch den Wechsel zwischen verschiedenen Endgeräten zu. 

  • Die PWA kann über Schnittstellen auf die Smartphone-Kamera zugreifen und sie zum Scanner umfunktionieren sowie Push-Notifications zur Erinnerung senden.

  • Zudem ist die PWA fest installiert, bietet einen direkten Kanal zum Kunden und kann potenziell auch für andere Anwendungsfälle genutzt werden. 

Smarte Allrounderin: Was eine Progressive Web-App ist & welches Potenzial sie hat

Was ist eine Progressive Web-App, würden wir so beantworten: Eine PWA ist eine technisch vielseitige und zugleich niedrigschwellig nutzbare Anwendung, die sich für Business- wie Consumer-Use-Cases eignet. 

Die Offline-Funktionalität und Plattformunabhängigkeit machen sie zu einer Allrounderin, die aus unserer Sicht einiges an Wachstumspotenzial hat. Du willst wissen, ob eine Low-Code-basierte PWA auch für dein Unternehmen geeignet ist? Dann freuen wir uns über deine Kontaktaufnahme!