Progressive Web APPs – Vorteile und Anwendungsmöglichkeiten

12 Okt. 2023
Lesezeit 6 Minuten

Was sind PWAs?

Du bist bestimmt schon einmal über die Abkürzung PWA oder den Begriff „Progressive Web App“ gestolpert. Aber was ist das eigentlich? Wir von lightweb-media.de wollen Dir hier einmal erklären, was sich hinter dem Begriff verbirgt und was diese App zu so etwas Besonderem macht.

progressive web apps – vorteile und anwendungsmöglichkeiten progressive web apps pwa

Am einfachsten ist es, mit dem Begriff zu starten. Denn so kannst Du schon einiges über PWA erfahren.

Progressive Web App

Das Wort Progressive Web App besteht eigentlich aus zwei Teilen, „Progressive“ und „Web App“.

Am einfachsten ist es mit der „Web App“, zu Deutsch Webanwendung, zu beginnen. Diese Apps werden mit Hilfe von HTML, CSS und Java Script entwickelt. Durch HTML können Texte auf Webseiten strukturiert und formatiert werden, CSS sorgt dafür, dass Bilder, Videos oder Hintergrundgeräusche ergänzt werden und mit Java Script kannst Du Inhalte verändern, nachladen oder generieren.

Der Wortteil „Progressive“ steht eigentlich für Progressive Enhancement. Das bedeutet, dass die grundlegenden Funktionen einer Webanwendung in jedem Browser lauffähig sind. Was wiederum für Dich heißt, wenn es auf dem Markt eine super coole und neue Technik gibt, die Du gerne verwenden würdest, geht das nur, wenn sie auf allen Browsern laufen kann.

Auf der Suche nach weiteren Informationen zu PWAs?

In diesem Artikel bekommst Du PWA gut erklärt, inklusive aller Randinformationen die diesen Artikel hier sprengen würden.

Wie funktionieren PWAs?

Aber wie funktionieren PWAs jetzt eigentlich? Wenn Du so eine App aufrufst, machst Du das meistens im Browser oder per URL, dann wird der HTML-Quellcode einer Webseite geladen und Du kannst diese jetzt sehen – und zwar auf Deinen Smartphones, PCs oder Tablets. Jedes Gerät zeigt Dir die beste Nutzungserfahrung, ohne dabei Zugriff auf das eigentlich Dateisystem zu erlangen.

Oft werden die HTMLs dieser Webseiten als Single-Page-Application, auch Single Page Webanwendung genannt, programmiert.

Vorteil

Der Vorteil hiervon ist es, dass die Client-Server-Kommunikation reduziert und damit auch vereinfacht wird. Die Seite muss während der Nutzung nicht bzw. nur in Teilen reloaded werden. Dem Nutzer wird die ganze Zeit über dieselbe Seite angezeigt.

Sitzungszustände werden bei dieser Nutzung einfach in der Client-Application gespeichert und nicht auf dem Server. Dadurch kann man sagen, dass PWAs auf Nutzen und Bedarf des jeweiligen Users, also Dich, abgestimmt sind und sie dadurch eine unabhängige Einheit sind, die zum Vorteil des Nutzers handelt.

Jetzt hast Du bestimmt zwei Fragen, die Dich brennend interessieren:

Was sind die Vorteile von PWAs?
Was ist denn überhaupt der Unterschied zu klassischen Webseiten?

Vorteile

Fangen wir mit den Vorteilen an. Der erste liegt absolut auf der Hand, denn PWAs sind wesentlich kostengünstiger als andere Apps, denn statt für jedes Betriebssystem einzeln zu programmieren, muss nur eine PWA entwickelt werden. Das Design ist dabei wie das einer ganz normalen App.

Von sogenannten Native Apps können PWAs nachgebaut werden und es wird somit die beste Nutzungserfahrung erzeugt.

Info

Native Apps wurden für die Verwendung auf einer bestimmten Plattform oder einem Gerät entwickelt und erleichtern die Zusammenarbeit von Programmen wie PWAs und dem auf dem Rechner installierten Betriebssystem.

Bei PWAs hast Du auch immer einen leichteren Zugriff auf Deine Hardware sowie eine vereinfachte Veröffentlichung. Ein ebenfalls wichtiger Punkt ist, dass Progressive Web Apps auch offline funktionieren und dass sie immer zu anderen Webseiten verlinkbar sind.

Des Weiteren sind sie wesentlich schneller, denn sie laden auch bei schlechter Internetverbindung, da sie Schlüsselressourcen zwischenspeichern. Auch kannst Du mit PWAs höhere Konversionsraten erzielen.

Unterschiede zu klassischen Webseiten

Einige der Unterschiede zu klassischen Webseiten konntet ihr schon bei den Vorteilen erkennen. Doch die Hauptunterschiede liegen im Web App Manifest und im Service Worker.

Web App Manifest

Das Web App Manifest ist eine JSON Datei, die eine Applikation im Browser beschreibt. Sie erkennt zum Beispiel den Namen der App, Farben, Icons usw.

Service Worker

Der Service Worker ist ein Java Script, das im Hintergrund läuft und zum Beispiel dafür sorgt, dass Inhalte auch offline aufgerufen werden können.

Nachteile

Es gibt allerdings auch ein paar Nachteile dieser Anwendung. So ist die Entwicklung relativ teuer, auch wenn sie sehr lohnenswert ist, und Dein Betriebssystem muss PWAs unterstützen, Apple zum Beispiel ist sehr zögerlich, was die Unterstützung angeht.

Achtung!

Allerdings musst Du auch aufpassen: Es gibt einige Anbieter, die Dir Progressiv Web Apps verkaufen möchten, bei denen Du aber letztendlich eine Single Page Application bekommst.

Trotzdem ist die Progressive Web App eine zukunftsorientierte Möglichkeit, Deine Webseite zu erstellen und zu gestalten.

Weitere Informationen

Wir haben einen Artikel zum Thema Frontity – Headless CMS geschrieben und als WordPress Plugin gibt es PWA, was Deine Seite zu einer PWA umfunktioniert.

Häufige Fragen und Antworten

Über den Autor

Joel Burghardt ist Geschäftsführer der Lightweb Media GmbH, einer Entwicklungsschmiede mit Fokus auf SEO, KI-Automatismen und performante Websites. Er unterstützt Unternehmen jeder Größenordnung dabei, ihre Sichtbarkeit durch programmatic SEO, KI-gestützte Prozesse und skalierbare Weblösungen signifikant zu steigern. Mehr über den Autor.

Joel Burghardt

Gründer von Lightweb Media