Code ist Poesie

Progressive Web Apps mit WordPress – ein Überblick

PWAs scheinen in aller Munde – was hat es damit auf sich?

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:

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

Further Reading

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!

6 Kommentare zu “Progressive Web Apps mit WordPress – ein Überblick

  1. Hi Alex,

    Ich habe mit dem PWA Plugin von Google meine Seite Travel-Dealz.de als PWA umgesetzt. Wirklich simpel, musste eigentlich nur Splash Screen hinterlegen. Wie man die PWA installiert, erkläre ich auf einer extra Seite: https://travel-dealz.de/pwa/
    Hatte jahrelang eine native App für iOS und Android aber die Pflege ist einfach viel zu aufwendig zusätzlich zu einer Website.

    Auf Push Notifications verzichte ich bisher, weil iOS das nicht unterstützt. Ich hoffe man kann bald die PWA auch bei Apple im App Store einreichen. Die Reichweite fehlt auf jeden Fall.

  2. Ich nutze SuperPWA von meinem alten Kollegen Arun auf glueckpress.com und bin nach wie vor sehr zufrieden damit (auch wenn die Site mittlerweile in Rente ist). Einfach einzurichtendes und gut gepflegtes Plugin, besonders für Nicht-Entwickler/-innen.

    Push Notifications erlebe ich bei Content-Seiten als komplett unsinnig und nervtötend. Und ich bin mehr als besorgt, dass der inflationäre Umgang damit zu Konsequenzen seitens Google und/oder Apple führen wird – ähnlich wie gedankenlos aufgeblasene Ladezeiten uns irgendwann ein im Grunde völlig überflüssiges, aber trotzdem irgendwie notwendiges AMP beschert haben. Web will nicht hören, Web muss fühlen…

    Abgesehen von dem alten Dilemma, dass du Leuten ein Hammer (oder eben Push Notifications im Browser) gibst und das erste, was ihnen dazu einfällt, ist sich gegenseitig auf die Birne zu hauen, freue ich mich jedoch riesig über PWAs und wünschte, mehr Websites würden diese geniale Technologie nutzen.

    • Hallo Caspar, vielen Dank für den Erfahrungsbericht und deine Einschätzung! Mir geht es ähnlich, ich finde Push-Nachrichten auch extrem nervig und deaktiviere sie eigentlich fast alle. Hier muss ich mich auch noch mal schlaumachen, wie und ob ich es Nutzer*innen ermöglichen kann, ihre Push-Nachrichten-Einstellungen bei PWAs möglichst leicht zu managen, um keine Frustration zu erzeugen. Viele Grüße!

  3. Moin Alex,

    ich habe es jetzt geschafft die PWA sogar als „echte“ App in den Google Play Store zu bringen und habe darüber gebloggt: https://go-around.de/blog/pwa-google-play-store/

Schreibe einen Kommentar

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