PWAs - Fundamentos Tecnológicos y Casos de Uso Potente

En la app de Flipkart, podemos percibir que parte del contenido se está cargando mientras navegamos dentro de la app. Como la aplicación sólo carga el contenido que se le pide, ayuda a los usuarios a ahorrar en el consumo de datos, pero también proporciona una experiencia rica y atractiva cuando buscan comprar algo en la aplicación.

Para mostrarte esta característica he abierto la app de Flipkart en Chrome, en un Android. Cuando se carga la página, podemos percibir de inmediato cómo se ha adaptado a la interfaz de usuario del navegador, cambiando los colores para que coincidan con la PWA. Este es un buen ejemplo de cómo las apps pueden mejorar constantemente respondiendo a los recursos disponibles.

En este ejemplo, también se aprovechan las características del dispositivo como, por ejemplo, la vibración, para llamar la atención del usuario cuando se le invita a añadir la app en la pantalla de inicio de su smartphone. Al mismo tiempo que esto está pasando, nos encontramos con un conjunto de operaciones que se están ejecutando en segundo plano, para ofrecer la mejor experiencia de usuario a través de la recopilación de datos. 

La página web de Walmart es un buen ejemplo de cómo un sitio web en sí puede adaptarse, cambiando el diseño en base a las capacidades del dispositivo del usuario. Por ejemplo, en la versión móvil, que se parece mucho a la interfaz de la app, la mayoría de los botones de navegación han sido movidos en el menú, al que ahora se puede acceder a través de un botón en la esquina superior. Además, parte de la información y publicidad interna se ha distribuido, para que parezca más nativa para los usuarios.
Los otros dos ejemplos, son mucho más similares, ya que la mida de la  pantalla no cambia tanto, por lo que sólo algunos bloques se multiplica y cambian de tamaño.

Aún en este caso, es interesante prestar atención al banner superior en en iPad y el desktop.  En iPad se invita al usuario a instalar la app nativa, pero en desktop se resaltan algunas promociones. En este ejemplo podemos ver cómo las estrategias de marketing se adaptan en función de la plataforma, y cómo el móvil es una herramienta significativa para convertir los usuarios en clientes premium.

La arquitectura de una PWA es otro factor crucial en sus funcionalidades, todo esto siguiendo el modelo de shell de app. Esta estructura minimiza las peticiones de página, ya que separa las partes de la app "fijas", como el menú, el encabezado y el diseño de las páginas (que en conjunto se llaman el App Shell), de las partes que se están constantemente actualizando contenido.

En términos prácticos, las ​Progressive Web Apps imitan la navegación de las apps nativas con el fin de ofrecer interacciones similares. Para los usuarios recurrentes, significa que los elementos clave de la aplicación se mostrarán inmediatamente, ya que están en el caché, mejorando el rendimiento y el resto del contenido se recuperará durante el uso.

En el ejemplo anterior tenemos un artículo del The Washington Post que ha sido indexado en Google, incluso con funciones extras, como las miniaturas y los enlaces a su ​Progressive Web App. Para las empresas que están produciendo contenido propio, esto puede un nuevo modo de ganar clientes potenciales y empezar a crear conexiones con usuarios que, de lo contrario, no hubieran utilizado nunca la aplicación.

Este es el ejemplo perfecto de una característica que se extendió ampliamente en las tecnologías web y ahora está potenciando las PWA. En el ejemplo anterior con la app del The Washington Post, el usuario puede simplemente usar las opciones de compartir nativas, copiar/pegar donde quiera, o incluso marcar la página como favorita.

En la imagen de arriba podemos ver el signo que indica que esta es una página segura, protegida con un certificado HTTPs. Además del procedimiento de seguridad, The Washington Post fue un paso más allá y también hizo la Paper Validation, que les permite mostrar el nombre de la empresa en la barra de navegación, en vez del URL predeterminado de la página.

Product Hunt es un early adopter por naturaleza y ya comenzó a aprovechar esta característica y permitir a sus usuarios instalar la web app en la pantalla de inicio de su smartphone. La instalación se puede realizar o bien con un mensaje de solicitud de instalación o desde el botón Opciones del navegador, dos opciones sencillas y rápidas.

Además de los beneficios obvios de estar presente en la pantalla de inicio del dispositivo, cuando la PWA se instalada, ésta va mejorando progresivamente, perdiendo la UI del navegador, y permitiendo a los service workers responder más eficientemente y mejorando la experiencia general del usuario. Al no tener que instalar la app desde las tiendas, es mucho más fácil mantener una relación con los usuarios y convertirlos en clientes/usuarios leales. 

Una vez más, Product Hunt está utilizando las características del PWA a su favor, el ejemplo anterior muestra las notificaciones push web. Cuando los usuarios llevan un rato dentro de la app, se abre una pestaña pidiéndoles si quieres recibir notificaciones push en la PWA,  esto activa al service worker, que desde ese momento puede enviar push  a los usuarios, incluso cuando el usuario está en otras aplicaciones. 

Juntando todas estas piezas y estudiándolas con perspectiva, vemos que las Progressive Web Apps son web apps mejoradas radicalmente que ofrecen una muy buena experiencia perfecta para los usuarios. Por lo tanto, la fiabilidad, la velocidad y el compromiso son los principales puntos de esta metodología.

Como podemos ver, los casos de uso de las Progressive Web Apps son bastante diversos, y seguramente con más app builder que lo abracen, seremos testigos del desarrollo de ejemplos mucho más sorprendentes. ¡Sólo podemos decir que estamos emocionados y con los ojos bien abiertos!