Progressive Web App mit WordPress erstellen

Eine Progressive Web App (PWA) ist eine Website, die wie eine App funktionieren soll. In diesem Artikel erklären wir Ihnen, wie Sie in nur einer Minute aus Ihrer Website eine Progressive Web App mit WordPress erstellen können.

Was ist eine Progressive Web App?

Eine PWA ist eine Website, die so gestaltet ist, dass sie wie eine App aussieht und sich auch so verhält. Sie kann als App-Symbol auf den Smartphones, Tablets und Computern der Nutzer:innen angezeigt werden. Zudem kann sie offline genutzt werden, Benachrichtigungen an User senden und auf allen modernen Plattformen laufen.

Eine Progressive Web App erstellen

Sie können jede Website in eine Progressive Web App verwandeln. Für erfahrene Webentwickler:innen ist das nicht sehr schwer, aber auch wenn Sie keine Ahnung von Webentwicklung haben, kann es ganz einfach sein. Wir zeigen Ihnen wie!

Eine Progressive Web App mit WordPress erstellen

Um eine Progressive Web App in WordPress zu erstellen, benötigen Sie ein Plugin. Wir haben mehrere Plugins getestet und unseren Favoriten ausgewählt. Aber Sie können natürlich auch nach anderen Plugins suchen, indem Sie in WordPress nach „PWA“ suchen.

So erstellen Sie eine Progressive Web App mit WordPress:

1. Melden Sie sich bei WordPress an
2. Bewegen Sie den Mauszeiger über „Plugins“ im linken Menü und klicken Sie auf „Neues Plugin hinzufügen“
3. Suchen Sie nach „PWA“
4. Installieren Sie „Super Progressive Web Apps“
5. Klicken Sie auf „Aktivieren“

So einfach geht’s! Ihre Website ist jetzt eine Progressive Web App. Wenn Sie Ihre Website auf einem Telefon oder Computer besuchen, fragt der Browser möglicherweise, ob Sie Ihre Website als App installieren möchten.

Sie können Ihre Progressive Web App in den Einstellungen von Super Progressive Web Apps in der linken Symbolleiste anpassen. Dort lässt sich das Logo Ihrer App ändern, die Beschreibung und der Name anpassen, die Hintergrundfarbe des Ladebildschirms einstellen und vieles mehr.

Es gibt zusätzliche Funktionen für weitere individuelle Anpassungen, die Aktivierung von PWA für mehrsprachige Websites und die schnelle Erstellung von Versionen der App für den Google Play Store. Diese Funktionen kosten extra und sind Teil der Pro-Version des Plugins.

Denken Sie daran, dass alle Plugins auf Ihrer WordPress-Website regelmäßig aktualisiert werden müssen, um die Sicherheit zu gewährleisten. Deshalb empfehlen wir generell, automatische Updates zu aktivieren.

Automatische Updates bergen jedoch das Risiko, dass ein Update Ihre Website in einer unbeabsichtigten Weise verändert. Mit Managed WordPress von one.com werden alle automatischen Updates überwacht. Wir führen vor und nach jedem automatischen Update eine Sichtprüfung Ihrer Website durch, um zu gewährleisten, dass Updates keine Probleme für Ihre Website verursachen.

Andere Methoden zur Erstellung von PWAs

Es ist möglich, eine Progressive Web App für jede beliebige Website zu erstellen. Wir werden in diesem Artikel nicht den gesamten Prozess beschreiben, aber kurz gesagt müssen Sie zwei Dinge tun:

1. Ein Web-App-Manifest erstellen, das den Namen Ihrer Website, das App-Symbol, die Farbe und das Anzeigeformat enthält.
2. Einen Service Worker erstellen, der als Brücke zwischen dem Gerät der User und Ihrer Website fungiert. Erst der Service Worker macht aus Ihrer Website eine Progressive Web App.

Wenn Sie mehr erfahren und mit Ihrer Progressive Web App loslegen möchten, können Sie diesen umfassenden Guide auf web.dev lesen.

Vorteile einer Progressive Web App

Viele der weltweit beliebtesten Onlinedienste nutzen die Progressive Web App-Technologie. Einige Beispiele sind Spotify, Facebook, Tinder, Google, Twitter, Uber und Starbucks. Auch Sie können eine Progressive Web App erstellen und von ihren Vorteilen profitieren.

Im Folgenden gehen wir auf die wichtigsten Vorteile einer PWA ein.

App-ähnliche User Experience

Der größte Vorteil einer Progressive Web App ist, dass sie einer Website die gleiche User Experience wie einer App verleiht. Eine App ist schnell, kann Benachrichtigungen senden, funktioniert offline und kann einen zentralen Platz auf dem Gerät der Benutzer:innen einnehmen.

Eine Website, die wie eine App funktioniert, bietet diese zusätzlichen Vorteile:

App-Symbol auf dem Startbildschirm

Nachdem Sie eine Progressive Web App erstellt haben, können neue Besucher:innen Ihre Website als App herunterladen. Nach der Installation erscheint sie auf dem Startbildschirm des Geräts der Nutzer:innen, sei es auf einem iPhone oder Android-Handy, im Dock eines Macs oder in der Taskleiste eines Windows-Computers.

Ihr App-Symbol kann als Werbefläche für Ihre Website dienen. Nach der Entwicklung einer Progressive Web App für seinen Onlineshop stellte der E-Commerce-Riese Alibaba fest, dass User mit der App auf dem Startbildschirm viermal häufiger zurückkehrten als ohne. Ein App-Symbol kann also viele Besucher:innen in wiederkehrende Nutzer:innen und Kund:innen verwandeln.

Personen, die einen Computer einer Organisation, zum Beispiel eines Unternehmens oder einer Schule nutzen, können eine Progressive Web App oft auch dann installieren, wenn die Installation anderer Apps untersagt ist. So ist auch der Zugang zu einem Publikum möglich, das mit normalen Apps nur schwer zu erreichen ist.

App mit eigener Anzeige

Eine normale Website wird in einem Browser-Tab angezeigt, aber eine PWA funktioniert wie eine App und erhält daher ein eigenes Fenster auf einem Computer und erscheint als eigenständige App auf mobilen Geräten.

Nutzer:innen können ihren Browser schließen, ohne dabei die Progressive Web App zu schließen. Und sie können zwischen Apps wechseln, ohne einen Unterschied zwischen einer normalen App und einer PWA zu bemerken.

Verfügbar in App Stores

Sobald Sie eine Progressive Web App erstellt haben, können Sie sie als App im Google Play Store und Apple App Store zur Verfügung stellen. Dadurch sieht Ihre App professioneller aus und kann von neuen Nutzer:innen entdeckt werden.

Ein großer Vorteil der Aufnahme in einen App Store ist, dass Sie die Erwartungen Ihrer Besucher:innen hinsichtlich der Installation einer App erfüllen können. Die Benutzer:innen fühlen sich sicher, wenn sie Ihre Progressive Web App von einem App Store ihres Vertrauens herunterladen.

Eine App für alle Plattformen

Wenn Sie eine Progressive Web App erstellen, öffnen Sie ein Portal zu Ihrer Website. Dieses Portal wird nach einem Standard erstellt, der mit allen modernen Plattformen funktioniert. So wie Sie eine Website erstellen können, die auf allen Geräten funktioniert, können Sie auch eine Progressive Web App erstellen, die für alle funktioniert.

Die Inhalte lassen sich ganz einfach in allen Apps aktualisieren, indem Sie Ihre Website ändern. Und die Aktualisierungen können an alle Benutzer:innen gesendet werden, ohne dass diese die App aktualisieren müssen.

Schnelles Laden

Wenn Besucher:innen zum ersten Mal eine Progressive Web App herunterladen, wird die App auf ihrem Gerät gespeichert. Das bedeutet, dass sie beim nächsten Öffnen schnell geladen werden kann.

Somit kann eine Progressive Web App schneller sein als eine Website. Das Gleiche gilt für jeden Klick innerhalb der App. Für jede neue Seite kann das Gerät lokale Ressourcen nutzen, um die Ladezeiten zu verkürzen.

Offlinemodus

Eine Progressive Web App kann so erstellt werden, dass sie offline verfügbar ist. Das bedeutet, dass die wichtigsten Funktionen immer zugänglich sind und schnell geladen werden können, auch wenn die Benutzer:innen eine langsame Internetverbindung haben.

Gleichzeitig bedeutet es, dass Ihre App wesentliche Funktionen haben kann, auf die sich Ihre Benutzer:innen verlassen können. Ein Beispiel ist eine Funktion zur Anzeige von Buchungen bei einer Veranstaltung. Diese Buchungen können auch dann angezeigt werden, wenn die Internetverbindung am Veranstaltungsort langsam ist.

Benachrichtigungen senden

Mit einer Progressive Web App lassen sich Benachrichtigungen an Ihre Benutzer:innen senden. So können Sie sie über Ihre Neuigkeiten informieren und persönliche Nachrichten an die User senden. Benachrichtigungen können die Nutzung Ihrer App erhöhen und für mehr Engagement sorgen.

Günstiger als die Entwicklung einer regulären App

Es ist viel billiger, eine Progressive Web App zu erstellen, als Apps für iOS und Android zu entwickeln. Wenn Sie bereits eine gute Website haben, können die Kosten für die Erstellung einer PWA minimal sein.

Selbst wenn Sie große Ambitionen für Ihre App haben und planen, diese langfristig mit vielen Features auszustatten, kann eine Progressive Web App während der Entwicklung eine viel günstigere Alternative sein.

Traffic und Conversions steigern

Aus gutem Grund verwenden viele große Technologieunternehmen die Progressive Web App-Technologie. Eine großartige User Experience schafft die Voraussetzungen für hohe Besuchszahlen und gute Conversion Rates.

Alibaba meldete einen 76-prozentigen Anstieg der Konversionsraten aufgrund seiner Progressive Web App. Das Softwareunternehmen Corel verzeichnete mit seiner Progressive Web App einen um 31 % höheren Prozentsatz an wiederkehrenden Nutzer:innen.

Nachteile einer Progressive Web App

Es gibt auch Nachteile bei der Erstellung einer Progressive Web App, insbesondere im Vergleich zu traditionellen Apps, die für iOS und Android entwickelt wurden.

Funktioniert nicht auf älteren Geräten

Progressive Web Apps sind eine relativ neue Technologie und daher nicht auf allen Geräten verfügbar. Für Apple iOS ist die Unterstützung seit iOS 14 verfügbar, iPhones von 2014 oder früher unterstützen also keine PWA.

Das Gleiche gilt für Windows, wo die Unterstützung in Windows 8 und früheren Versionen fehlt. Insgesamt sind viele Geräte inkompatibel, wenn sie mehr als 10 Jahre alt sind.

Eingeschränkte Funktionalität

Eine Progressive Web App kann nicht die gleiche Funktionalität wie eine reguläre App haben. So kann es etwa Einschränkungen bei der Integration einer App mit Sprachassistenten geben.

Einige Betriebssysteme räumen Progressive Web Apps auf einem Telefon auch nur geringen Speicherplatz ein. In der Regel sind das 50 MB. Dadurch kann es für große Websites schwierig sein, sie als Progressive Web App zu erstellen.

Langsamer als normale Apps

Da es sich bei einer Progressive Web App im Grunde um eine Website handelt, die wie eine App aussehen soll, ist sie nicht wie eine normale App aufgebaut.

Das führt dazu, dass eine PWA oft langsamer auf Klicks reagiert als eine reguläre App. Sie kann zwar immer noch deutlich schneller sein als eine Website, aber eine herkömmliche App wird immer schneller sein als eine Progressive Web App.

Sollten Sie eine Progressive Web App erstellen?

Haben Sie eine Website, von der Sie glauben, dass Ihre Besucher:innen sie als App nutzen möchten? Ist Ihre Website zudem mit WordPress erstellt? Dann sollten Sie noch heute eine Progressive Web App erstellen!

Es ist sehr einfach und kann sowohl für Sie als auch für Ihre Besucher:innen von großem Nutzen sein. Eine Progressive Web App kann den Traffic auf Ihrer Website erhöhen, die Conversion Rate steigern und Ihnen ermöglichen, mit Ihren Besucher:innen und Kund:innen über Benachrichtigungen zu kommunizieren.

Wenn Sie keine WordPress-Website haben, kann eine PWA trotzdem sinnvoll sein, aber es ist schwieriger, sie zu realisieren. Es gibt dazu viele Ressourcen im Internet, aber wahrscheinlich werden Sie nur als erfahrene:r Webentwickler:in erfolgreich sein.

Wir hoffen, dass Sie nun alles haben, was Sie brauchen, um mit Ihrer Progressive Web App zu beginnen und verstehen, warum es eine gute Technologie für Sie und Ihre Besucher:innen ist. Wenn Sie noch keine WordPress-Website haben, klicken Sie hier, um loszulegen!