Progressive Web App mit WordPress: Vor- und Nachteile

4 Min.
Progressive Web App WordPress

Unser Agenturpartner giftGRÜN hat mit WordPress eine Progressive Web App (kurz: PWA) für die Uniklinik RWTH Aachen gebaut, die beim Onboarding neuer Mitarbeiter:innen unterstützt. Wir sprachen mit Patrick Heinker über die Vor- und Nachteile von PWAs versus Websites und nativen Apps.

So funktioniert eine Progressive Web App

Patrick, wie genau läuft eine PWA und wie sieht es mit der Datenhaltung aus?

In WordPress werden die Inhalte gepflegt und über normale Templates ausgegeben. Ein ServiceWorker sorgt dabei für die Offline-Funktionalität. Beim initialen Öffnen der Seite wird vom ServiceWorker eine Zip-Datei mit allen Seiten heruntergeladen, die serverseitig generiert wird.

Wenn nun eine Seite aufgerufen wird, wird die bereits im Cache liegende Seite angezeigt. Und der ServiceWorker kümmert sich im Hintergrund um die Aktualisierung, sodass sie beim nächsten Besuch neue Inhalte zeigt, falls sich etwas geändert hat. Optional könnte man auch nach einer Aktualisierung neu laden, das ist jedoch für unseren Anwendungsfall nicht notwendig gewesen.

PWA WordPress
Screenshots aus der Progressive Web App für die Uniklinik RWTH Aachen

Die Datenhaltung erfolgt dabei komplett offline, einzig für Videos und externe Inhalte muss eine Internetverbindung bestehen.

PWA vs Native App

Was sind die Unterschiede aber auch die Vorteile im Vergleich zu nativen Apps?

Native Apps sind plattformspezifisch, oft aufwendig und damit teuer in der Umsetzung. Zudem müssen sie für eine große Reichweite über die offiziellen Stores vertrieben werden. PWAs hingegen lassen sich direkt beim Besuch der Seite über einen Knopfdruck installieren.

Apple ist jedoch mit der Unterstützung von PWA-Funktionalitäten noch etwas hinterher. Aber das ist unter Webentwicklern ja nichts neues, dass Safari Sachen nicht unterstützt, die in anderen Browsern seit Jahren gängig sind…

Wie läuft das Zusammenspiel der Progressive Web App mit WordPress?

Wir benutzen WordPress zur Datenpflege, aber auch für die Templates. Es ist eine ganz normale Webseite, mit dem einzigen Unterschied, dass über einen JavaScript ServiceWorker die Inhalte offline verfügbar gemacht werden. Und dass sie sich fast wie eine Native App verhält.

Es gibt hier auch die Möglichkeit auf die REST-API von WordPress zu setzen und alles client-seitig zu rendern, so wie es in nativen Apps üblich wäre. Für unseren Anwendungsfall haben wir hier jedoch nur zusätzlichen Aufwand gesehen, der kaum Nutzen bringt.

Progressive Web App mit WordPress umsetzen

Welche Ansätze gibt es, wenn man mit WordPress eine Progressive Web App realisieren will?

Es gibt einige Plugins, mit denen sich eine Seite per Knopfdruck und ein paar Einstellungen in eine Progressive Web App verwandeln lässt. Auch Push-Notification Dienste gibt es, über die alle Blog-Besucher über neue Beiträge informiert werden können. Diese fertigen Plugins sind jedoch eher dazu gedacht, einen normalen Blog offlinefähig zu machen und gezielte Dateien vorzuladen.

Nachdem wir mit einigen dieser Plugins herumgespielt haben, sind wir auf eine eigene Lösung gegangen. Wir haben unsere Funktionalität getrennt von den Plugins gebaut, um beispielsweise ein komplettes Laden der Seiteninhalte über eine serverseitig generierte Zip zu ermöglichen und um flexibler in der Funktionsanpassung zu sein. Push-Notifications werden in der Regel über bezahlte Dienste abgebildet, lassen sich aber genauso gut auch selbst bauen.

PWAs: Kompatibilität und Datenschutz

Was sind mögliche Fallstricke dabei und wie habt ihr sie gelöst? Und wie sieht es mit dem Thema Datenschutz aus?

Das Übliche bei Webentwicklung: Jeder Browser tickt anders und es muss auf allen Geräten ausgiebig getestet werden. Apple weigert sich PWA-Funktionalität vollständig zu unterstützen und hat nochmal eigene Apple-spezifische Meta Tags, damit die App funktioniert, die vom Standard abweichen.

Das Caching-Modell sollte passend zum Anwendungsfall gewählt werden. ServiceWorker können in Millisekunden gecachte Seiten ausgeben und im Hintergrund aktualisieren. Wenn ich jedoch auf einer News-Seite bin, will der Nutzer eventuell lieber einen kleinen Wartebalken sehen, bis die neuesten Inhalte geladen sind.

Datenschutz war für uns einer der Hauptgründe, eine PWA zu wählen. Inhalte und Lernfortschritt der Nutzer werden komplett offline gehalten. Der Server sieht nie, welcher Nutzer was aufruft, da es keine angemeldeten Nutzer gibt. Ob ein neuer Mitarbeiter nun alles durchgearbeitet hat, oder nicht einmal die App installiert hat, lässt sich somit nicht nachvollziehen.

Vor- und Nachteile der Systeme

Wie entscheidet ihr je Kunde, welche Technologie für ein solches Projekt am besten geeignet ist?

Es gibt Anwendungen, die nur über eine native App umsetzbar sind. Wenn ein Kunde beispielsweise unbedingt Push-Nachrichten auf einem iPhone haben möchte, dann geht es nicht anders als nativ. Auf der anderen Seite ist die Herstellung von PWAs durch den Einsatz von Webtechnologien und den Verzicht auf das ganze Store-Handling auch deutlich günstiger als eine native App. Das verfügbare Budget spielt natürlich auch eine entscheidende Rolle.

Habt ihr weitere PWA Projekte in der Pipeline, zu denen du uns schon etwas verraten kannst?

Eine Menge – aber die wollen wir noch nicht verraten 😉 Nur soviel: auch im E-Commerce-Bereich können mit PWAs tolle Sachen gemacht werden.

Ein paar Worte zu dir und deiner Agentur?

giftGRÜN ist die Digitalagentur innerhalb der GRÜN Gruppe. Unsere Firmengruppe ist in Deutschland marktführender Anbieter für Spenden- und Mitgliederverwaltungssysteme. In den meisten unserer Projekte geht es darum, unseren Kunden ein Gesamtsystem einzurichten, also unser ERP-System mit Internetseiten zu verbinden.

Wir machen sehr viel Schnittstellen-Arbeit und entwickeln dafür auch eigene WordPress Themes. Unser Team besteht aus Designer:innen, Front- und Backendler:innen sowie Projektleiter:innen. Unser Lieblingshoster kommt natürlich aus Münster 🙂

Deine Fragen zu Progressive Web Apps

Welche Fragen zu Progressive Web Apps hast du? Nutze gerne die Kommentarfunktion. Du willst über neue Beiträge zu WordPress und WooCommerce informiert werden? Dann folge uns auf TwitterFacebookLinkedIn oder über unseren Newsletter.

Kommentare zu diesem Artikel

A

Welche PWA Plugins sind denn empfehlenswert?
Wie sieht’s denn aus mit AMP?

Daniel Winzen
Daniel Winzen

Hier drei Plugins, mit denen sich eine PWA für die eigene Seite realisieren lässt:
https://wordpress.org/plugins/pwa-for-wp/
https://wordpress.org/plugins/super-progressive-web-apps/
https://wordpress.org/plugins/progressive-wp/
Wir bei giftGRÜN haben für unser Projekt anfangs PWA for WP & AMP verwendet, sind dann jedoch relativ schnell zu einer Eigenentwicklung übergegangen, da das Plugin für unseren Anwendungsfall nicht ausgereicht hat.

Für AMP empfiehlt es sich das offizielle AMP Plugin zu nutzen:
https://wordpress.org/plugins/amp/

Sehr interessanter Artikel, danke für die Einblicke. Insbesondere den Teil zu der Zip Datei finde ich spannend, ist es tatsächlich eine zip Datei oder wurde das hier im Text nur vereinfacht?

Gute Idee mit JavaScript dementsprechend eine Teil-Offline Funktionalität umzusetzen. JavaScript ist nach wie vor sehr praktisch für einige Webprojekte. Werden nun bald auch die erste Webapp auf WordPress basierend entwickeln und launchen – wird spannend

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.