Übersicht über PWA Kit
In dieser Übersicht erhalten Sie eine kurze Einführung in die wichtigsten Teile der PWA Kit-Architektur sowie hilfreichen Kontext für den Rest der Produktdokumentation.
Die Retail React App ist eine serverseitig gerenderte React App, die für E-Commerce optimiert ist. Sie ist der Ausgangspunkt für den Aufbau Ihrer Storefront und enthält bereits Schlüsselfunktionalitäten wie:
- Codebündelung, Codeaufteilung und Transpilierung
- Komponentenbibliothek mit Theming
- JavaScript-basiertes Style-System (CSS in JS)
- Skripts für die Automatisierung von routinemäßigen Entwicklungsaufgaben
- Service Worker und Manifest für Progressive Web App (PWA)-Funktionalitäten
- Testsuiten
Die Storefront der Retail React App enthält Standard-E-Commerce-Seiten und -Funktionalitäten wie die Produktlistenseite (PLP), Produktdetailseite (PDP), Warenkorb und Checkout. Jeder Aspekt der Storefront ist so designt, dass Sie ihn mit Ihrem eigenen Code verbessern und erweitern können.
Machen Sie sich in der Demo-Version, die Sie auf pwa-kit.mobify-storefront.com finden, mit der Retail React App vertraut oder lesen Sie die vollständigen Anleitung zur Architektur → Die Retail React App.
Für das bestmögliche Käufererlebnis setzen PWA Kit-Storefronts auf ein System für Rendering und Routing, dass in zwei verschiedenen Kontexten den gleichen Quellcode ausführt: auf der Serverseite und auf der Clientseite. Das serverseitige Rendering optimiert die anfängliche Seitenladegeschwindigkeit, während das clientseitige Rendering eine responsive Benutzeroberfläche und fließende Seitenübergänge ermöglicht.
Das Rendering- und Routing-System wird von der Retail React App mit ihrer Express-Serverkonfiguration und einer Hierarchie von React-Komponenten eingerichtet. Dieses System bietet Ihnen folgende Funktionalitäten:
- Hinzufügen neuer Seitenkomponenten und Modifizierung bestehender Seitenkomponenten
- Datenbereitstellung für Seitenkomponenten über API-Anfragen oder Benutzerinteraktionen
- Definition von Mustern für das Routing von URL-Anfragen an Seitenkomponenten
- Anpassung der Ausgabe aller Seiten
Näheres finden Sie in den vollständigen Anleitungen zur Architektur → Rendering und Routing.
PWA Kit-Storefronts nutzen Einstein Activities, um Benutzererfahrungen zu verbessern und Berichtsdaten in Reports & Dashboards bereitzustellen.
Um auf Einstein Activities basierende Berichte in "Reports & Dashboards" zu erhalten, müssen Sie sie im Business Manager aktivieren.
Das PWA Kit ist ein auf GitHub gehostetes Open-Source-Projekt.
Das GitHub-Repository für PWA Kit ist als Monorepo mit mehreren Paketen eingerichtet, darunter Bibliotheken, Projektvorlagen, SDKs und andere Tools.
Um die Navigation im Repository zu erleichtern, finden Sie hier einen Überblick über die einzelnen Pakete, die es enthält:
| Paket | Beschreibung |
|---|---|
| pwa-kit-create-app | Erstellt mithilfe von Projekt-Vorlagen PWA Kit-Projekte. |
| pwa-kit-dev | Befehlszeilen-Tools für die Entwicklung, Erstellung und Bereitstellung von PWA Kit-Projekten. |
| pwa-kit-runtime | Ermöglicht die Ausführung von Node.js-Anwendungen in Managed Runtime. |
| pwa-kit-react-sdk | Dienstprogramme mit Unterstützung für die Rendering-Pipeline. |
| commerce-sdk-react | React-Hooks für die Interaktion mit der Salesforce B2C Commerce API. |
| template-retail-react-app | Standardvorlage für den Start von Projekten. |
| template-typescript-minimal | Konfigurationsfreie Projektvorlage für TypeScript-Anwendungen. |
| template-express-minimal | Standard-Projektvorlage für Anwendungen, die auf Managed Runtime ausgeführt werden. |
Nach der allgemeinen Verfügbarkeit aller Hauptversionen der PWA Kit SDKs (1.0, 2.0 usw.) werden über einen Zeitraum von jeweils 24 Monaten Sicherheitspatches bereitgestellt.
PWA Kit veröffentlicht jede Nacht Builds, um kommenden Funktionalitäten eine größere Sichtbarkeit zu verleihen und Implementierern Gelegenheit zu geben, Code-Integrationen zu testen.
Die nächtlichen Builds von PWA Kit-Paketen werden mit dem Verteilungs-Tag nightly-next in npm veröffentlicht. Das letzte nightly-next-Tag können Sie in npm anzeigen.
Diese Pakete werden durch Ausführung des folgenden Befehls installiert:
npm install <package-name>@nightly-next
Beispiel: Um das neueste nächtliche Build für @salesforce/commerce-sdk-react in Ihrem PWA Kit-Projekt zu installieren, führen Sie Folgendes aus:
npm install @salesforce/commerce-sdk-react@nightly-next
Verwenden Sie Vorschauversionen nicht in Production-Umgebungen.
Diese Builds werden weder getestet noch unterstützt. Einige der in den nächtlichen Builds enthaltenen Funktionalitäten werden möglicherweise nicht in den endgültigen PWA Kit-Releases verwendet. Diese nicht freigegebenen Builds können vielleicht nicht einmal geladen werden, enthalten möglicherweise nicht dokumentierte Funktionalitäten, bekannte Fehler und eine unspezifische Anzahl weiterer Probleme. Sie sind für die Nutzung durch Entwickler und andere gedacht, die früher auf geplante Funktionalitäten des PWA-Kits zugreifen möchten.