Présentation de PWA Kit
Voici une courte présentation des principales parties de l'architecture de PWA Kit ainsi qu'une mise en contexte utile pour le reste de la documentation du produit.
L'application Retail React App est une application React rendue côté serveur, optimisée pour l'e-commerce. Elle vous donne un point de départ pour construire votre boutique et comprend déjà des fonctionnalités essentielles, telles que :
- Le paquetage, le fractionnement et la transpilation de code
- Une bibliothèque de composants avec des thèmes
- Un système de style basé sur JavaScript (CSS in JS)
- Des scripts pour l'automatisation des tâches de développement de routine
- Un service worker et un manifeste pour les fonctionnalités de Progressive Web App (PWA)
- Suites de tests
La boutique de Retail React App comprend des pages et des fonctionnalités d'e-commerce standard, telles que la page de liste des produits (PLP), la page de détails des produits (PDP), le panier et le checkout. Chaque aspect de la boutique est conçu pour être amélioré et étendu avec votre propre code.
Pour en savoir plus, consultez une démo de Retail React App sur pwa-kit.mobify-storefront.com ou lisez le guide d’architecture complet → Retail React App.
Pour une expérience d'achat optimale, les boutiques PWA Kit utilisent un système de rendu et de routage qui exécute le même code source dans deux contextes différents : côté serveur et côté client. Le rendu côté serveur optimise la vitesse de chargement initiale des pages, tandis que le rendu côté client permet d'obtenir une interface utilisateur réactive et des transitions de page fluides.
Le système de rendu et de routage est établi par l'application React Retail App avec sa configuration de serveur Express et une hiérarchie de composants React. Dans ce système, vous pouvez :
- Ajouter de nouveaux composants de page et modifier des composants de page existants
- Fournir des données aux composants de page à partir de requests API ou d'interactions avec l'utilisateur
- Définir des schémas pour le routage des requests URL vers les composants de la page
- Personnaliser la sortie de toutes les pages
Pour en savoir plus, lisez les guides d'architecture complets → Rendu et Routage.
Les boutiques PWA Kit utilisent Einstein Activities pour améliorer l’expérience utilisateur et fournir des données de reporting dans Reports & Dashboards.
Pour activer les rapports basés sur Einstein Activities dans Reports & Dashboards, vous devez les activer dans Business Manager.
Le PWA Kit est un projet open source hébergé sur GitHub.
Le référentiel GitHub pour PWA Kit est configuré comme un référentiel unique (monorepo) avec plusieurs paquets, notamment des bibliothèques, des modèles de projet, des SDK et d’autres outils.
Pour vous aider à naviguer dans le référentiel, voici un aperçu de chacun des paquets qu’il contient :
| Paquet | Description |
|---|---|
| pwa-kit-create-app | Crée des projets PWA Kit à partir de modèles de projet. |
| pwa-kit-dev | Outils de ligne de commande pour développer, créer et déployer des projets PWA Kit. |
| pwa-kit-runtime | Permet aux applications Node.js de s’exécuter sur Managed Runtime. |
| pwa-kit-react-sdk | Utilitaires prenant en charge le pipeline de rendu. |
| commerce-sdk-react | Hooks React pour interagir avec l’API Salesforce B2C Commerce |
| template-retail-react-app | Modèle par défaut pour démarrer des projets. |
| template-typescript-minimal | Modèle de projet sans configuration pour les applications TypeScript. |
| template-express-minimal | Modèle de projet minimaliste pour les apps fonctionnant sur Managed Runtime. |
Les correctifs de sécurité sont fournis pendant 24 mois après la sortie officielle de chaque version majeure des SDK de PWA Kit (1.0, 2.0, etc.).
PWA Kit publie des builds toutes les nuits pour vous donner une meilleure visibilité sur les fonctionnalités à venir et offrir une chance aux implémenteurs de tester les intégrations de code.
Les versions nocturnes des paquets PWA Kit sont publiées sur npm à l’aide de la balise de distribution nightly-next. La dernière balise nightly-next peut être visualisée sur npm.
Ces paquets peuvent être installés en exécutant :
npm install <package-name>@nightly-next
À titre d’exemple, pour installer le dernier build nocturne pour @salesforce/commerce-sdk-react sur votre projet PWA Kit, exécutez :
npm install @salesforce/commerce-sdk-react@nightly-next
N’utilisez pas de versions préliminaires en production.
Ces builds ne sont pas testés et ne sont pas pris en charge. Certaines fonctionnalités incluses dans les builds nocturnes peuvent ne pas être incluses dans les versions finales de PWA Kit. Ces builds non officiels peuvent même ne pas se charger. Ils peuvent présenter des fonctionnalités non documentées, des défauts connus et un certain nombre d’autres problèmes. Ils sont destinés aux développeurs et autres personnes souhaitant obtenir un accès anticipé aux futures fonctionnalités de PWA Kit.