Joel Burghardt 17. März 2022 5 Minuten Lesezeit

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

Wie funktioniert die Nutzung von PWAs?

Die Bedienung von PWA ist sehr einfach.u003cbru003eDu kannst PWA so einstellen, dass die Seite dann auf Smartphones nicht in einem Browserfenster geöffnet wird, sondern wie eine App daher kommt, einschließlich einem Icon auf dem Startbildschirm.

Welche Funktionen kann eine PWA haben?

– Push Notifications (Nachricht bekommen, Neuigkeiten, etc..)u003cbru003e- Icon auf dem Startbildschirmu003cbru003e- Nutzung einer Website als APP ohne im Apple/Google Store gelistet zu seinu003cbru003e- Nutzer können beim Öffnen der Seite gefragt werden, ob sie die Webseite als App/Verknüpfung zum Homescreen hinzufügen möchten.

Welche WordPress Plugins kann man für eine PWA nutzen?

Wir verwenden PWA for WP und Fixed Bottom Menu als Plugins. In PWA for WP lassen sich auch Push Notifications realisieren. Mit dem Bottom Menu hat man dann das volle App Feeling.u003cbru003eDarüber hinaus gibt es weitere Plugin – unter anderem Superpwa oder WP Mobile App

PWA zu einer APK umwandeln?

Man muss keinen Cent bezahlen um aus einer PWA eine APK zu machen. Geht in schnell und einfach mit u003ca href=u0022https://www.pwabuilder.com/?fbclid=IwAR0Te24BJcIdCJUeMdV59u53gBpM8rFYQJNpUykNFDTjlYt06cSt_egCKSou0022 target=u0022_blanku0022 rel=u0022noreferrer noopeneru0022u003ehttps://www.pwabuilder.comu003c/au003e u003cbru003eWenn Deine Seite wirklich Mobile First ist, brauchst Du nur eine APK mit Pagebuilder machen.u003cbru003eHier wird eine Android Installationsdatei mitgeliefert, die Du direkt in der Play Console hochladen kannst.

Hilft eine PWA im Ranking der organischen Suchergebnisse?

PWAs haben nichts mit SEO zu tun. Der Suchmaschine ist es egal ob Du eine PWA anbietest. PWAs hat mehr was mit Nutzererfahrung zu tun.u003cbru003eEine gut mobil optimierte Webseite zusätzlich als PWA anzubieten, macht meistens daher keinen Sinn.

Brauch ich für Push-Benachrichtigungen in WordPress eine PWA?

Wer nur die Push-Funktion benötigt, um seine Besucher über neue Blog-Artikel und Veranstaltungen zu benachrichtigen, kann CleverPush probieren. CleverPush ist bis 1000 Abonnenten kostenlos und DSGVO-konform und auch als Anfänger recht einfach zu bedienen. u003cbru003eWonderpush soll auch GDPR-konform sein und kostet pro 1000 Abonennten 1 €.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Wir teilen unser Wissen insbesondere bei den Themen

GutenbergMarketingPagespeedSEOWebentwicklungWordpress