Novedades: El PWA Kit v2 ya está disponible. (Para obtener más información, consulte las notas de la versión).

Primeros pasos del Progressive Web App Kit

Para probar el PWA Kit con la configuración de demostración, siga las instrucciones de Inicio rápido.

El Progressive Web App Kit (Kit de aplicación web progresiva, PWA Kit) es el marco utilizado para crear storefronts con React.

Con el marco del PWA Kit se obtienen:

  • Plantillas de proyectos, incluida la aplicación Retail React. La aplicación Retail React es un storefront personalizable que implementa los flujos principales del comercio electrónico (eCommerce) desde la página de inicio hasta finalizar el proceso de compra (checkout).
  • Un sistema de renderizado que funciona tanto del lado del servidor como del lado del cliente y que maneja la hidratación (el proceso de transferencia del renderizado del servidor al cliente).
  • Un sistema de enrutamiento que le permite inyectar datos de la API de comercio en sus componentes.
  • Funciones de utilidad y scripts para automatizar las tareas rutinarias de desarrollo
  • Integración con B2C Commerce API y Open Commerce API (OCAPI).

Una aplicación web progresiva (PWA) es un sitio web cuya experiencia de usuario incluye características que normalmente asociamos con las aplicaciones nativas, como:

  • Tiempos de carga rápidos
  • Renderización y transiciones fluidas
  • Soporte fuera de línea
  • Instalación en la pantalla de inicio

La razón por la que se denominan “progresivas” es que estas características se agregan una a la vez (o progresivamente), en función de lo que admitan el dispositivo y el navegador del usuario.

Una PWA funciona en cualquier dispositivo de escritorio o móvil que utilice un navegador que cumpla con los estándares.

La siguiente tabla compara una PWA con un sitio web más reactivo tradicional y una aplicación nativa.

PWASitio reactivoAplicación nativa
¿Qué es esto?Un sitio web que es reactivo y a la vez proporciona un rendimiento y características similares a las de una aplicación nativaUn sitio web que permite escalar de manera dinámica a diferentes tamaños de pantallaUna aplicación disponible en un programa específico (iOS, Android) que puede acceder a las capacidades del lado del dispositivo
Caso de usoCuando quiere una experiencia más rápida y atractiva similar a la de una aplicaciónCuando un storefront web tradicional satisface sus necesidadesCuando quiere impulsar un mayor compromiso con su base de clientes más fieles

Managed Runtime proporciona la infraestructura para implementar, alojar y supervisar su storefront de PWA Kit en una plataforma de nube pública. Con Managed Runtime, puede enfocarse en el desarrollo de su storefront en lugar de en gestionar los servidores.

Managed Runtime sigue la Metodología de la aplicación de doce factores. Su storefront se alimenta de un único código base que se escribe sin estado y que puede implementarse en la infraestructura informática más eficiente y de bajo costo disponible. Cada implementación sustituye completamente a la anterior y se reconfigura desde cero.

Y, lo que es más importante, Managed Runtime ofrece la misma seguridad de nivel empresarial y un tiempo de ejecución histórico del 99.99%, al igual que todas las tecnologías de Salesforce.

Para obtener más información, consulte la Visión general de Managed Runtime.

Al usar el PWA Kit y Managed Runtime, ocasionalmente verá referencias a Mobify, que era el nombre de la empresa que desarrolló estas tecnologías originalmente. Salesforce adquirió Mobify en 2020, y todavía estamos en proceso de reposicionamiento de la marca.

Agradecemos las contribuciones de la comunidad de código abierto al PWA Kit. Para obtener más información sobre el proceso de contribución, consulte Contribuciones al PWA Kit.

Si le gusta el PWA Kit, considere la posibilidad de dar un puntaje al GitHub Repo. ¡Ayuda a otros a descubrir el PWA Kit!

Ahora que está familiarizado con los fundamentos del PWA Kit y de Managed Runtime, consulte las demás guías de la serie Primeros pasos:

  1. Inicio rápido
  2. Crear un On-Demand Sandbox
  3. Configurar acceso de API.
  4. Configurar el entorno local
  5. Enviar e implementar paquetes