PWA en Magento 2: ¿Cómo usarlo?

PWA le da a su tienda una gama de nuevas características:

• Aumento de la velocidad de la página;
• El modo “móvil” que te permite enviar notificaciones push;
• Disponibilidad del modo sin conexión;
• Interfaz de usuario práctica y receptiva.

Esto sin mencionar que los PWA funcionan bien en la web normal.

En cuanto al desarrollo, PWA utiliza una pila de tecnología moderna y popular que incluye ReactJS, Redux, GraphQL , Apollo y webpack. Tecnología como React se utiliza para crear una tienda PWA para Magento 2. Para los desarrolladores de Magento, esto ofrece nuevas oportunidades para explorar. Sin embargo, la filosofía de las PWA poco tiene que ver con la que estamos acostumbrados en Magento. Desde el enfoque del desarrollo hasta la comprensión clásica del concepto de «tema», es absolutamente diferente.

En el artículo, exploraré la naturaleza de la PWA en detalle y discutiré las oportunidades que ofrece al negocio del comercio electrónico.

¿Cómo funciona PWA? Perspectiva del usuario frente al desarrollador

Decidí considerar la tecnología para los 2 jugadores clave: un usuario habitual de una tienda electrónica y un desarrollador de Magento.

Usuario de PWA

Un usuario puede ver PWA como un sitio web común que funciona perfectamente en la web. Además, interactúa con el usuario como una aplicación nativa: cuando el usuario visita el sitio, ve una oferta para instalarlo en su dispositivo móvil. Después de la configuración, el sitio comienza a funcionar como una aplicación móvil sin conexión que incluso envía notificaciones automáticas.

Desarrollador de PWA

Para un desarrollador, PWA crea un proyecto separado ubicado en la raíz de un Magento 2 estándar. Es una aplicación React que usa GraphQL para interactuar con el backend. Entonces puede obtener temas para Magento 2 con la ayuda de React para su interfaz. Aquí hay algunos otros componentes del proyecto:

• Las herramientas CLI de pwa-buildpack, las herramientas de  construcción y desarrollo ayudan a configurar y optimizar los componentes y el entorno local;
• Peregrine hooks and components es la colección de componentes útiles listos para usar y React hooks que permiten la reutilización de las funciones comunes, como enrutamiento, visualización de productos o precios, etc.;
• Workbox, la biblioteca de Google para compatibilidad con el modo sin conexión;
• Tienda Venia y componentes visuales : el núcleo del tema y los componentes visuales listos para usar;
• UPWARD , una especificación que describe cómo debe reaccionar el servidor a las consultas de datos. Es un intermediario entre la tienda de PWA y el backend de Magento con diversas API que ubica todas las consultas en un solo lugar y proporciona la respuesta esperada.

Temas PWA vs. Magento: ¿cuál es la diferencia?

El tema básico de PWA de Magento se llama Venia. Sin embargo, no es como los temas estándar de Magento.

El tema regular de Magento es un componente que determina el aspecto de la tienda. El tema de Magento está profundamente integrado con la funcionalidad de Magento y siempre se hereda del tema principal. En la parte superior de la cadena de herencia de Magento, se encuentra Magento Blank. Estos son los archivos del tema central. Cualquier otro tema se basa en estos archivos, redefiniéndolos y restableciéndolos.

A diferencia de Magento , los temas de PWA no se heredan del tema principal. Estos temas para Magento 2 consisten en componentes React que ofrecen diferentes funcionalidades. Puede reubicar estos componentes para cambiar el comportamiento del tema o eliminarlos por completo. En Magento, heredar el tema implica cierto riesgo: si el tema principal cambia, el tema secundario también puede cambiar de manera impredecible.

PWA utiliza un enfoque modular que permite construir un tema desde cero con la ayuda de diferentes módulos listos para usar. Este enfoque garantiza una mayor flexibilidad y control en la construcción del escaparate de la tienda.

Como los componentes del tema son modulares e independientes, los efectos adversos de actualizar cada parte se reducen al mínimo.

Cada enfoque tiene sus pros y sus contras. Sin embargo, las PWA no van a detener las mejoras en el corto plazo. El proyecto está en desarrollo activo. Si revisa los repositorios relevantes de GitHub, verá los problemas que apuntan a agregar » tematización » a las PWA. Esto unirá las ventajas de las 2 estrategias y facilitará la personalización de la apariencia de la tienda.

¿Por qué elegiría PWA para mi tienda Magento 2?

Si tuviera una tienda Magento 2 en línea, elegiría PWA sin pensarlo dos veces. ¿Porque?

• Amplia cobertura . Puede abrir una PWA simplemente haciendo clic en un enlace en una red social, o al navegar, o al buscar en Google. No hay AppStore o PlayStore involucrados. Esta característica ofrece una mayor cobertura de información que la de las aplicaciones nativas.
• Naturaleza multiplataforma . Una misma PWA cubre iOS, Android y web. No necesita crear 3 aplicaciones para atender a todos los usuarios de la plataforma. Solo necesitas una PWA.
• Tamaño relativamente pequeño . Las PWA son mucho más pequeñas que las aplicaciones nativas; la configuración lleva unos segundos y el trabajo es rápido. ¿Porque? Los PWA utilizan ampliamente las capacidades de los navegadores y la memoria caché.
• No requiere instalación . Una PWA funcionará en cualquier plataforma incluso sin instalación.

Los grandes jugadores como AliExpress, eXtra Electronics, Konga, 5miles ya han aumentado sus tasas de conversión en un 60%-100% gracias a los profesionales de PWA. Y este no es el límite .

Contras de PWA

La desventaja clave de PWA es que la tecnología es muy joven y aún no ha visto muchas implementaciones. La novedad también explica el hecho de que no todos los navegadores admiten PWA en su totalidad (la configuración móvil no está disponible).

Sin embargo, como he señalado anteriormente, esta peculiaridad no obstaculiza el funcionamiento de PWA; funcionará en la web de todos modos. Entonces, ¿es un inconveniente? Eso es para que usted decida.

Resumiendo

PWA es una nueva tecnología que ofrece a los usuarios y desarrolladores una gama de nuevas características. Incluyen configuración móvil, notificaciones automáticas y la capacidad de trabajar sin conexión. También abre nuevos horizontes comerciales, incluida la distribución de productos fuera de la web o una tienda de aplicaciones. PWA es un nuevo proyecto de Magento que se está desarrollando y creciendo activamente, y que nos deleitará con nuevas oportunidades y trucos.

Espero que este resumen te sea útil. ¿Quizás ya has usado PWA? Por favor, comparta su experiencia en el comentario a continuación.

Mods compatibles con PWA y GraphQL de Amasty

Realizamos un seguimiento de las tendencias de la industria y tratamos de brindar lo máximo a nuestros clientes. Así que comenzamos asegurando la compatibilidad de nuestro producto Magento 2 con GraphQL, lo que le permite usar módulos en sus PWA .

Esto es lo que tenemos ahora:

• Productos relacionados con Magento 2 Automatic para v. 2.5.3
• Formulario de contacto de Magento 2 v. 1.11.0
• Magento 2  Blog Pro versión 2.4.0
• Menú personalizado de Magento 2 v. 1.5.0
• Presentación de Magento 2 v. 2.9.1

Y el trabajo está en marcha. ¡Estén atentos a las actualizaciones!