WordPress mit PWA in eine App verwandeln

Google Rating
5.0
Based on 25 reviews
×
js_loader
WordPress PWA

Progressive Web Apps (PWA) wurden durch Google ins Leben gerufen und sind noch relativ neu. WordPress PWA ist die Kombination mit dem CMS, welche für Mobile neue Massstäbe setzt.

29.12.2019
Was ist eine Progressive Web App?

Progressive Web Apps sind responsive und per HTTPS übertragene Webanwendungen, welche die Fähigkeiten der Browser so nutzen, dass mittels Offline-Funktionalität eine zuverlässige und geniale Benutzerfreundlichkeit gewährleistet wird.
(vgl. Wikipedia)

Was sind die Vorteile einer PWA?

Mit Zunahme des weltweiten Traffics über Smartphones wird auch die Mobile-Performance immer wichtiger. Eine Progressive Web App kann die Geschwindigkeit für Mobile regelrecht in die Höhe katapultieren. Die wichtigsten Vorteile sind:

a) Eine PWA funktioniert direkt im mobilen Browser unter iOS und vorallem Android.
b) Sie durchlaufen keinen langen Prozess im App Store bzw. Google Play Store, bis sie veröffentlicht werden können.
c) Die Progressive Web App funktioniert natürlich auf diversen Plattformen und auf allen Endgeräten.
d) Die Benutzer sparen Datenvolumen, da bei einem erneuten Aufruf der Website via App keine Daten heruntergeladen werden.
e) PWA funktioniert komplett offline.
f) Eine PWA lädt unglaublich schnell, da die Daten offline im Cache gespeichert sind.

Eigenschaften

Damit eine Progressive Web App auch als solche akzeptiert wird, müssen gemäss den Informationen seitens Google (Englisch) folgende Aspekte erfüllt sein:

  • Die Website nutzt HTTPS und weist keinen «mixed content» auf.
  • Die Seiten sind auf Tablets sowie Smartphones responsive und das Design ist darauf ausgelegt.
  • Alle App-URLs können offline geladen werden.
  • Es existieren Metadaten für das Hinzufügen zum Home-Screen.
  • Der erste Seitenaufruf ist schnell, selbst mit einer 3G-Verbindung.
  • Die Website funktioniert mit unterschiedlichen Browsern.
  • Der Wechsel auf eine Unterseite der Website darf sich nicht so anfühlen, als ob dieser von der Netzwerk-Verbindung abhängig ist.
  • Jede Seite hat eine eigene URL, sprich Onepager sind dafür nicht geeignet (übrigens auch suboptimal im Bezug auf SEO).

Browser-Kompatibilität

Die Kompatibilität ist davon abhängig, ob dein Browser sogenannte Service Worker (mehr dazu später) unterstützt. Mittlerweile ist das bei mehr als 90% der gängigen Browsern der Fall.

WordPress PWA – das Vorgehen

Das zentrale Element einer PWA ist der Service Worker. Dabei handelt es sich um ein JavaScript, welche die Offline-Funktion des Browsers nutzt und die Inhalte in den Cache (Zwischenspeicher) lädt. Dadurch kann der Benutzer im Anschluss die Website als App und offline benutzen. Damit der Service Worker problemlos funktionieren kann, ist HTTPS zwingend notwendig.

Natürlich kannst du selber eine PWA für WordPress bauen. Das ist jedoch nicht ganz trivial und du solltest dabei die Standards durch Google befolgen. Alternativ hat Nico Martin ein fantastisches Plugin entwickelt, welches diesen Job übernimmt und natürlich auch einen Service Worker beinhaltet.

Progressive WordPress (PWA) Plugin

Das PWA-Plugin kannst du ganz normal installieren und entsprechend konfigurieren. Wenn sämtliche Anforderungen der Website erfüllt sind, ist diese nun kompatibel mit PWA.
Anschliessend erscheint beispielsweise beim Aufruf mit Chrome auf einem Android-Gerät unten ein Hinweis, ob die Website zum Home-Screen hinzugefügt werden soll.

Hast du diesen Schritt geschafft, erscheint die Website als App auf deinem Home-Screen. Cool, oder? Dies entspricht lediglich einer Verknüpfung und keiner «echten» Installation wie bei anderen Apps. Dies spart nochmals Platz auf deinem Smartphone. Wenn du dann die App öffnest und online zuerst einige der Seiten aufgerufen hast, kannst du es auch offline benutzen.

Wie du siehst, ist die Benutzerfreundlichkeit enorm hoch. Neue Seiten öffnen rasend schnell und die Website ist als App im Vollbild-Modus sehr gut bedienbar.

Kommentar verfassen

Du bist zurzeit offline