Was sind progressive Web-Apps oder PWAs in Magento 2?

• Was bedeutet es, dass Magento eine progressive Webanwendungsplattform wird?
• Wie wird die Codestruktur von PWAs in Magento aussehen?
• Was ist mit REST-APIs und PWAs zu tun?

Was sind progressive Web-Apps?

• Sieht aus und verhält sich wie eine mobile App.
• Nutzen Sie den Vorteil von native mobilen Gerätefunktionen, ohne dass der Endbenutzer eine App Store zu besuchen, einen Kauf und Download es vor Ort .

Warum PWA?

• Schnell
• Sicher (vorletztes Thema der Antwort)
• Reaktionsschnell
• Browserübergreifend kompatibel
• Offline- Modus (Überprüfen Sie das letzte Thema in der Antwort)
• Mobile "Installieren"
• Gemeinsam nutzbarer Inhalt

Diese Antwort behandelt auch - Installation von Magento 2.3 mit PWA

Nehmen wir ein Beispiel für Flipkart

Flipkart , Indiens größte E-Commerce-Website, hat beschlossen, ihre Webpräsenz und native App in einer progressiven Webanwendung zu kombinieren, was zu einer Steigerung der Conversions um 70% geführt hat

Flipkart

Ansatz

1. Entwickelte Flipkart Lite, eine progressive Web-App
2. Servicemitarbeiter für schnellere Ladezeiten hinzugefügt
3. Reibungsloses Navigieren und Scrollen mit 60 Bildern / Sekunde
4. Es wurde eine Aufforderung zum Hinzufügen zum Startbildschirm erstellt, um Benutzer dazu zu ermutigen, die mobile Webseite zu ihren Startbildschirmen hinzuzufügen

   ---

Ergebnisse

Neue progressive Web-App hilft Flipkart, die Conversions um 70% zu steigern

Flipkart funktioniert auch im Offline-Modus

• Service-Worker können per Skript jede Netzwerkanforderung abfangen und eine Antwort aus dem Cache bereitstellen, selbst wenn der Benutzer offline ist.
• Service Workers-Wrapperbibliothek , die die Verwendung einfacher Muster wie NetworkFirst, CacheFirstoder ermöglicht NetworkOnly. SW-ToolboxBietet einen LRU Cache, der in der Flipkart-App zum Speichern früherer Suchergebnisse auf der Suchseite und den zuletzt besuchten Produktseiten verwendet wird.
• Die Toolbox verfügt auch über einen Mechanismus zum Ungültigmachen des TTL-based Cache , mit dem veraltete Inhalte gelöscht werden. Servicemitarbeiter stellen einfache skriptfähige Grundelemente bereit, die dies ermöglichen.

ABER, ABER, ABER...

Was ist das Magento PWA Studio?

• • Das Magento PWA Studio- Projekt besteht aus einer Reihe von Entwicklertools, die die Entwicklung, Bereitstellung und Wartung einer PWA-Storefront auf Magento 2 ermöglichen

Das Magento PWA Studio-Projekt bietet die folgenden Tools:

---

pwa-Modul

• Es verfügt über Module wie Hilfsprogramme und serverseitige Funktionen und dient als Grundlage für alle mit Magento PWA Studio erstellten Themen .

pwa-buildpack -

• Buildpack ist eine Reihe von WebpackPlugins und Tools, die für die Entwicklung von Magento PWA-Themen verwendet werden.

• Es wird auch zum Einrichten und Konfigurieren der lokalen Entwicklungsumgebung für die Magento 2-Plattform verwendet.

Es enthält die folgenden Tools:

• PWADevServer
• Magento Resolver
• Magento Root Components Plugin
• magento-layout-loader
• Service Worker Plugin

Peregrine - Peregrine ist eine Reihe vonReact componentsFunktionenrouting, diespeziell für Magento entwickelt wurden, z. B.root-componentsLayout-Handler, Produktlisten, Preisanzeige usw.

Venia Theme -venia-conceptist ein Demo-Theme, das von Magento mit dem Magento PWA Studio erstellt wurde. Es zeigt alle derzeit verfügbaren Funktionen, Arbeitsabläufe und Seiten

PWA Studio ist NICHT

• Eine neue Version von Magento

• Ein Ersatz für alle Front-End

• Eine Desktop-Anwendung

Tools und Bibliotheken, die in PWA Studios verwendet werden

Webpack

• Die Hauptfunktion von Webpack besteht darin, ein oder mehrere Bundles aus den Abhängigkeiten in den Modulen Ihres Projekts zu erstellen.

App Shell

• Die Gesamtgröße ist kleiner
• Anfangslast fordert drei Dateien: login.html, shell-1234.js,3456.js
• Das anfängliche Laden muss Folgendes laden: Shell + Router + content
• Die Shell ist früher sichtbar als beim Page Shell-Ansatz.

Page Shell

• Die Gesamtgröße ist größer (dh der Dashboard-Inhalt befindet sich in dashboard-1234.js und 4567.js)

• Es dauert länger, bis die App offline ist.

• Anfangslast fordert nur zwei Dateien: login.html,login-2345.js

• Das anfängliche Laden muss Folgendes laden: Shell + content

• Das shell + contentist früher sichtbar als mit App Shell Ansatz.

Ein hybrider Ansatz kann verwendet werden, bei dem Shell und Inhalt in zwei Anforderungen getrennt sind (siehe Admin-Seite als Beispiel). Dies ist sinnvoll, wenn der Inhalt viel größer ist als die Shell und die Shell früher sichtbar sein soll.

Reaktionen

• Eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen.

Redux

• Eine JavaScript-Bibliothek, die zum Verwalten des Status in einer Webanwendung verwendet wird.

GraphQL

• Eine Datenabfragesprache auf der Clientseite und eine Serviceschicht auf der Serverseite.

GraphQL in Magento

Authentifizierung und Schema

Reduzierung der Anzahl von Front-End-Abfragen

Phase rendern

Kompatibilität mit dem Desktop-Browser

• Nicht unterstützt : IE, Safari

Kompatibilität mit mobilen Browsern

Nicht unterstützt : Android Webview, IE, Safari

PWAs sind sicherer

• Als Webentwickler wissen Sie vielleicht, wie sehr Google Websites unterstützt, httpsanstatt HTTP. Cyber-Bedrohungen stehen für Web- und App-Entwickler immer an erster Stelle.
• In der Vergangenheit HTTPwar nicht sicher genug, um Benutzerinformationen zu schützen.
• Webseiten werden jetzt programmiert HTTPsund es ist einfach, eine Progressive Web App in einer sicheren Umgebung zu starten.
• Bei der Eingabe persönlicher Daten in PWA, wie Kreditkarteninformationen oder Kontaktdaten, fühlen sie sich möglicherweise sicher und können beruhigt sein.

PWA - Offline-Modus

Die Offline-Wikipedia-Anwendung ist ein gutes Beispiel für eine PWA , die ein App-Shell-Modell verwendet .

• Es wird sofort bei wiederholten Besuchen geladen, ruft jedoch Inhalte mithilfe von JS dynamisch ab.
• Dieser Inhalt wird dann für zukünftige Besuche offline zwischengespeichert.

Progressive Web App ist ohne Zweifel die Zukunft der Webentwicklung. In Zukunft werden E-Commerce-Websites, Restaurants und Medienquellen von der nativen App zur progressiven Web-App übergehen. In der Anfangsphase würden jedoch viele Entwickler aktiv nach Möglichkeiten suchen, um die von PWAs gebotenen Möglichkeiten optimal zu nutzen.

Beginnen wir mit der Installation von Magento 2.3 mit PWA

1. Geben Sie den folgenden Befehl in DIR / var / www / html / ein (m203 ist mein Magento 2.3-Verzeichnis):

composer create-project --repository=https://repo.magento.com/ magento/project-community-edition=2.3.* --stability=beta m203

2. Installieren Sie Magento über die Befehlszeile:

bin/magento setup:install --base-url=http://localhost/m230 --db-host=localhost --db-name=m230 --db-user=root --db-password=root --backend-frontname=admin --admin-firstname=admin --admin-lastname=admin [email protected] --admin-user=admin --admin-paassword=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1

3. Erstellen Sie ein Basis-PWA-Thema, das das übergeordnete Thema für das PWA-Venia-Thema ist.

• Im Moment können Sie das Basis-pwa-Theme-Repository klonen. https://github.com/magento-research/theme-frontend-pwa

4. Erstellen Sie ein Verzeichnis app/design/frontend/Magento/pwaund kopieren Sie hier alle Dateien und Verzeichnisse des Basisthemas.

• Lässt überprüfen, ob das Basisthema verfügbar ist oder nicht.

• Run: php bin/magento setup:upgrade

• Und navigieren Sie zu Ihrem Magento Admin-> Content-> Themes

5. Laden Sie das PWA Studio-Projekt herunter.

6. Navigieren Sie zum Stammverzeichnis Ihrer Magento-Installation und erstellen Sie einen Pwa-Symlink-Ordner, der mit dem Modulverzeichnis des Projekts (pwa-studio / packages / pwa-module) verknüpft ist.

• Von diesem Verzeichnis aus habe ich meinen Befehl ausgeführt - / var / www / html / m230

• Dies ist ein Verzeichnis, in dem meine heruntergeladene pwa-Quelle / var / www / html / PWA / ist.

ln -s /var/www/html/PWA/pwa-studio-master/packages/pwa-module app/code/Magento/Pwa

7. Verknüpfen Sie auch das Themenverzeichnis. Navigieren Sie zum Stammverzeichnis Ihrer Magento-Installation und erstellen Sie einen Pwa-Symlink-Ordner, der mit dem Modulverzeichnis des Projekts verknüpft ist (pwa-studio / packages / venia-concept).

ln -s /var/www/html/PWA/pwa-studio-master/packages/venia-concept app/design/frontend/Magento/venia

8. Navigieren Sie nun zum venia-concept-Verzeichnis Ihres pwa-studio-Projekts, kopieren Sie es .env.distin eine neue .envDatei und aktualisieren Sie die Variablen mit der URL zu Ihrem Magento-Entwicklungsspeicher.

cd /var/www/html/PWA/pwa-studio-master/packages/venia-concept

cp .env.dist .env

9. Installiere venia theme und Pwa Module:

run: php bin/magento setup:upgrade

Wir können sehen, dass das venia-Theme erfolgreich installiert wurde.

10. Konfigurieren Sie venia theme von admin->Content->Configuration

11. Navigieren Sie zu path ( /var/www/html/PWA/pwa-studio-master) run:

npm install

oder

npm install webpack-dev-server -g

12. Und schließlich navigieren Sie zu /var/www/html/PWA/pwa-studio-master/packages/venia-concept

npm start

Herzliche Glückwünsche! Sie haben Ihre Entwicklungsumgebung für das Venia-Themenprojekt eingerichtet.

PWA - Progressive Web Application ist im Allgemeinen eine Webanwendung, bei der der Benutzer das Rich Web erlebt. im weg von:

• Zuverlässig - sofort laden und auch im Offline-Modus verfügbar.
• Schnell - auf eine Weise der Interaktion, bei der Benutzer reibungslos damit interagieren können, und auch ohne Scrolling- oder Animations-Junks.
• Engaging - Wie oben unter beiden Punkten erwähnt, ist eine zuverlässige und schnelle Anwendung offensichtlich benutzerfreundlicher und fühlt sich auch wie eine natürliche App an.

"Was bedeutet es, dass Magento eine progressive Webanwendungsplattform wird?"

Während sich magento auf die Veröffentlichung der Version 2.3 vorbereitet, enthält es diese "PWA" -Funktion, um das Frontend auf eine Art und Weise der Benutzerinteraktion effizienter zu gestalten.

Was ist mit REST-APIs und PWAs zu tun?

Da Magento "PWA" verwendet, fügt es auch "GraphQL API" hinzu, um eine Front-End-API-Alternative für die Entwicklung von "REST / SOAP" als "GraphQL" -API bereitzustellen.

Um mehr über die "PWA" und die neue Funktion von "magento2.3 open-commerce" zu erfahren, können Sie die offizielle Seite dieses Magento besuchen .

Progressiv bedeutet, dass die Anwendung zusammen mit allen relevanten Daten und Assets geladen wird, wenn ein Benutzer auf Ihrer Website navigiert. Dies führt zu einer Endbenutzererfahrung mit höherer Geschwindigkeit, Benutzerfreundlichkeit, Offline-Betrieb und Geräteintegration.

Web bedeutet, dass es in den Sprachen des Webs geschrieben ist (HTML, CSS, JavaScript). Auf diese Weise können Sie eine Site erstellen, die mehr App-ähnliche Funktionen bietet, ohne eine native App zu erstellen, die auf eine Plattform wie iOS oder Android beschränkt ist.

Anwendung bedeutet, dass Code auf dem Gerät oder Computer des Käufers installiert und ausgeführt wird. Dies führt zu mehr Geschwindigkeit und Leistungsfähigkeit als die einstigen einseitigen JavaScript-Apps.

PWAs sind im Wesentlichen eine Mischung aus regulären Webseiten und der mobilen App, wodurch mobile App-ähnliche Erlebnisse für das Web ermöglicht werden.

Magento wird zu einer progressiven Webanwendungsplattform. Das heißt, Magento erstellt eine Reihe von Tools zum Erstellen von Online-Shops als progressive Webanwendungen. Diese Tools helfen Entwicklern dabei, PWA-Techniken zu erlernen, blitzschnelle PWA-Frontends zu erstellen und PWA-Komponenten und -Erweiterungen für die Wiederverwendung oder den Verkauf auf dem Magento Marketplace zu erstellen. Insgesamt nennt Magento diese Tool-Suite Magento PWA Studio.

Sie können die Codestruktur unter https://github.com/magento-research/pwa-studio überprüfen

Magento PWA verwendet GraphQL als Alternative zur REST-API für PWA.

Weitere Informationen zu Magento PWA erhalten Sie über die folgenden Links:

• https://magento-research.github.io/pwa-studio/
• https://community.magento.com/t5/Magento-DevBlog/Introducing-Magento-PWA-Studio/ba-p/74636
• https://brandastic.com/ideas/magento-progressive-web-apps/
• https://www.monsoonconsulting.com/blog/progressive-web-apps-magento

• Progressive Web Apps ist der Mittelweg zwischen installierbaren mobilen Apps und Websites. Wir gehen davon aus, dass bis 2019 mehr Datenverkehr von mobilen Geräten als von Desktops im Internet zu verzeichnen ist. PWAs verbessern das Erscheinungsbild von Websites, um die Conversion zu steigern.

PWAs bieten schnelle, reibungslose, "App-ähnliche" Erlebnisse, die mehr Verkehr, höhere Conversions und schnellere Ladezeiten für Magento-Händler ermöglichen

Im Allgemeinen ändert Magento das Erscheinungsbild, um die Conversions zu steigern. Lesen Sie hier mehr darüber .

• PWAs werden in der Regel mit JavaScript, CSS und HTML erstellt und weisen eine Leistung und Benutzerfreundlichkeit auf, die mit nativen Apps nahezu identisch ist. PWAs haben Besonderheiten, einschließlich:

  1. Sie funktionieren mit den meisten (wenn nicht allen) Browsern und Geräten (Mobil und Desktop) mit einer progressiven Codebasis (oft komponentenbasiert wie in React Js).
  2. Passen Sie alle Bildschirme und Formfaktoren mithilfe eines reaktionsschnellen Designs an. Nutzen Sie Servicemitarbeiter, um die Offline-Konnektivität zu aktivieren (HTTPS erforderlich).
  3. Bieten Sie eine App-ähnliche Erfahrung, bei der Wiedereingliederungs-Tools wie Push-Benachrichtigungen zum Einsatz kommen
  4. Nutzen Sie ein Web-App-Manifest, um die verwendeten Ressourcen zu beschreiben

Sie können hier mehr lesen.

• SOAP (Simple Object Access Protocol) und REST (Representational State Transfer) sind die gängigsten Kommunikationsprotokolle für Webdienste. REST wird zum größten Teil SOAP vorgezogen ( hier erklärt ). Es ist daher logisch zu sehen, dass REST-APIs Hand in Hand mit einer neuen Technologie wie PWAs verwendet werden.

Um nur einen Teil Ihrer Frage zu beantworten, aber mehr Magento 2 spezifisch.

PWA wird dank der zukünftigen Magento 2.3-Version einfacher zu erstellen sein.

https://www.degdigital.com/insights/magento-2-3/

Zitiert aus diesem Artikel:

PWA

Eine Progressive Web App ist eine Anwendung, die die Vorteile moderner Technologiefunktionen nutzt, die sich auf Geräten, auf denen diese Funktionen nicht verfügbar sind, „progressiv“ reduzieren lassen. Es ermöglicht auch das Zwischenspeichern von Daten, sodass die Website (teilweise oder vollständig) im Offlinemodus verwendet werden kann, wenn der Internetdienst nicht verfügbar oder nicht vorhanden ist. Dies wird im Allgemeinen erreicht, indem das Front-End der Website mit einem modernen JavaScript-Framework / Stack geschrieben wird, das sich deutlich von der Back-End-Anwendung unterscheidet. Diese JavaScript-Anwendung kann neue (ish) Browserfunktionen verwenden, um die oben genannte Aufgabe zu erfüllen.

Magento erkennt die vielfältigen Vorteile an und kündigte Ende 2017 seine Bemühungen an, das so genannte PWA Studio aufzubauen. PWA Studio enthält Tools zum Entwickeln und Bereitstellen einer PWA für das Front-End von Magento. Zusammen mit PWA Studio wird eine leichtgewichtige (nicht funktionsreiche) Demo-Site erscheinen. Die unmittelbaren Vorteile sind eine deutliche Steigerung der Front-End-Leistung und eine nahezu 10-fache Beschleunigung der Integration neuer Magento-Front-End-Entwickler.

• Verwandte Inhalte: PWAs sind da und verändern alles

GraphQL

GraphQL ist eine Abfragesprache für die Verwendung von APIs. Mit dem Aufstieg der PWA müssen kleinere Datenmengen abgerufen und weniger API-Anforderungen gestellt werden. Die Abfragesprache von GraphQL ermöglicht es dem Anforderer, eine begrenzte Teilmenge von Attributen anzufordern, die über eine Entität zurückgegeben werden sollen (deutlich kleinere Antworten), und ermöglicht es Ihnen, Anforderungen zu verketten (geringere Anzahl von Anforderungen).

Magento unterstützt derzeit REST- und SOAP-API-Anforderungen, die Serviceverträge verwenden. Zur Unterstützung von GraphQL schreibt Magento jedoch eine völlig neue Ebene, die direkt mit der Abfrage-API verbunden ist. Die GraphQL-Implementierung ist die Grundlage dafür, wie ein PWA-Frontend die benötigten Daten abruft.

Progressive Web Application verwendet Webbrowser-Funktionen und bietet den Benutzern eine mobile App-ähnliche Erfahrung.

Es entwickelt sich aus einer Browser-Registerkarte und macht Seiten mit einer reibungslosen Benutzererfahrung immersiver. Es ist eine Web-Technologie zur Erstellung einer Website, die sich wie eine Anwendung anfühlt.

Ein Benutzer kann Progressive Web Application wie eine native Anwendung unabhängig von der Auswahl des Browsers starten.

Für Demotests können Sie auf diesen Link zugreifen : Klicken Sie hier

Es handelt sich um ein Google-Produkt, das während des I / O 2017 I / O 2017 eingeführt wurde: https://www.youtube.com/watch?time_continue=14&v=cmGr0RszHc8

Es ist eine Website, die auf HTML basiert.

Es speichert den Cache in einem Gerät, sodass es auch offline verwendet werden kann.

Beim ersten Mal ist es jedoch langsam, was beim zweiten Besuch der Fall sein wird.

Es wird aktualisiert, wenn das Gerät das Internet erhält. Sie müssen also keine neuen Funktionen wie APPs aktualisieren.

Es löst alle E-Mails an den Server aus, wenn das Gerät das Internet erhält, wenn jemand etwas offline veröffentlicht.

Irgendwann muss keine iPhone / Android App mehr gebaut werden.

Einschränkung Es werden nur HTML-Dateien unterstützt. Das Gerät sollte also HTML unterstützen.

There is no store to search PWA application.

Login with FB or else will not be worked.

Not supported in IE.

Setup PWA (Linux Betriebssystem)

Schritt 1: Installieren Sie magento 2.3.1

Schritt 2: Knoten installieren / aktualisieren

Verwenden Sie das n-Modul von npm, um den Knoten zu aktualisieren

sudo npm install n -g

Für die neueste stabile Version:

sudo n stable

Für die neueste Version:

sudo n latest

Schritt 3: Garn installieren / aktualisieren:

sudo npm install --global yarn

sudo npm upgrade --global yarn 

Schritt 4: Installieren Sie node-gyp - das native Addon-Build-Tool von Node.j.

sudo npm install -g node-gyp

Schritt 5: Klonen Sie das PWA Studio-Repository

Gehen Sie zum HTML-Stammverzeichnis und führen Sie Folgendes aus:

git clone https://github.com/magento-research/pwa-studio.git

Nachdem Sie dies ausgeführt haben, erhalten Sie den Ordner pwa-studio

Schritt 6: Installieren Sie die PWA Studio-Abhängigkeiten

sudo yarn install

Schritt 7: Geben Sie den Magento-Backend-Server an

Under the packages/venia-concept directory, copy .env.dist into a new .env file:

Beispielbefehl:

sudo cp packages/venia-concept/.env.dist packages/venia-concept/.env

ändere die .env Datei (dies wird deine Magento URL sein, nicht die Admin URL):

MAGENTO_BACKEND_URL="https://release-dev-231-npzdaky-zddsyhrdimyra.us-4.magentosite.cloud/"

Schritt 8: Erstellen Sie nun einen Build

sudo yarn run build

Schritt 9: Führen Sie den Server aus

sudo yarn run watch:venia

Startet nur die Venia-Storefront-Entwicklungsumgebung.

sudo yarn run watch:all

Führt die gesamte PWA Studio-Entwicklererfahrung aus, einschließlich Venia-Hot-Reload und gleichzeitiger Buildpack- / Peregrine-Neuerstellungen.

sudo yarn run build && yarn run stage:venia

Erzeugt Build-Artefakte und führt die Staging-Umgebung aus, die komprimiertere Assets verwendet und die Produktion genauer widerspiegelt.

Sobald Sie einen der oben genannten Befehle ausführen, erhalten Sie die von PWA erstellte virtuelle URL.

HINWEIS: Wenn Sie ein guter Benutzer sind, verwenden Sie sudo.

Folgen Sie den offiziellen Magento 2-Entwicklerdokumenten:

https://devdocs.magento.com/guides/v2.3/pwa/