Möchten Sie progressive Web-Apps basierend auf WordPress und WooCommerce erstellen? Hier erfahren Sie, wie (mit Codebeispielen)

Wie Sie wahrscheinlich schon erkennen können, ist dieser Beitrag ein wenig auf der "fortgeschritten" Seite, aber es befasst sich mit einem sehr interessanten Thema und bietet einen neuen Zweig, dem wir auf diesem gesamten Mobile-First-Pfad für unsere Websites und / oder Apps folgen können.


Das Ding, das wir nennen "sich anpassendes Webdesign" ist schon eine Weile bei uns und zu diesem Zeitpunkt im Spiel haben die meisten Entwickler / Websites / Web-Tools die Prinzipien bereits vollständig integriert. Aber ist das das Endspiel von "mobilfreundlich"? Oder vielleicht ist es nur der Anfang.

Google glaubt, dass es das letztere ist. Und es kommen Progressive Web Apps!

Der Beitrag, den Sie gerade lesen, ist eine weitere Ausgabe unserer "im Entwicklerhaus" Initiative (hier ist die vorherige). Es wurde von Alexandra Anghel von zusammengestellt Appticles.com.

Alexandra betreten:

Progressive Web Apps auf WordPress und WooCommerce

Grundlegendes zu progressiven Web-Apps

Progressive Web Apps (PWA) sind Erlebnisse, die das Beste aus dem Web und das Beste aus Apps kombinieren. Native App Store-Apps sind in der Vergangenheit durch Funktionen wie z Mitteilungen, Offline arbeiten, Animationen und Übergänge glätten, auf den Homescreen laden und so weiter.

Mobile Web-Apps sind JavaScript-Anwendungen, die im Browser funktionierten und versuchten, einige der nativen Apps-Funktionen ins Web zu bringen, aber beispielsweise keine Push-Benachrichtigungen bereitstellen konnten. Mit der mobilen Einführung neuer Web-APIs schließen Progressive Web Apps nun die Lücke und bieten die volle App-ähnliche Erfahrung im mobilen Web.

Google beschreibt sie als:

  • Zuverlässig – Sofort laden
  • Schnell – Reagieren Sie schnell auf Benutzerinteraktionen
  • Engagieren – Benimm dich wie eine native App

Um all diese Punkte zu erreichen, muss eine Progressive Web App über die folgenden Funktionen verfügen:

  • Arbeiten Sie offline oder unter schlechten Netzwerkbedingungen
  • Web App Installieren Sie Banner oder fügen Sie sie zum Homescreen hinzu
  • Verwenden Sie Web-Push-Benachrichtigungen. Mit der Einführung der Web-Push-API können wir jetzt Push-Benachrichtigungen an unsere Benutzer senden, auch wenn der Browser geschlossen ist.
  • Implementieren Sie HTTPS
  • Verwenden Sie eine Application Shell (oder App Shell) -Architektur, die ähnlich wie native Anwendungen sofort auf den Bildschirmen der Benutzer geladen wird.

Im Wesentlichen ist eine PWA eine in JavaScript geschriebene Einzelseitenanwendung. Der Offline-Modus, Zu Homescreen hinzufügen und Web-Push-Benachrichtigungen werden alle mithilfe von Servicemitarbeitern implementiert.

Progressive Web Apps vs. Responsive Web Design

Progressive Web Apps sollten nicht mit Responsive Web Design verwechselt werden. Progressive Web Apps verfügen über Reaktionsfunktionen, da sie sich jedoch an unterschiedliche Bildschirmgrößen anpassen können Ihr einzigartiges Wertversprechen sind die Funktionen, die sie app-ähnlich machen.

In den letzten Jahren war RWD die erste Lösung für mobile Weblösungen Förster In einem Bericht aus dem letzten Jahr wurde festgestellt, dass RWD die Sättigung erreicht hat – 87% der Hersteller digitaler Erlebnisse befürworten dies – und dass eine Verschiebung der Kundenerwartungen, App-ähnliche Erlebnisse im Web zu bevorzugen, vor unseren Augen stattfindet.

Sind PWAs die Lösung für die Einbindung mobiler Webbenutzer??

Das Erstellen einer hochwertigen Progressive Web App bietet unglaubliche Vorteile, die es einfach machen, Benutzer zu begeistern, das Engagement zu steigern und die Conversions zu steigern. Es gibt mehrere Beispiele für Unternehmen, insbesondere aus der E-Commerce-Branche, die Progressive Web Apps erfolgreich zur Verbesserung ihrer Messdaten eingesetzt haben. Viele davon sind auf der Entwickler-Website von Google aufgeführt.

  • Zum Beispiel hat Alibaba.com eine PWA erstellt, die zu einem schnellen, effektiven und zuverlässigen mobilen Web-Erlebnis führte. Die neue Strategie lieferte eine Steigerung von 76% in Gesamt-Conversions über Browser und eine viermal höhere Interaktionsrate von Add to Homescreen.
  • In einem anderen Anwendungsfall wollte OLX mobile Webbenutzer mithilfe von Add to Homescreen und Push-Benachrichtigungen erneut einbeziehen. Sie erhöhtes Engagement um 250% und auch andere Metriken verbessert: Die Zeit bis zur Interaktivität der Seite verringerte sich um 23%, wobei die Absprungraten um 80% sanken. Die Monetarisierung verbesserte sich ebenfalls, wobei die Klickrate (Click-through-Rate – CTR) um 146% stieg.

Woher wissen wir, dass eine mobile Web-App progressiv ist??

Progressiv zu sein ist zunächst einmal eine Punktzahl, kein Ja oder Nein, und es gibt ein Chrome-Plugin namens Leuchtturm mit denen Sie diese Punktzahl messen können. Dieses Plugin ist sehr einfach zu bedienen und generiert einen Bericht mit allen PWA-Funktionen. Im Grunde wissen wir, was wir ändern müssen, damit eine Web-App vollständig fortschrittlich wird. Für unsere Alpha-Version der WooCommerce PWA haben wir es geschafft, bei Lighthouse eine Punktzahl von 91 zu erreichen.

Leuchtturm

Wie können wir eine PWA bauen??

Der PWA-Standard von Google listet keine bestimmten Technologien oder Frameworks zum Erstellen von Progressive Web Apps auf. Es kann alles sein, solange die Checkliste befolgt wird. Viele PWAs werden mit erstellt Angular JS oder Reagieren, Dies sind derzeit die beliebtesten JavaScript-Frameworks.

reagieren

Sowohl AngularJS als auch React haben ihre Vorteile:

  • Der Winkel / Ionisch Kombination ist heutzutage ziemlich beliebt. Ionic ist ein großartiges Framework, das ursprünglich für mobile Apps entwickelt wurde, aber auf Progressive Web Apps und sogar Desktop-Anwendungen erweitert wurde.
  • Reagieren ist sehr intuitiv und leicht zu verstehen. Es profitiert von einer großartigen Boilerplate-App zum Erstellen und Reagieren, die standardmäßig PWA-Unterstützung bietet.

Neben diesen beiden, VueJS gewinnt auch an Popularität.

Als Nächstes sehen wir einige Codebeispiele aus einer E-Commerce-Anwendung, die mit React auf WordPress und WooCommerce erstellt wurde REST-API.

Diese Artikel könnten Sie auch interessieren:

  • Beste Angular Admin Dashboard-Vorlagen

Grundlegendes zur WooCommerce REST-API

Wenn wir eine E-Commerce-Anwendung erstellen möchten, benötigen wir zunächst eine API, über die wir die Daten abrufen können. Glücklicherweise hat die Aufnahme der REST-API in den Kern die Tür für die Verwendung von WordPress als Backend geöffnet. Darüber hinaus können wir für E-Commerce-Apps die REST-API von verwenden beliebtes WooCommerce Plugin.

WooCommerce hat auch ein NPM-Paket (WooCommerce API) für API-Aufrufe, aber leider benötigt dieses Paket sowohl den Consumer-Schlüssel als auch das Consumer-Geheimnis, um Anforderungen zu authentifizieren. Wir hätten ein Sicherheitsproblem, wenn wir das Verbrauchergeheimnis in einer Frontend-App verwenden würden.

Wenn Sie Schlüssel aus dem WooCommerce-Administratorbereich erstellen, können Sie keine Berechtigungen auf Routenebene angeben, z. B. den Ansichtszugriff für Produkte und den Schreibzugriff für Bestellungen.

Daher mussten wir in unserem WordPress-Plugin einen Proxy erstellen, der den Zugriff auf einen eingeschränkten Satz von API-Endpunkten ermöglicht. Als Basis haben wir den WooCommerce REST API PHP-Wrapper verwendet, wie Sie im folgenden Beispiel sehen können:

Zeigen Sie den Code an Kern.

Wir initialisieren zuerst den WooCommerce-Client mit dem Consumer-Schlüssel und dem Geheimnis. Die zweite und dritte Methode erstellen eine benutzerdefinierte Route mit dem Namen products und ordnen diese Route über die WooCommerce-API dem Endpunkt für Produkte / Kategorien zu.

Auf diese Weise können wir den Zugriff auf Lesekategorien und Produkte zulassen, aber nur den Erstellungsvorgang für eine Bestellung zulassen.

Erstellen einer neuen React-App in vier einfachen Schritten

Sobald wir die API eingerichtet haben, können wir mit der Arbeit an unserer React-Anwendung beginnen. Nach der Installation NodeJS und NPM Global können Sie das Paket create-react-app verwenden, um schnell eine React JS-App zu generieren, die standardmäßig PWA-Unterstützung bietet.

  1. Installieren NodeJS und NPM global
  2. Installieren create-react-app Boilerplate
    npm install create-react-app -g
  3. Generieren neue React-Anwendung
    create-react-app my-app
  4. Anwendung starten
    CD My-App & npm starten

Unten sehen Sie einen Screenshot der Anwendung, die von der Create-React-App generiert wird. Sie enthält alles, was wir benötigen, damit wir mit dem Codieren beginnen können, einschließlich Live-Reload:

Probe reagieren App

Beim Starten einer neuen App sind einige Dinge zu beachten:

1) App-Dateien organisieren
Es gibt mehrere gute Tutorials, wie man die App am besten strukturiert. Ich bevorzuge Ordner nach Funktionen, da dies eine bessere Skalierbarkeit ermöglicht. Sie finden eine wirklich gute Erklärung hier.
2) Linters und Codierungsstandards
Codierungsstandards können ärgerlich sein, wenn Sie nicht daran gewöhnt sind Überspringen Sie diesen Schritt nicht. Sie helfen dabei, nicht verwendete Abhängigkeiten zu bereinigen und sicherzustellen, dass die Daten auf Komponentenebene ordnungsgemäß validiert werden. Wenn Sie ein hübscheres Editor-Plugin installieren, das Ihren Code automatisch formatiert, wird die Verwendung von Codierungsstandards zum Kinderspiel. Was den Standard selbst betrifft, bevorzuge ich den beliebten erstellt von Airbnb.
3) Kleine Komponenten
Wenn Sie die Komponentendateien klein halten, können Sie sie einfacher testen und verwalten. Sie können Code in eine einzelne Komponente schreiben und ihn, sobald er größer wird, in kleinere Komponenten aufteilen. Für UI / UX-Komponenten gibt es mehrere Bibliotheken, die mit React kompatibel sind, z Material-Benutzeroberfläche, Semantische Benutzeroberfläche oder auch Bootstrap, um nur einige Beispiele zu nennen.

Diese Bibliotheken enthalten eine Reihe vorgefertigter Komponenten wie Raster, Menüs, Karten, Schaltflächen usw. Hier ist ein Beispiel für eine E-Commerce-Anwendungsschnittstelle, die mit grundlegenden Elementen der semantischen Benutzeroberfläche erstellt wurde:

Sie sehen eine Liste von Kategorien, eine Liste von Produkten und ein Seitenmenü. Lassen Sie uns in den Code eintauchen – Sie werden sehen, wie einfach es ist, mit React ein solches Beispiel zu erstellen.

Beispiel E-Commerce-App

Eintauchen in ReactJS

Unten finden Sie eine React-Komponente, die eine Reihe von Produktkategorien aus der API liest. Der Status der Komponente wird mit einer leeren Liste von Kategorien initialisiert. In der componentWillMount-Methode, die von React vor dem Rendern automatisch aufgerufen wird, fordern wir das Abrufen der Kategorien an und fügen sie nach Erhalt der Antwort dem Status hinzu:

Zeigen Sie den Code an Kern.

Wie Sie sehen, müssen wir die Rendermethode nicht aufrufen, wenn die Kategorien empfangen werden. React kümmert sich für uns darum und rendert die Komponente erneut. Die Rendermethode gibt nur eine andere benutzerdefinierte Komponente namens CategoriesList zurück, die die Kategoriedaten empfängt und folgendermaßen aussieht:

Zeigen Sie den Code an Kern.

Die obige Komponente durchläuft die Liste der Kategorien, die sie als Requisite erhält, und ruft eine andere benutzerdefinierte Komponente namens CategoryCard auf, um ein einzelnes Kategorieelement zu rendern.

Alle diese Komponenten kommunizieren, indem sie Requisiten zwischen ihnen weitergeben. Die Hauptkomponente “Kategorien” ruft die API auf und übergibt eine Liste von Kategorien an CategoriesList, die wiederum die Details einer Kategorie an die Kategoriekarten übergibt.

Verwalten des globalen App-Status mit Redux

Das Problem bei dem oben beschriebenen Ansatz besteht darin, dass manchmal Daten auf der obersten Anwendungsebene verwaltet werden müssen, z. B. eine Liste der Produkte, die dem Warenkorb hinzugefügt wurden. Die Anzahl der Produkte wird im Warenkorbsymbol in der Kopfzeile angezeigt. Diese werden jedoch auch als Liste auf der Checkout-Seite angezeigt.

Wenn wir alle diese Daten in die übergeordnete Anwendungskomponente einfügen, wird die Verwaltung in größeren Anwendungen sehr schwierig. Hier finden sich Bibliotheken wie ReduxJs Kommen Sie herein. Nur um zu verdeutlichen, kann Redux in Kombination mit jedem JavaScript-Framework verwendet werden, es ist nicht spezifisch für React.

Die Verwendung von Redux bedeutet auch nicht, dass wir auf Komponentenebene weder Status noch Requisiten verwenden können. Redux sollte nur zum Speichern von Daten verwendet werden, die auf Anwendungsebene sinnvoll sind.

Lassen Sie uns sehen, wie wir Produkte aus der API lesen und in einer Liste rendern können, ähnlich wie bei Kategorien, diesmal jedoch mit Redux. Zunächst müssen wir die Verbindung mit Redux herstellen, indem wir unsere Haupt-App-Komponente in einen globalen Store einbinden:

Zeigen Sie den Code an Kern.

In diesem Beispiel enthält der globale App Store eine Liste von Kategorien und eine Liste von Produkten, die mithilfe der Methode combinReducers von Redux zusammengeführt werden.

Anschließend definieren wir Redux-Aktionen. Hierbei handelt es sich um sehr einfache Funktionen, die Objekte zurückgeben, die eine Typeigenschaft enthalten müssen. Da JS asynchron ist, benötigen wir zwei Aktionen: eine zum Signalisieren, wenn eine Anforderung gesendet wird, und die andere zum Signalisieren, wenn eine Antwort empfangen wird. Die gesamte App weiß, wann diese Aktionen stattfinden.

Im Folgenden haben wir auch eine Funktion namens fetchProducts hinzugefügt. Wie Sie sehen können, ist diese Funktion:

  • Löst die Aktion “Anforderungsprodukte” aus,
  • Ruft die API zum Abrufen von Produkten auf,
  • Löst die Aktion “receiveProducts” aus, wenn ein Ergebnis empfangen wird.

Zeigen Sie den Code an Kern.

Um den App-Status zu ändern, fügen wir einen sogenannten Redux hinzu "Reduzierstück". Der Reduzierer ist nur eine Funktion, die bestimmte Aktionen abhört und einen Teil des globalen Status ändert, in diesem Fall die Liste der Produkte.

Dieser Reduzierer führt beim Empfang einer Aktion für Anforderungsprodukte nichts aus, sondern gibt immer den aktuellen Status zurück. Für die Aktion “Produkte empfangen” gibt der Reduzierer die Daten zurück, die an ihn übergeben wurden. In diesem Fall handelt es sich um eine Liste von Produkten.

Zeigen Sie den Code an Kern.

Zum Abschluss verwenden wir diese Aktionen und Reduzierungen in einer neuen Produktkomponente.

Zeigen Sie den Code an Kern.

Diese Komponente wird in die connect-Methode von Redux eingeschlossen und sendet nur fetchProducts in ihrer componentWillMount-Methode. Die Komponente enthält auch eine Produktliste. Wie Sie jedoch sehen können, empfängt die Produktlistenkomponente die Produktdaten nicht direkt. Dies liegt daran, dass die Produktlistenkomponente direkt mit dem globalen App-Status verknüpft ist und auch Redux verwendet.

Auf diese Weise kann es direkt aus dem App Store auf die Produktdaten zugreifen, die Produktliste durchlaufen und mithilfe einer ProductCard-Komponente ein einzelnes Produktelement rendern.

Zeigen Sie den Code an Kern.

Bisher haben wir einige Beispiele zum Anzeigen von Daten gesehen, aber was ist, wenn wir Benutzerinteraktion hinzufügen möchten, z. B. das Hinzufügen eines Produkts zum Warenkorb?

In diesem Fall, wenn der Benutzer auf die Schaltfläche klickt "In den Warenkorb legen" Klicken Sie auf die Schaltfläche, um eine Aktion auszulösen, mit der der globale App-Status geändert wird. Die Kopfzeile, in der die Anzahl der Warenkorbprodukte angezeigt wird, wird mit Redux verbunden. Es zählt die Anzahl der im Warenkorb der Anwendung gespeicherten Produkte und aktualisiert sich entsprechend.

Beispiel zum Warenkorb hinzufügen

Verknüpfung der App mit WordPress

Dies sind alles grundlegende Beispiele für den Einstieg. Sie fragen sich wahrscheinlich, wie genau wir diese App mit WordPress verknüpfen können.

Nun, wir können die App auf einer Subdomain hosten und sie mit der API verbinden lassen, oder wir können sie als WordPress-Theme verwenden – das heißt, wir erstellen ein sehr einfaches Theme mit einer index.php-Datei, die nur eine JavaScript / CSS-Datei lädt. Das Boilerplate zum Erstellen und Reagieren von Apps enthält Befehle zum Erstellen des Builds der Anwendung, sodass wir die Produktionsdateien sofort abrufen können.

Zeigen Sie den Code an Kern.

Wo man Servicemitarbeiter einsetzt

Für den Offline-Modus können wir einen Service Worker hinzufügen, der die App-Shell auch dann anzeigt, wenn Benutzer offline sind. Der Service Worker ist nur eine JavaScript-Datei, die sich im Browser registriert.

Zeigen Sie den Code an Kern.

Es gibt verschiedene Strategien, die Sie für den Offline-Modus verwenden können, z. B. “Netzwerk zuerst” oder “Cache zuerst”. Weitere Informationen hierzu finden Sie in den Google-Strategien Offline-Kochbuch.

Das Zwischenspeichern der Anwendungsshell hat auch dann Vorteile, wenn eine Netzwerkverbindung besteht, da die App viel schneller geladen wird.

Wenn Sie noch weiter gehen und die von der API stammenden Daten zwischenspeichern möchten, können Sie NPM-Pakete wie redux-persist verwenden und Ihre App ändern, um Daten aus dem lokalen Speicher des Browsers zu speichern / abzurufen.

Für Web-Push-Benachrichtigungen empfehlen wir einen Blick auf die Ein signalfreies WordPress-Plugin. Dieses Plugin funktioniert auch mit ansprechenden Themen, daher sollten Sie es auf jeden Fall sofort ausprobieren.

Was kommt als nächstes?

Du kannst finde die Demo für die oben genannte WooCommerce PWA hier.

Wir arbeiten bereits an der Beta-Version und hier ist nur ein Teil unserer Roadmap:

  • Fügen Sie Funktionen für den Offline-Modus hinzu
  • Push-Benachrichtigungen hinzufügen
  • Schließen Sie den Bestellvorgang ab

Wenn Sie einen Beitrag leisten oder ihn an Ihre eigenen Bedürfnisse anpassen möchten, finden Sie die Alpha-Version der progressiven E-Commerce-Webanwendung auf GitHub.

PWA-Demo

Was halten Sie von Progressive Web Apps und welche Rolle können sie in der mobilen WordPress-Landschaft spielen? Denken Sie darüber nach, diesen Weg bei Ihrem nächsten Projekt zu beschreiten??

Vergessen Sie nicht, an unserem Crashkurs teilzunehmen, um Ihre WordPress-Site zu beschleunigen. Mit einigen einfachen Korrekturen können Sie Ihre Ladezeit sogar um 50-80% reduzieren:

Layout und Präsentation von Karol K..

Über den Autor: Alexandra Anghel ist Mitbegründerin und CTO bei Appticles.com – eine Plattform zum Erstellen progressiver Web-Apps. Als Erweiterung der Plattform verfügt Appticles über ein WordPress-Plugin (WordPress Mobile Pack), die 1 Million Downloads überschritten hat. Alexandra ist eine Full-Stack-Entwicklerin. Sie nahm an zwei Business Accelerators teil – Startupbootcamp (Kopenhagen / Dänemark) und Prosper Women Accelerator (Saint Louis / USA). Anfang 2017 ist sie als Mitbegründerin zu Codette gekommen.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map