Progressive Web Apps mit WordPress – ein Überblick

Was sind Progressive Web Apps?

Progressive Web Apps (PWAs) scheinen schon seit ein paar Jahren ein Thema zu sein, haben sich offenbar aber noch nicht in ganzer Breite gegenüber den Apps aus den zwei großen App-Stores durchsetzen können. Doch was sind PWAs überhaupt? Google nennt sie auf web.dev „Websites that took all the right vitamins“. Eine etwas ausführlichere Definition, eher aus Nutzer*innen-Perspektive:

„Eine PWA kann man sich wie eine responsive Webanwendung vorstellen, die den Anschein einer nativen App erweckt. So kann die Applikation native Funktionen des verwendeten Geräts wie Kamera und Mikrofon, GPS-Ortung oder Push-Benachrichtigungen nutzen und in das Programm einbeziehen. Dabei prüft die Anwendung sowohl den genutzten Browser als auch das Gerät auf Kompatibilität. Auch das „Look and Feel“ einer PWA verhält sich auf einem Smartphone und Tablet ähnlich wie bei einer Native Mobile App (flüssige Verhaltensweise bei der Bedienung, gute Reaktionszeiten bei Wischbewegungen etc.).“

„Progressive Web-Apps: Was versprechen die progressiven Apps?“ auf ionos.de

Google ist offenbar sehr stark an der Fortentwicklung und Verbreitung von PWAs interessiert, und hat anscheinend testweise damit begonnen, Native Apps in seinem Play Store gegen PWAs auszutauschen (mehr dazu auf GoogleWatchBlog.de). Auch auf t3n.de werden den PWAs einige Zukunftschancen eingeräumt, auch wenn sich Google-Konkurrent Apple noch sträubt.

Als großer Vorteil von PWAs erscheint mir, dass Content-Anbieter*innen einen viel geringeren Aufwand betrieben müssen, das sie nicht mehr zwei Native Apps für iOS und Android plus eine eigentliche Website entwickeln und betreiben müssen, sondern nur noch eine als PWA optimierte Website. Auch die App Stores verlieren womöglich ihre Gatekeeper-Funktion – wohin das führen kann, ließ sich zuletzt am Beispiel von Hey vs. Apple beobachten.

Es scheint auf jeden Fall an der Zeit, sich etwas eingehender mit PWAs zu beschäftigen, gerade auch aus WordPress-Perspektive. Dieser Artikel soll dazu dienen, sich einen ersten Überblick zu verschaffen, und wird zukünftig noch erweitert und aktualisiert.

WordPress und PWAs

Erstmalig ist mir eine PWA in Zusammenhang mit WordPress bei der Website des WordCamp Europe 2018 in Belgrad aufgefallen. Hier wurde offenbar wahre Pionierarbeit geleistet, und ich konnte mir tatsächlich das #WCEU-Programm auch offline anschauen und etwa Favoriten im Programm markieren. Auch Push-Mitteilungen waren schon möglich, wenn ich mich richtig erinnere.

Dieser erste Erfolg setzte einen Prozess in Gang, bei dem PWA-Support für alle WordCamps entwickelt wurde. Und seit März 2020 ist es offenbar soweit: Alle WordCamp-Seiten weltweit können jetzt als PWAs ausgeliefert werden, wenn gewünscht – mehr Infos auf make.wordpress.org.

Plugin-Lösungen

Die WordPress-Community hat schon einige Plugins hervorgebracht, mit denen sich WordPress-Websites als PWAs trimmen lassen:

• PWA von Google
• Progressive WordPress (PWA)
• PWA for WP & AMP
• Super Progressive Web Apps

Die Verbreitung erscheint insgesamt noch niedrig – die genannten Plugins haben zwar gute Bewertungen, doch die aktiven Installationen belaufen sich jeweils im niedrigen fünfstelligen Bereich.

Der Vollständigkeit halber sei hier noch der PWA Builder genannt, ein von Microsoft gefördertes Open-Source-Projekt.

Ein Beispiel aus der Wildnis: Juice.de

Ich habe nicht wirklich viele weitere Beispiel für WordPress-PWAs gefunden, aber zufällig bin ich über diese hier gestolpert: Die PWA-optimierte Website des deutschsprachigen Musikmagazins JUICE. Die Website läuft auf WordPress mit dem Theme Newspaper (hier erhältlich bei ThemeForest, hier die entsprechende Demo).

Die PWA-Funktionalität der Website wird hier mit dem Plugin PWA for WP & AMP hergestellt, Push-Mitteilungen werden offenbar über OneSignal gesteuert.

• 

• 

• 

• 

Interessant – wenn auch gestalterisch und textlich sicherlich noch verbesserungswürdig – finde ich den Call-to-Action, der dazu auffordert, das „JUICE MAGAZIN zum Startbildschirm“ hinzuzufügen. Dieser CtA erscheint, wenn ich die Website regulär mit Chrome aufrufe. Offenbar ist das auch eine Funktion des oben genannten PWA-Plugins. Ich denke, dass diese direkten Aufforderungen entscheidend dafür sind, ob Nutzer*innen sich die PWA überhaupt „installieren“.

Ich frage mich allerdings, warum in der PWA anscheinend geringfügig anders Styles zur Anwendung kommen: Hier ist die Headline auf einmal linksbündig und kleiner, die Kategorien-Badge ist schwarz hinterlegt und kein Ghost-Button mehr, und die nächsten Artikel sind hochgeschoben.

Weitere PWAs mit WordPress

• Travel-Dealz.de
• …

Further Reading

• nichteinschalten.de: „So wird aus WordPress eine App“ (10.01.2020)
• t3n.de: „Webdesign: So steht es um Progressive-Web-Apps im Jahr 2020“ (20.01.2020)
• fruyts.de: „Progressive Web Apps mit WordPress“ (21.05.2019)
• codeinwp.com: „Want to Build Progressive Web Apps Based on WordPress and WooCommerce? Here’s How (w/ Code Examples)“ (26.6.2020)
• wpengine.com: „Progressive Web Apps for WordPress“ (03.12.2019)
• web.dev: „Progressive Web Apps“

Mehr davon!

Ich stehe hier erst am Anfang, daher freue ich mich sehr über weiteren Input: Kennst du weitere WPA-optimierte WordPress-Websites? Hast du schon einmal eine umgesetzt? Was sind deine Erfahrungen? Schreib’s mir in die Kommentare!