Progressive Web Apps y por qué pueden ser atractivas para incrementar tus ventas de e-commerce

Jose Luis Reyes
Jun 21 · 7 min read

Las aplicaciones móviles tienen una serie de ventajas que atraen la mirada de las empresas que realizan e-commerce: facilitan una navegación expedita, permiten aprovechar mejor los recursos y el hardware de los móviles, son capaces de enviar notificaciones push a los usuarios y tienen ganado un lugar en el dispositivo (pueden incluso aparecer en la ventana de inicio).

Sin embargo tienen varias desventajas, que socavan su atractivo. Desde el momento que el usuario descubre que existe una aplicación y la puede efectivamente abrir, pueden pasar varios minutos, con una buena cantidad de clics de por medio. Por si fuera poco, la aplicación ocupa bastante espacio de su equipo.

Pero ¿qué tal si te dijera que hay una tecnología que permite superar esos obstáculos? Se trata de las Progressive Web Apps (PWA), una tecnología que ya tiene un par de años en el mercado, que es un híbrido entre sitios web y aplicaciones móviles.

Para que te lo imagines, supone que tuvieras un sitio web que pudiera hacer uso de las capacidades de tu dispositivo, tal como si fuera una aplicación nativa, accediendo a la cámara, a las notificaciones push, a contenido sin necesidad de conexión, a la grabadora de voz, la geolocalización, entre otras características. Es decir, un sitio con esteroides y completamente amigable para los buscadores. Es más, supone que además pudieras permitir que tus usuarios agreguen tu sitio ultra poderoso o PWA a su dispositivo a través de un solo botón, quedando en el listado de aplicaciones del dispositivo del usuario, consumiendo apenas unos cuantos kilobytes.

El sitio de EEUU de Lancome es una PWA. Por lo mismo, incluye un botón en el extremo inferior, para poder guardar un acceso a la PWA en el equipo móvil. Ese acceso es un ícono que queda dentro del listado de aplicaciones del celular.

Suena bien, ¿no? Otra de las gracias es que las PWA hacen uso del navegador. Aún cuando se puedan abrir como si fueran una aplicación, a pantalla completa, y se sienten como una aplicación, están corriendo dentro de uno de tus navegadores. Esto tiene una gran ventaja, ya que no debes desarrollar aplicaciones para diferentes sistemas operativos, y las PWA aprovechan las características nativas de cada plataforma. Es decir, ahorras tiempo en desarrollo, mantención, testeo y distribución. Y eso es ahorro en dinero.

Por lo mismo ya múltiples empresas, pese a lo reciente de la tecnología, están apostando por aplicaciones PWA. Es el caso de Pinterest, Uber, Forbes, Financial Times, Starbucks y de sitios de e-commerce como Aliexpress, Lancome, Hobbycraft o Debenhams (1).

Forbes señala que tras el lanzamiento de su PWA las sesiones por usuario aumentaron un 43%, la duración de las sesiones se incrementó en un 100% y los avisos fueron vistos un 20% más (2). Aliexpress indica que las conversiones de los nuevos usuarios aumentaron en 104%, se duplicaron las páginas vistas por sesión y aumentó en un 74% el tiempo por sesión (3). Son números impactantes.

La magia de las PWA

Gran parte de la magia de las PWA se debe a un componente llamado service worker, que es un script, escrito en lenguaje javascript, que funciona como un proxy entre el navegador y la red. Este elemento administra las notificaciones push y permite cachear la aplicación (lo cual entrega velocidad a la PWA y facilita mostrar contenido aún cuando el usuario esté offline).

El service worker entrega la posibilidad de sincronizar datos en segundo plano, lo cual permite aplazar acciones hasta que el usuario vuelva a tener una conexión estable. Por ejemplo, hace posible que el usuario guarde como favorito un producto estando offline y la información se envíe cuando haya conexión.

Además, se encarga de instalar y actualizar nuestra aplicación.

Las PWA también hacen uso de un archivo de manifiesto, un JSON que contiene la información de la aplicación y que permite mostrar el botón “Add to home screen” para instalarla. Además, alberga información sobre los íconos a ser desplegados en tu dispositivo una vez que la PWA ha sido instalada, así como la forma de despliegue y orientación de la aplicación al abrirla desde el listado de aplicaciones de un dispositivo (por ejemplo, el tipo de display “standalone” permite ocultar la UI del navegador).

Las limitantes

Pese a ser muy parecidas a una aplicación, las PWA carecen de algunas características de las aplicaciones nativas, entre ellas el acceso a calendarios, contactos, alarmas y bookmarks del navegador. Tampoco pueden interceptar SMS o llamadas, enviar SMS o hacer llamadas. Un buen listado de lo que se puede o no hacer se encuentra en el sitio What Web Can Do Today.

En el sitio What Web Can Do Today se pueden revisar las funcionalidades de los dispositivos móviles a las que acceden los navegadores actuales.

Por otro lado, el botón “Add to home screen” no llama mucho la atención, al menos para quienes no conocen su funcionalidad. Pese a ello, según datos de Google, las PWA son instaladas 5 o 6 veces más que las Apps que son anunciadas en banners dentro de los sitios web. Además, más de la mitad de esas instalaciones fallan, en cambio la “instalación” de las PWA es instantánea.

Tecnologías para desarrollar PWA con tu CMS

Magento, atento a esta última tecnología, en su versión 2.3, lanzada a fines de 2018, incluye PWA Studio, una suite de herramientas que facilita a los desarrolladores construir aplicaciones web progresivas (PWA), así como crear componentes PWA y extensiones para reusar o vender en Magento Marketplace.

En ella se independiza la forma de consumir plantillas. Es decir, permite olvidarse del sistema de plantillas de Magento y usar un paquete aparte. PWA Studio es como tener un Magento, con un stack, que es React, consumiendo la capa de servicios de Magento, que usa GraphQL. Entre las librerías de PWA Studio también se encuentran Webpack, una herramienta para empaquetado de archivos, y Redux, una librería javascript para manejar estados en una aplicación web.

PWA Studio es una tecnología que se encuentra aún en pañales, pero merece la pena revisar. En Linets lo probamos y hay que reconocer que no fue miel sobre hojuelas. Aún es complejo de utilizar. En parte porque aún hay varias características que no se han implementado y que están en el roadmap, lo cual implica que hay que dedicar más tiempo del esperado para realizar desarrollos.

Por otro lado, hay un proyecto Open Source que se llama Vue Store Front, la opción utilizada en Linets para implementar sitios PWA. Es mucho más completo y va en la misma línea de construir soluciones PWA consumiendo la capa de servicio de Magento o la capa de servicios que exista.

La principal ventaja de Vue Storefront es que se puede conectar al back-end de la mayoría de los CMS de e-commerce, como Magento, Opencart o Prestashop, aprovechándose de la capacidades de estos de operar de manera headless. Es una tecnología que puede requerir algo de tiempo de aprendizaje, sin embargo existe una amplia documentación.

Vue Store Front utiliza Vue.js como librería de front-end, Node.js más el framework para Node llamado Express, y Elastic Search como base de datos de productos.

Los creadores de esta herramienta destacan el poder de la comunidad e indican que están conectados a más de 1.000 desarrolladores en slack y que cuentan con más de 100 contribuidores activos. Una comunidad importante para un proyecto tan reciente.

Otras opciones son Deity Falcon y Front-Commerce. Ambas usan React. Deity es open source y tiene sus fans, pero aún tiene una comunidad pequeña. Front-Commerce, en tanto, es un producto propietario, sin embargo aventaja a los demás en años de desarrollo. Este proyecto fue iniciado en 2015 (los proyectos de la competencia partieron en 2017 y 2018) y, por lo mismo, asegura que permite tener una PWA en producción, con todas las herramientas necesarias para mantener una aplicación desplegada (sistema de logs, modo de mantención, SEO, internacionalización, cacheo, procesamiento de imágenes, etc).

En resumen…

Las PWA ya son un presente y en el mundo del e-commerce poseen varios atractivos, entre ellos mejoras en las tasas de conversión de los sitios, en la experiencia de uso y en la navegación con dispositivos móviles. Además, permiten mejorar el stack de desarrollo ligado al frontend, independizarse del software de backend para construir tu frontend y mejorar el rendimiento de tu sitio, todo lo cual va en beneficio de la experiencia final del cliente.

Pese a sus atractivos, no son para cualquier empresa. En nuestra opinión, son adecuadas para empresas que ya tienen resueltos gran parte de los aspectos de su negocio (logística, posventa, etc).

La gran desventaja de las PWA es que aumentan considerablemente los tiempos de desarrollos, ya que las tecnologías involucradas poseen una curva de aprendizaje considerable. No obstante, es una inversión que merece la pena realizar, ya que alínea mejoras técnicas con mejoras comerciales, lo cual hace atractivo la proposición a las empresas que deseen mejorar la experiencia de navegación de sus e-commerce.

En Lines ya hemos implementado PWA. Si necesitas un partner que te pueda ayudar con esto, ¡llamanos o escríbenos! https://linets.cl/

(1) Hay un listado de PWA en https://pwa.rocks/

(2) https://youtu.be/m-sCdS0sQO8

(3) https://developers.google.com/web/showcase/2016/pdfs/aliexpress.pdf

Se agradece la colaboración de Miguel Cantillana.

LINETS Tech Talk

Un espacio para compartir experiencias, ideas y rants.

Jose Luis Reyes

Written by

LINETS Tech Talk

Un espacio para compartir experiencias, ideas y rants.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade