Konvertieren Ihrer WordPress-Site in eine PWA: Weiter im Trend

Die PWA-Bewegung ist eine Bewegung, die so transformierend und monumental ist, dass sie wie eine riesige Welle geworden ist, die über die Tech-Welt fegt und alles auf ihrem Weg zum Besseren verändert.

Einige der einflussreichsten Marken der Welt, nämlich Twitter mit ihrem berühmten Twitter Lite , haben PWA jetzt offiziell zur Grundlage ihrer zukünftigen Entwicklungen gemacht.

 Empfohlene Lektüre: 12 Progressive Web Apps Beispiele für Ihre Inspiration

WordPress, oder genauer gesagt Automattic – die Leute hinter WordPress, hat auch die WordPress PWA-Bewegung bereits auf dem Chrome Dev Summit 2017 initiiert, indem sie ihre laufenden Arbeiten zur Integration progressiver Technologien in den Workflow von Plattformen wie WordPress ankündigten.

Seitdem hat sich die WordPress-Landschaft so sehr verändert, dass die Nichtumwandlung Ihres WordPress in eine PWA fast ein garantierter Verlust an Zuschauerzufriedenheit ist.

PWA verstehen

Wie Google es ausdrückte, sind Progressive Web Apps

• Zuverlässig – Laden Sie sofort und zeigen Sie nie den Downasaur, selbst unter unsicheren Netzwerkbedingungen.
• Schnell – Reagieren Sie schnell auf Benutzerinteraktionen mit seidenweichen Animationen und ohne ruckartiges Scrollen.
• Ansprechend – Fühlen Sie sich wie eine natürliche App auf dem Gerät mit einem immersiven Benutzererlebnis.

Einfach ausgedrückt, PWAs sind die Zukunft des Web-Browsing-Erlebnisses. Weitere Informationen zu PWAs finden Sie in unserem Artikel: Was ist eine PWA?.

Warum PWA für WordPress?

Wenn Sie nicht möchten, dass sich Ihre Zuschauer zu Tode langweilen, indem sie darauf warten, dass Ihre Webseite geladen wird, ist die Lösung mit erhöhter Site-Performance, Funktionalität und UX immer die bessere Wahl.

Nehmen Sie zum Beispiel das berühmte Twitter Lite. Eine Fallstudie hat gezeigt, dass Twitter mit der Veröffentlichung von Twitter Lite eine enorme Veränderung im Nutzerverhalten erfahren hat.

Nicolas Gallagher, der technische Leiter für Twitter Lite, bemerkt:

Twitter Lite ist jetzt die schnellste, kostengünstigste und zuverlässigste Art, Twitter zu nutzen. Die Web-App konkurriert mit der Leistung unserer nativen Apps, benötigt aber im Vergleich zu Twitter für Android weniger als 3 % des Gerätespeicherplatzes .

Und nicht nur Twitter hat sich dieser Bewegung angeschlossen, auch große Marken wie Spotify haben es mit ihrer jüngsten Entwicklung von Spotify PWA getan. Statistiken und Nachrichten über die Veränderungen, die PWAs mit sich bringen, sind überall und fast zu groß, um sie zu ignorieren, sodass die Behauptung einer PWA-gestützten Zukunft des Webs noch realistischer denn je erscheint.

Voraussetzungen zum Einrichten einer PWA in WordPress

• Progressive Web Apps erfordern, dass Ihre WordPress-Website von einem sicheren Ursprung bereitgestellt wird, dh Ihre Website sollte HTTPS und nicht HTTP sein.
• WordPress-Version: Höher als 3.5.0
• PHP-Version: Höher als 5.3

So konvertieren Sie Ihre WordPress-Site in eine PWA

Sobald die oben genannten Voraussetzungen erfüllt sind, können WordPress-Site-Besitzer wählen, ob sie auf eine der beiden Arten zu PWA konvertieren möchten: Manuell oder mit Plugins .

1. Entwickeln Sie Ihre PWA manuell

Die Entwicklung von PWA – obwohl sie weniger kostspielig ist als andere Arten der Entwicklung – erfordert immer noch eine beträchtliche Menge an Programmierkenntnissen und der Entwickler muss sich mit den vorherrschenden Javascript-Frameworks und -Bibliotheken, insbesondere Angular und React, auskennen. Aus diesem Grund wird unerfahrenen Websitebesitzern oft empfohlen, Plugins (kostenlose und/oder kostenpflichtige) auszuprobieren oder einen professionellen Entwickler zu beauftragen, da der Prozess zum Erstellen einer PWA nicht einfach ist.

Denken Sie beim Versuch, eine PWA manuell zu erstellen, daran, die Checkliste für progressive Webanwendungen von Google zu befolgen und Ihre Webseite mit dem Lighthouse-Tool zu testen, um die bestmögliche Benutzererfahrung zu erzielen.

2. Mit Plugins

Ärgern Sie sich nicht, Besitzer von Nicht-Entwicklerseiten! WordPress bietet eine große Auswahl an Plugins, die die meisten Schwerstarbeit für seine Benutzer zur Auswahl erledigen. Diese Plugins gibt es in 2 Typen: Kostenlose und kostenpflichtige Plugins.

Kostenlose Plugins

1. SuperPWA

An der Spitze der kostenlosen PWA-Plugins für WordPress steht SuperPWA mit seiner langjährigen Tradition von exzellentem Service und Qualität.

SuperPWA ist einfach zu konfigurieren, die Einrichtung Ihrer Progressive Web App dauert weniger als eine Minute. SuperPWA führt eine saubere Deinstallation durch, indem alle erstellten Datenbankeinträge und Dateien entfernt werden. Tatsächlich werden keine der Standardeinstellungen in der Datenbank gespeichert, bis Sie sie das erste Mal manuell speichern.

Aktive Installationen: 30000+
Sternebewertung: ★★★★★

2. PWA

PWA soll die PWA-Bausteine ​​und Koordinierungsmechanismen für Themen und Plugins bereitstellen, um das Rad nicht neu zu erfinden und auch nicht miteinander in Konflikt zu geraten.

Wenn Sie ein Plug-in oder Design entwickeln, das einen Service Worker enthält, sollten Sie sich auf dieses PWA-Plug-in verlassen oder zumindest die integrierte Implementierung nur als Fallback verwenden, wenn das PWA-Plug-in nicht verfügbar ist.

Zuletzt aktualisiert: vor 5 Monaten
Aktive Installationen: 20.000+
Sternebewertung: ★★★★

3. PWA für WP & AMP

Für ein kostenloses Angebot ist PWA für WP & AMP großartig in dem, was es tut. Es ist gut, einfach zu bedienen und bietet einen außergewöhnlichen Kundenservice; Die Dokumentation fühlt sich jedoch etwas mangelhaft an, was dazu führen kann, dass es schwieriger wird, alles zum Laufen zu bringen.
Aktive Installationen: 8.000+
Sternebewertung: ★★★★★

4. WebSuite-PWA

WebSuite PWA ist ein komplettes Plugin, um Ihre Website in eine PWA mit integrierter AMP-Unterstützung zu verwandeln. Das Plugin enthält verschiedene Themen, um Ihrer PWA ein App-ähnliches Aussehen zu verleihen, zusammen mit vielen Funktionen wie Zum Startbildschirm hinzufügen, Push-Benachrichtigungen, CDN, Analytics-Integration usw.

Aktive Installationen: 30+

Sternebewertung: ★★★★★

5. Einfache PWA für WordPress von Webkul

Mit nur 49 US-Dollar können Sie Ihre WordPress-Site in eine voll funktionsfähige PWA mit all ihren Funktionen und Vorteilen umwandeln – und das ist noch nicht alles. Das Plugin ist mit allen WordPress-Themen kompatibel, außerdem können Sie das Thema, den Anwendungsnamen sowie das Anwendungssymbol vom Admin-Backend aus ohne großen Aufwand oder erforderliches technisches Wissen ändern.

Aktive Installationen: Informationen nicht verfügbar

Sternebewertung: Informationen nicht verfügbar

So installieren Sie PWA-Plugins

Der Installationsprozess für WordPress PWA-Plugins ist ziemlich einfach und optimiert. Im Folgenden verwenden wir SuperPWA als Beispiel:

WordPress-Installation :

• Besuchen Sie WordPress Admin > Plugins > Neu hinzufügen
• Suchen Sie nach „ Super Progressive Web Apps “.
• Klicken Sie auf „ Jetzt installieren “ und dann auf „ Aktivieren “ von Super Progressive Web Apps

So installieren Sie manuell:

• Laden Sie den Ordner super-progressive-web-apps in die hoch /wp-content/plugins/ Verzeichnis auf deinem Server
• Gehen Sie zu WordPress Admin > Plugins
• Aktivieren Sie das Super Progressive Web Apps- Plugin aus der Liste.

Fazit

Diese PWA-Bewegung scheint sich in absehbarer Zeit nicht zu verlangsamen, und am besten ergreifen Sie jetzt Maßnahmen, bevor Sie hinterherhinken.

Wenn Sie technisch versiert sind und mehr Freiheit für sich und Ihre Website wünschen, sollte die manuelle Entwicklung von PWA eine bevorzugte Option für Sie sein. Für Websitebesitzer, die nicht so erfahren sind und eine sicherere, bewährte Methode suchen, sind PWA-Plugins für WordPress jedoch keine so schlechte Idee. Plugins können Ihnen Zeit und gelegentliche Kopfschmerzen beim Erstellen einer PWA ersparen und so eine bessere Ressourcenzuweisung ermöglichen.

Weiterführende Literatur:

• Magento PWA Studio: Ein detaillierter Vergleich mit Vue Storefront

• Magento-WordPress-Integration: Eine Schritt-für-Schritt-Anleitung