¿Qué son las aplicaciones web progresivas o PWA en Magento 2?

• ¿Qué significa que Magento se está convirtiendo en una plataforma de aplicación web progresiva?
• ¿Cuál será la estructura del código de PWAs en Magento?
• ¿Cuál es el trato con las API REST y PWAs?

¿Qué son las aplicaciones web progresivas?

• Se ve y se comporta como una aplicación móvil.
• Tome ventaja de móviles nativas funciones del dispositivo, sin necesidad de que el usuario final para visitar una tienda de aplicaciones, hacer una compra y descarga que localmente .

¿Por qué PWA?

• Rápido
• Seguro (segundo último tema de respuesta)
• Sensible
• Compatible con navegador cruzado
• Modo sin conexión (marque el último tema en la respuesta)
• "Instalación" móvil
• Contenido para compartir

Esta respuesta también cubre - Instalación de Magento 2.3 con PWA

Tomemos un ejemplo de Flipkart

Flipkart , el sitio de comercio electrónico más grande de la India, decidió combinar su presencia web y su aplicación nativa en una aplicación web progresiva que ha resultado en un aumento del 70% en las conversiones

Flipkart

Enfoque

1. Desarrolló Flipkart Lite, una aplicación web progresiva
2. Trabajadores de servicio agregados para tiempos de carga más rápidos
3. Navegación y desplazamiento suaves a 60 cuadros / segundo
4. Se creó el mensaje "Agregar a la pantalla de inicio" para alentar a los usuarios a agregar la página web móvil a sus pantallas de inicio

   ---

Resultados

La nueva aplicación web progresiva ayuda a Flipkart a aumentar las conversiones en un 70%

Flipkart también funciona en modo sin conexión

• Los Service Workers se pueden programar para interceptar cada solicitud de red y servir una respuesta de la memoria caché incluso cuando el usuario está desconectado.
• Biblioteca de contenedor de Service Workers que permite usar patrones simples como NetworkFirst, CacheFirsto NetworkOnly. SW-Toolboxproporciona un LRU caché utilizado en la aplicación Flipkart para almacenar resultados de búsqueda anteriores en la página de exploración y las últimas páginas visitadas de productos.
• La caja de herramientas también tiene un mecanismo de invalidación de TTL-based caché que usamos para purgar el contenido desactualizado. Los trabajadores del servicio proporcionan primitivas de bajo nivel con secuencias de comandos que lo hacen posible.

PERO PERO PERO...

¿Qué es el estudio Magento PWA?

• • El proyecto Magento PWA Studio es un conjunto de herramientas para desarrolladores que permiten el desarrollo, la implementación y el mantenimiento de una tienda PWA en la parte superior de Magento 2

El proyecto Magento PWA Studio proporciona las siguientes herramientas:

---

pwa-module

• Tiene módulos como ayudantes, funcionalidad del lado del servidor y actúa como base para todos los temas creados con Magento PWA Studio.

pwa-buildpack -

• Buildpack es un conjunto de Webpackcomplementos y herramientas que se utilizan para el desarrollo de temas de Magento PWA.

• También se utiliza para configurar y configurar el entorno de desarrollo local para la plataforma Magento 2.

Contiene las siguientes herramientas:

• PWADevServer
• Resolver Magento
• Complemento de componentes raíz de Magento
• magento-layout-loader
• Complemento de trabajador de servicio

Peregrine : Peregrine es un conjuntoReact componentscreado para manejar funcionalidades específicas de Magento comorouting,root-componentsmanejador de diseño, listas de productos, visualización de precios, etc.

Tema Venia :venia-conceptes un tema de demostración creado por Magento utilizando el estudio Magento PWA. Muestra todas las funcionalidades, flujos de trabajo y páginas disponibles actualmente.

PWA Studio NO es

• Una nueva versión de Magento

• Un reemplazo de todos los front-end

• Una aplicación de escritorio

Herramientas y bibliotecas utilizadas en PWA Studios

Paquete web

• La función principal de Webpack es crear uno o más paquetes a partir de las dependencias en los módulos de su proyecto.

Shell de aplicación

• El tamaño total es más pequeño.
• Carga inicial solicita tres archivos: login.html, shell-1234.js,3456.js
• La carga inicial necesita cargar: Shell + Router + content
• El shell es visible antes que con el enfoque Page Shell.

Shell de página

• El tamaño total es mayor (es decir, el contenido del panel está en dashboard-1234.js y 4567.js)

• La aplicación tarda más en estar fuera de línea.

• Carga inicial solicita sólo dos archivos: login.html,login-2345.js

• La carga inicial necesita cargar: Shell + content

• El shell + contentes visible antes que con el enfoque de App Shell.

Se puede usar un enfoque híbrido donde el shell y el contenido se separan en dos solicitudes (consulte la página de administración como ejemplo). Esto tiene sentido cuando el contenido es mucho más grande que el shell y el shell debería ser visible antes.

ReactJs

• Una biblioteca de JavaScript para construir interfaces de usuario.

Redux

• Una biblioteca de JavaScript utilizada para administrar el estado en una aplicación web.

GraphQL

• Un lenguaje de consulta de datos en el lado del cliente y una capa de servicio en el lado del servidor.

GraphQL en Magento

Autenticación y Esquema

Reducción de la cantidad de consultas front-end

Procesamiento de fase

Compatibilidad del navegador de escritorio

• No compatible : IE, Safari

Compatibilidad del navegador móvil

No compatible : Android Webview, IE, Safari

Los PWA son más seguros

• Como desarrollador web, puede saber cuánto alienta Google a tener sitios web en httpslugar de HTTP. Las amenazas cibernéticas siempre son las principales para los desarrolladores web y de aplicaciones.
• En el pasado, HTTPno era lo suficientemente seguro como para proteger la información de los usuarios.
• Ahora se están programando sitios web HTTPsy es fácil iniciar una aplicación web progresiva en un entorno seguro.
• Al ingresar información personal en PWA , como información de tarjeta de crédito o detalles de contacto, pueden sentirse seguros y tener tranquilidad.

PWA - Modo sin conexión

La aplicación de Wikipedia sin conexión es un buen ejemplo de una PWA que utiliza un modelo de shell de aplicación .

• Se carga instantáneamente en visitas repetidas, pero recupera dinámicamente contenido usando JS.
• Este contenido se almacena en caché sin conexión para futuras visitas.

Progressive Web App es el futuro del desarrollo web sin ninguna duda. En el futuro, los sitios de comercio electrónico, restaurantes y fuentes de medios pasarán de la aplicación nativa a la aplicación web progresiva. Sin embargo, aún en la fase inicial, muchos de los desarrolladores buscarían activamente formas de aprovechar al máximo las oportunidades que brindan los PWA.

Comencemos con la instalación de Magento 2.3 con PWA

1. Ingrese el siguiente comando en DIR / var / www / html / (m203 es mi directorio de Magento 2.3):

composer create-project --repository=https://repo.magento.com/ magento/project-community-edition=2.3.* --stability=beta m203

2. Instale Magento por línea de comando:

bin/magento setup:install --base-url=http://localhost/m230 --db-host=localhost --db-name=m230 --db-user=root --db-password=root --backend-frontname=admin --admin-firstname=admin --admin-lastname=admin --admin-email=admin@admin.com --admin-user=admin --admin-paassword=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1

3. Cree el tema base pwa que será el padre para el tema PWA Venia.

• Por ahora vamos a clonar el repositorio de temas pwa base https://github.com/magento-research/theme-frontend-pwa

4. Cree un directorio app/design/frontend/Magento/pway copie todos los archivos y directorios del tema base aquí.

• Permite comprobar si el tema base está disponible o no.

• Run: php bin/magento setup:upgrade

• Y navegue a su Magento Admin-> Contenido-> Temas

5. Descargue el proyecto de estudio PWA.

6. Navegue hasta el directorio raíz de su instalación de Magento y cree una carpeta de enlace simbólico Pwa que se vincule al directorio de módulos del proyecto (pwa-studio / packages / pwa-module).

• desde este directorio ejecuté mi comando - / var / www / html / m230

• Este es un directorio donde mi fuente descargada pwa es / var / www / html / PWA /

ln -s /var/www/html/PWA/pwa-studio-master/packages/pwa-module app/code/Magento/Pwa

7. Enlace el directorio del tema también. Navegue al directorio raíz de su instalación de Magento y cree una carpeta de enlaces simbólicos Pwa que se vincule al directorio del módulo del proyecto (pwa-studio / packages / venia-concept).

ln -s /var/www/html/PWA/pwa-studio-master/packages/venia-concept app/design/frontend/Magento/venia

8. Ahora navegue al directorio venia-concept de su proyecto pwa-studio, copie .env.disten un nuevo .envarchivo y actualice las variables con la URL a su tienda de desarrollo Magento.

cd /var/www/html/PWA/pwa-studio-master/packages/venia-concept

cp .env.dist .env

9. Instale el tema venia y el Módulo Pwa:

run: php bin/magento setup:upgrade

podemos ver que el tema venia se instaló con éxito.

10. Configure el tema de venia desde admin->Content->Configuration

11. Navegue a la ruta ( /var/www/html/PWA/pwa-studio-master) ejecute:

npm install

o

npm install webpack-dev-server -g

12. Y finalmente navega a /var/www/html/PWA/pwa-studio-master/packages/venia-concept

npm start

¡Felicidades! Ha configurado su entorno de desarrollo para el proyecto temático Venia.

PWA - Progressive Web Application es la aplicación web en general que el usuario experimenta la rica web. en forma de:

• Fiable : carga al instante y también disponible en modo fuera de línea.
• Rápido : en una forma de interacción donde el usuario interactúa sin problemas con él, y también sin ningún desplazamiento o animación basura.
• Involucrar : como se indica arriba en ambos puntos, si la aplicación es confiable y rápida, obviamente implica una mayor experiencia del usuario y también se siente como una aplicación natural.

"¿Qué significa que Magento se está convirtiendo en una plataforma de aplicación web progresiva?"

A medida que magento se está preparando para el lanzamiento de la versión 2.3, incluye esta función "PWA" para hacer que la interfaz sea más eficiente, en una forma de interacción del usuario.

¿Cuál es el trato con las API REST y PWAs?

Como magento está usando "PWA" también está agregando "GraphQL API" para proporcionar una alternativa de interfaz de usuario de desarrollo front-end de "REST / SOAP" como API de "GraphQL".

Para obtener más detalles sobre el "PWA" y la nueva característica de "magento2.3 open-commerce" , puede visitar la página oficial de este magento .

Progresivo significa que la aplicación se carga junto con los datos y activos relevantes, a medida que un usuario navega por su sitio web. Esto da como resultado una experiencia de usuario final con mejor velocidad, facilidad de uso, operación fuera de línea e integración de dispositivos.

Web significa que está escrito en los idiomas de la web (HTML, CSS, JavaScript). Esto le permite crear un sitio que brinde más funcionalidad similar a una aplicación sin crear una aplicación nativa restringida a una plataforma, como iOS o Android.

Aplicación significa que instala y ejecuta código en el dispositivo o computadora del comprador. Hacer esto crea más velocidad y capacidad que las aplicaciones JavaScript de una página del pasado.

Los PWA son esencialmente un híbrido de páginas web regulares y la aplicación móvil, lo que permite experiencias similares a las aplicaciones móviles para la web.

Magento se está convirtiendo en una plataforma de aplicación web progresiva. Es decir, Magento está haciendo un conjunto de herramientas para construir tiendas en línea como aplicaciones web progresivas. Estas herramientas ayudarán a los desarrolladores a aprender técnicas de PWA, construir frontales de PWA ultrarrápidos y crear componentes y extensiones de PWA para su reutilización o venta en Magento Marketplace. En conjunto, Magento llama a este conjunto de herramientas Magento PWA Studio.

Puede verificar la estructura del código en https://github.com/magento-research/pwa-studio

Magento PWA está utilizando GraphQL como una alternativa a REST API para PWA.

Para obtener más detalles sobre Magento PWA, puede visitar los siguientes enlaces:

• https://magento-research.github.io/pwa-studio/
• https://community.magento.com/t5/Magento-DevBlog/Introducing-Magento-PWA-Studio/ba-p/74636
• https://brandastic.com/ideas/magento-progressive-web-apps/
• https://www.monsoonconsulting.com/blog/progressive-web-apps-magento

• Progressive Web Apps es el punto medio entre las aplicaciones móviles instalables y los sitios web. Esperamos ver más tráfico en Internet desde dispositivos móviles que desde computadoras de escritorio, para 2019. Los PWA mejoran la apariencia de los sitios web para aumentar la conversión.

Los PWA ofrecen experiencias rápidas, sin fricción, "tipo aplicación" que generan más tráfico, conversiones más altas y tiempos de carga de página más rápidos para los comerciantes de Magento

Por lo tanto, en general, Magento está transformando su apariencia para aumentar las conversiones. Lea más sobre esto aquí .

• Los PWA generalmente se crean con JavaScript, CSS y HTML que tienen un nivel de rendimiento y usabilidad casi idéntico a las aplicaciones nativas. Los PWA tienen peculiaridades que incluyen:

  1. Funcionan con la mayoría (si no todos) los navegadores y dispositivos (móviles y de escritorio) con una base de código progresiva (a menudo basada en componentes como en React Js)
  2. Ajuste todas las pantallas y factores de forma utilizando un diseño receptivo Aproveche a los trabajadores de servicios para habilitar la conectividad fuera de línea (se requiere HTTPS)
  3. Proporcione una experiencia similar a una aplicación que aproveche las herramientas de reenganche, como las notificaciones push
  4. Aproveche un manifiesto de aplicación web para describir los recursos utilizados

Usted puede leer más aquí.

• SOAP (Simple Object Access Protocol) y REST (Representational State Transfer) son los protocolos de comunicación de servicios web más comunes. REST es preferible a SOAP en su mayor parte ( explicado aquí ). Por lo tanto, es lógico ver que las API REST se usan de la mano con una nueva tecnología como PWA.

Para responder solo una parte de su pregunta, pero más específicamente para Magento 2.

PWA será más fácil de construir gracias a la futura versión de Magento 2.3.

https://www.degdigital.com/insights/magento-2-3/

Citado de este artículo:

PWA

Una aplicación web progresiva es una aplicación creada para aprovechar las características de la tecnología moderna que "progresivamente" se reduce en dispositivos donde esas características no están disponibles. También permite el almacenamiento en caché de datos para que el sitio web se pueda utilizar (parcial o totalmente) en un modo fuera de línea cuando el servicio de Internet es irregular o inexistente. Esto generalmente se logra escribiendo el front-end del sitio web con un marco / pila de JavaScript moderno que está claramente separado de la aplicación de fondo. Esta aplicación de JavaScript puede usar nuevas funciones del navegador (ish) para realizar la tarea mencionada anteriormente.

Magento reconoce los múltiples beneficios de esto, y a fines de 2017 anunció sus esfuerzos para construir lo que llama PWA Studio. PWA Studio contendrá herramientas para desarrollar e implementar un PWA para el front-end de Magento. Junto con PWA Studio vendrá un sitio de demostración liviano (no lleno de funciones). Los beneficios inmediatos serán un aumento importante en el rendimiento de front-end y un aumento de casi 10 veces en la velocidad de incorporación de nuevos desarrolladores de front-end de Magento.

• Contenido relacionado: los PWA están aquí y están cambiando todo

GraphQL

GraphQL es un lenguaje de consulta para usar API. Con el aumento de la PWA, es necesario obtener cantidades más pequeñas de datos y hacer menos solicitudes de API. El lenguaje de consulta de GraphQL hace esto posible al permitir que el solicitante solicite que se devuelva un subconjunto limitado de atributos sobre una entidad (respuestas significativamente más pequeñas) y le permite encadenar solicitudes (menor número de solicitudes).

Magento actualmente admite solicitudes REST y SOAP API que usan contratos de servicio. Sin embargo, para admitir GraphQL, Magento está escribiendo una capa completamente nueva que interactúa directamente con la API de consulta. La implementación de GraphQL será la base de cómo una interfaz PWA recuperará los datos que necesita.

La aplicación web progresiva utiliza las capacidades del navegador web y proporciona una aplicación móvil como experiencia para los usuarios.

Se desarrolla a partir de una pestaña del navegador y hace que las páginas sean más inmersivas con una experiencia de usuario de baja fricción. Es una tecnología web para crear un sitio web que actúa y se siente como una aplicación.

Un usuario puede iniciar la aplicación web progresiva igual que una aplicación nativa, independientemente de la elección del navegador.

Para pruebas de demostración, puede visitar este enlace: haga clic aquí

Es un producto de Google lanzado durante I / O 2017 I / O 2017: https://www.youtube.com/watch?time_continue=14&v=cmGr0RszHc8

Es un sitio web basado en HTML.

Almacena la memoria caché en un dispositivo para que también se pueda usar sin conexión.

Sin embargo, la primera vez es lenta, lo que aumentará durante la segunda visita.

Se está actualizando cuando el dispositivo obtiene Internet, por lo que no es necesario actualizar cosas nuevas como las aplicaciones.

Activa todos los correos electrónicos al servidor cuando el dispositivo obtiene internet si alguien publica algo fuera de línea.

Finalmente, no es necesario crear una aplicación para iPhone / Android

Limitación Solo admite archivos HTML. Entonces el dispositivo debe ser compatible con HTML.

There is no store to search PWA application.

Login with FB or else will not be worked.

Not supported in IE.

Configurar PWA (sistema operativo Linux)

Paso 1: Instalar magento 2.3.1

Paso 2: Instalar / actualizar nodo

Utilice el módulo n de npm para actualizar el nodo

sudo npm install n -g

Para la última versión estable:

sudo n stable

Para la última versión:

sudo n latest

Paso 3: Instalar / actualizar hilo:

sudo npm install --global yarn

sudo npm upgrade --global yarn 

Paso 4: Instalar node-gyp - Node.js herramienta de compilación de complemento nativa

sudo npm install -g node-gyp

Paso 5: Clone el repositorio de PWA Studio

Vaya a la raíz html y ejecute:

git clone https://github.com/magento-research/pwa-studio.git

Después de ejecutar esto, obtendrá la carpeta pwa-studio

Paso 6: Instale las dependencias de PWA Studio

sudo yarn install

Paso 7: especifique el servidor backend de Magento

Under the packages/venia-concept directory, copy .env.dist into a new .env file:

Comando de ejemplo:

sudo cp packages/venia-concept/.env.dist packages/venia-concept/.env

cambiar en el archivo .env (esta será su URL de magento, no la URL del administrador):

MAGENTO_BACKEND_URL="https://release-dev-231-npzdaky-zddsyhrdimyra.us-4.magentosite.cloud/"

Paso 8: ahora crea una compilación

sudo yarn run build

Paso 9: ejecuta el servidor

sudo yarn run watch:venia

Inicia solo el entorno de desarrollo de escaparate Venia.

sudo yarn run watch:all

Ejecuta la experiencia completa del desarrollador de PWA Studio, que incluye la recarga en caliente de Venia y las reconstrucciones simultáneas de Buildpack / Peregrine.

sudo yarn run build && yarn run stage:venia

Genera artefactos de construcción y ejecuta el entorno de ensayo, que utiliza más activos comprimidos y refleja más de cerca la producción.

Una vez que ejecute uno de los comandos anteriores, obtendrá la url virtul creada por PWA.

NOTA: si usted es un usuario novato, use sudo.

Siga los documentos de desarrollo oficial de Magento 2:

https://devdocs.magento.com/guides/v2.3/pwa/