Visión general del PWA Kit
Esta visión general sirve para introducir brevemente las partes principales de la arquitectura del PWA Kit y proporciona un contexto útil para el resto de la documentación del producto.
La Retail React App es una aplicación React renderizada del lado del servidor que está optimizada para el comercio electrónico. Ofrece un punto de partida para la construcción del storefront gracias a que ya incluye características clave, como:
- Agrupación, separación y transpilación de códigos
- Librerías de componentes temáticas
- Sistema de estilizado basado en JavaScript (CSS en JS)
- Scripts para automatizar las tareas rutinarias de desarrollo
- Trabajador de servicios y manifiesto para las características de la aplicación web progresiva (PWA)
- Suites de prueba
El storefront de la Retail React App incluye páginas y características estándar de comercio electrónico, como una página de listado de productos (PLP), una página de detalles del producto (PDP), un carrito y la finalización de la compra (checkout). Cada aspecto del storefront está diseñado para poder mejorarse y ampliarse con su propio código.
Para obtener más información, vea una demostración de la Retail React App en pwa-kit.mobify-storefront.com o lea la guía de arquitectura completa → The Retail React App.
Para que la experiencia del comprador sea la mejor posible, los storefronts de PWA Kit utilizan un sistema de renderización y enrutamiento que ejecuta el mismo código fuente en dos contextos diferentes: en el lado del servidor y en el lado del cliente. La renderización del lado del servidor optimiza la velocidad de carga inicial de la página, mientras que la renderización del lado del cliente permite una interfaz de usuario con mayor capacidad de respuesta y transiciones fluidas de página.
El sistema de renderización y enrutamiento lo establece la Retail React App con su configuración de servidor exprés y componentes React organizados jerárquicamente. Dentro de este sistema, se puede hacer lo siguiente:
- Agregar nuevos componentes de página y modificar los existentes.
- Suministrar datos a los componentes de la página a partir de solicitudes a la API o de las interacciones de los usuarios.
- Definir patrones para enrutar solicitudes de URL a los componentes de la página.
- Personalizar la salida de todas las páginas.
Para obtener más información, consulte las guías de arquitectura completas → Renderización y Enrutamiento.
Los storefronts de PWA Kit utilizan Actividades de Einstein para mejorar las experiencias de usuario y brindan datos sobre informes en Informes y paneles.
Para habilitar los informes basados en Einstein Activity en Informes y paneles, debe habilitarlos en Business Manager.
El PWA Kit es un proyecto de código abierto alojado en GitHub.
El repositorio de GitHub para PWA Kit se establece como un monorepo con varios paquetes, incluidos bibliotecas, plantillas de proyecto, SDK y otras herramientas.
Para ayudarle a navegar por el repositorio, aquí puede ver una visión general de cada paquete que contiene:
| Paquete | Descripción |
|---|---|
| pwa-kit-create-app | Crea proyectos de PWA Kit en función de plantillas de proyectos. |
| pwa-kit-dev | Herramientas de línea de comandos para desarrollar, generar e implementar proyectos de PWA Kit. |
| pwa-kit-runtime | Permite que las aplicaciones Node.js se ejecuten en Managed Runtime. |
| pwa-kit-react-sdk | Utilidades que admiten el pipeline de renderizado. |
| commerce-sdk-react | Enlaces de React para interactuar con la API de Salesforce B2C Commerce. |
| template-retail-react-app | Plantilla predeterminada para iniciar proyectos. |
| template-typescript-minimal | Plantilla de proyecto de configuración cero para aplicaciones TypeScript. |
| template-express-minimal | Plantilla de proyecto esquemático para aplicaciones que se ejecutan en Managed Runtime. |
Se brindan parches de seguridad para 24 meses después de que cada versión principal de los SDK de PWA Kit (1.0, 2.0 y así sucesivamente) esté disponible para el público en general.
PWA Kit lanza compilaciones nocturnas en una cadencia nocturna para tener mejor visibilidad sobre las futuras características y la posibilidad de que los implementadores prueben las integraciones de código.
Los lanzamientos nocturnos de los paquetes de PWA Kit se hacen a npm utilizando la etiqueta de distribución nightly-next, La última etiqueta nightly-next puede verse en npm.
Estos paquetes pueden instalarse al ejecutar:
npm install <package-name>@nightly-next
Por ejemplo, para instalar la última recopilación nocturna para @salesforce/commerce-sdk-react en su proyecto de PWA Kit, ejecute:
npm install @salesforce/commerce-sdk-react@nightly-next
No utilice las versiones de vista previa en Producción (Production).
Estas compilaciones no está probadas ni son compatibles. Algunas características incluidas en las recopilaciones nocturnas podrían no estar incluidas en las versiones finales del PWA Kit. Estas compilaciones no lanzadas podrían incluso no cargar, tener características no documentadas, tener defectos conocidos y tener muchos otros problemas. Son diseñadas para que las utilicen los desarrolladores y otras personas que deseen obtener acceso temprano a las características planificadas para PWA Kit.