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 escaparate 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 escaparate 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 escaparate 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.

Un sitio creado con PWA Kit es compatible con los siguientes navegadores web:

Sistema operativoNavegador
Android 8 o superiorChrome 53 o superior
Android 8 o superiorSamsung Internet
iOS 10 o superiorChrome 53 o superior
iOS 10 o superiorSafari 10 o superior
Sistema operativoNavegador
Android 8 o superiorChrome 53 o superior
Android 8 o superiorSamsung Internet
iOS 10 o superiorChrome 53 o superior
iOS 10 o superiorSafari 10 o superior
Sistema operativoNavegador
macOS 10.10 o superiorSafari 10 o superior
macOS 10.10 o superiorFirefox 49 o superior
Windows 8.1 o superiorChrome 53 o superior
Windows 8.1 o superiorEdge 14 o superior
Windows 8.1 o superiorFirefox 49 o superior

Para que la experiencia del comprador sea la mejor posible, los escaparates 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 escaparates de PWA Kit utilizan Einstein Activities 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:

PaqueteDescripción
pwa-kit-create-appCrea proyectos de PWA Kit en función de plantillas de proyectos.
pwa-kit-devHerramientas de línea de comandos para desarrollar, generar e implementar proyectos de PWA Kit.
pwa-kit-runtimePermite que las aplicaciones Node.js se ejecuten en Managed Runtime.
pwa-kit-react-sdkUtilidades que admiten el pipeline de renderizado.
commerce-sdk-reactEnlaces de React para interactuar con la API de Salesforce B2C Commerce.
template-retail-react-appPlantilla predeterminada para iniciar proyectos.
template-typescript-minimalPlantilla de proyecto de configuración cero para aplicaciones TypeScript.
template-express-minimalPlantilla 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.