Progressive Web App de código abierto para e-commerce (Open Source PWA)
1. Introducción
Desde hace no mucho tiempo, y dada la madurez que el sector del comercio electrónico está adquiriendo, existe una presión latente para innovar. Este hecho se intensifica aún más por la influencia del comercio móvil. Hoy día ya no es suficiente con ofrecer simplemente una tienda online a través de una web para satisfacer las demandas móviles del mercado.
El estándar más extendido para ofrecer una experiencia de compra desde dispositivos móviles es un sitio web de e-commerce clásico con un diseño adatpativo («responsive») al que se puede acceder a través del navegador del teléfono móvil. Algunas compañías, sin embargo, también ofrecen aplicaciones nativas como alternativa. Estas apps deben desarrollarse por separado para cada uno de los diferentes sistemas operativos (principalmente iOS y Android). Si se compara, existen ventajas y desventajas entre los sitios web responsive y las aplicaciones nativas (para más info puedes leer este artículo anterior en el que ya hablamos sobre este tema). En términos de fidelidad del cliente y experiencia del usuario, las aplicaciones nativas tienen una clara ventaja. Sin embargo, los sitios web móviles tienen un mayor alcance porque su contenido puede ser indexado (y, por lo tanto, mostrado) por los motores de búsqueda.
Y es este último aspecto lo que está haciendo que empresas como Google estén potenciando fuertemente la adopción de esta clase de tecnología, y si los gigantes están fomentándolo, no es de extrañar que tarde o temprano se convierta en el estándar de facto. En este artículo te daremos una panorámica acerca de esta tecnología y te daremos unas breves indicaciones para crear tu propia PWA utilizando soluciones de código abierto u Open Source.
2. ¿Qué es una Progressive Web App?
Si nos lees con frecuencia, sabrás que nos gusta mucho tirar de Wikipedia cada vez que queremos definir un concepto, así que ahí va. Su traducción literal al español sería:
Aplicaciones Web Progresivas, son la evolución de las páginas web hacia un ecosistema tecnológico más cercano al de una aplicación móvil o de escritorio instalable en el sistema operativo.
3. Requisitos a cumplir por una PWA
Una página web se convierte o se considera PWA cuando cumple una serie de requisitos mínimos con los que conseguir, por ejemplo:
- que pueda ser instalada de forma fácil en nuestro ordenador, móvil o tablet, tal como si se tratase de una aplicación de escritorio o aplicación móvil
- conseguir que dicha web proporcione un contenido mínimo cuando nuestro dispositivo no tenga acceso a internet
- mejorar la experiencia de usuario (UX) con sistemas de cache local inteligente o con carga dinámica de contenido y librería
Saliendonos del contexto que marca la Wikipedia, y volviendo a nuestro artículo, podría decirse que una aplicación web progresiva (PWA) es un híbrido entre ambos enfoques y aúna lo mejor de ambas. El sitio web móvil proporciona contenido accesible para los motores de búsqueda y además, tiene el aspecto de una aplicación nativa que permite una navegación intuitiva y un mejor rendimiento.
4. Ventajas de las Progressive Web Apps
4.1. Carga rápida
Una gran ventaja de la PWA es la carga rápida de contenido a través de un almacenamiento en caché eficiente. Al mismo tiempo, los datos relevantes se actualizan en segundo plano. Esto hace posible recuperar y almacenar en caché los recursos por adelantado, administrar solicitudes sin conexión y mucho más. Una PWA está en funcionamiento en un instante e incluso se puede usar sin conexión o en condiciones de red poco confiables.
4.2. Menos espacio en disco que las aplicaciones nativas
No necesita instalar un PWA a través de una tienda de aplicaciones. Por lo tanto, los usuarios no necesitan instalar y usar otra aplicación. Esto elimina la descarga lenta de un paquete de instalación. Además, una PWA requiere mucho menos espacio de almacenamiento que una aplicación nativa. El PWA de Twitter, por ejemplo, tiene solo un 3% del tamaño de la aplicación comparable.
4.3. Bajo consumo de datos
Con un PWA, el contenido de un sitio web solo se almacena en caché localmente en el teléfono inteligente. Este minimalismo de datos también se sigue utilizando constantemente. Este es un factor importante, especialmente cuando se tienen en cuenta volúmenes de datos limitados.
4.4. Notificaciones push para más compromiso
Cuando los usuarios no están en su sitio web, es difícil hacer contacto directo. Los PWA le permiten enviar notificaciones push. Al igual que con las aplicaciones nativas, pueden proporcionar a los usuarios información y ofertas para motivarlos a interactuar. OLX ha podido aumentar la tasa de reactivación mediante notificaciones push en un 250%.
4.5. Fácil acceso a aplicaciones web.
Se puede acceder a una PWA desde cualquier navegador, independientemente del sistema operativo. También se puede agregar fácilmente a la pantalla de inicio (al menos en Android). Después de eso, la experiencia del cliente es comparable a la de las aplicaciones nativas.
4.6. No es necesaria la tienda de aplicaciones
El usuario no tiene que buscar el PWA en la App Store. Además, no se requiere el proceso de certificación, ni las actualizaciones requieren confirmación de la App Store.
4.7. Más alcance que las aplicaciones nativas
Los PWA simplemente se llaman a través de una URL. Esto proporciona dos ventajas sobre las aplicaciones nativas: por un lado, el contenido puede ser encontrado por los motores de búsqueda, por otro lado, las URL se pueden compartir más fácilmente a través de las redes sociales. Una ventaja: ¡Google califica mejor las páginas de carga rápida!
4.8. Mejor tasa de conversión
La tasa de conversión de una aplicación nativa es 120% más alta que la de una aplicación web. Los PWA tienen un efecto similar porque tienen una funcionalidad de aplicación nativa popular y proporcionan una muy buena experiencia de usuario. La navegación dentro de la PWA es consistentemente fluida. Esto es crucial para la retención de usuarios. Más del 40% de los usuarios abortan el proceso si un proceso de carga tarda más de 3 segundos. Con cada segundo adicional, la tasa de conversión cae en un promedio del 7%.
4.9. Menos esfuerzo de desarrollo
En lugar de desarrollar aplicaciones nativas separadas para Android e iOS, las ventajas de todas las aplicaciones se combinan en una PWA. Hace que el desarrollo múltiple para diferentes plataformas sea superfluo y aún cubre sus propósitos.
5. Progressive Web App para e-commerce de código abierto
Después de leer todo este párrafo ya tendrás más o menos una visión clara de por qué una PWA puede ser interesante para innovar con tu e-commerce en un futuro próximo, y te estarás preguntando acerca de qué dirección has de tomar o cuál es el siguiente paso. Antes de hablar de una tecnología u otra, te recomendamos que acudas a profesionales de este sector que te podrán asesorar en base a tu punto de partida. En Sugerendo llevamos ya muchos años dedicados exclusivamente a ofrecer soluciones tecnológicas para e-commerce y somos buenos conocedores de este entorno, es por eso que, antes de hablar de tecnología, conviene hablar de los problemas a solucionar u objetivos a conseguir, y luego determinar cómo la tecnología puede ayudarte con ello.
Una vez dicho esto, mencionarte existen diversas opciones para implementar una PWA para tu e-commerce. Quizá lo más rápido que te venga a la cabeza sea contratar a una agencia e implementarla a medida desde cero, sin embargo, has de saber que existen soluciones de código abierto (Open Source) que te permitirán agilizar la implantación de la PWA de tu e-commerce (quizá si has llegado a este artículo a través de Google será lo que más te interese).
Pues bien, en efecto existe la opción de re-aprovechar el código de soluciones PWA Open Source del mercado y no tener que desarrollarlas desde cero. La ventaja de esto es que se acortan los tiempos de desarrollo y por tanto los costes. En este caso podrás re-aprovechar el front-end que te ofrecen esta clase de soluciones e integrarlo con tu solución de e-commerce existente, sea cual sea. Es decir, no es necesario tirar por la borda tu actual tienda online, si es que aún no la has desarrollado. Lo que tendrás que hacer será integrar el nuevo front que te ofrece la Progressive web app de código abierto y las funcionalidades que ofrece, con el back-end de tu plataforma de e-commerce.
Ahora que ya sabes que implantar una PWA para e-commerce es mucho más sencillo de lo que pensabas gracias al mundo de código abierto, como siguiente paso te vamos a comunicar que desde Noviembre de 2019, la empresa Intershop, una de las referentes en el mundo del comercio electrónico (especialmente en B2B commerce) y de la que somos partner, ha anunciado que su frontal PWA para e-commerce basado en Angular está disponible gratuitamente para su uso y desarrollo para todos los miembros de GitHub. Para trabajar con el proyecto, sus desarrolladores crearon notas de inicio rápido, así como información detallada sobre personalizaciones, el servidor de desarrollo, los procedimientos de implementación y otras especificaciones tecnológicas. Además, proporcionan plantillas para despliegues con Kubernetes y DevOps para Microsoft Azure.
Si echas un vistazo a GitHub, verás que a pesar de ser un proyecto relativamente reciente, ya tiene más de 4.000 commits, lo que nos da una idea de la implicación de alguno de sus contribuidores.
El mercado ofrece muchas más soluciones como esta, sin embargo, si estás aún en fase de investigación y aún no tienes nada decidido, te recomendamos que pruebes con esta opción debido a que se trata de una PWA relativamente básica y que está muy orientada a e-commerce.
Existe una DEMO pública en este enlace, lo que te permitirá anticipar cómo es el front-end y las funcionalidades que tiene (puedes interactuar con la demo como si se tratase de una tienda online cualquiera).
Verás que en efecto es un frontal web con una UX/IX muy sencilla, sin embargo, que esto no te tire para atrás si tienes aspiraciones u objetivos muy ambiciosos con tu estrategia móvil, pues la solución Intershop siempre se ha caracterizado por tener unas APIs muy completas que permiten una amplia evolución e interconexión con otros entornos, si quieres seguir investigando al respecto, te recomendamos que leas este artículo acerca de cómo se incluye un escáner de códigos QR en su PWA.
Fuentes:
What is a progressive web app?, Wikipedia.
Progressive Web Apps, merge 2 into 1, Intershop
Open source techcnology trends, NodeRicks
