En este artículo profundizaremos en 10 experiencias de usuario que hacen uso de una Progressive Web App y conoceremos algunas aplicaciones que ya están utilizando esta innovadora forma de crear un sitio web. Esta tecnología, promovida por Google, es la clave para obtener una experiencia similar a la de una aplicación, independientemente del dispositivo o sistema operativo. Este es el objetivo principal de las PWA.
Las aplicaciones web de Smashing Magazine, Flipkart, Walmart, The Washington Post y Product Hunt son excelentes casos de estudio para ayudar a comprender cómo funcionan aspectos muy específicos de esta tecnología y cómo está ayudando a las empresas a tener aún más éxito en línea. ¡Vamos a profundizar en ello!
La tecnología PWA (Webapps), promovida por Google, es la clave para obtener una experiencia similar a la de una aplicación, independientemente del dispositivo o sistema operativo.
Independencia de conectividad
Una de las principales características de una Progressive Web App es su capacidad de funcionar cuando la conexión a Internet no es estable. La PWA ejecuta un script en segundo plano llamado Service Worker, el propósito de este script incluye el almacenamiento en caché de contenido local, lo que permite que las aplicaciones se carguen casi instantáneamente. Además, en caso de que el usuario se desconecte, la aplicación puede mostrar una pantalla personalizada para notificar la falta de conectividad o, en algunos casos, incluso mostrar contenido que se haya almacenado previamente en caché.
Smashing Magazine es uno de los grandes nombres de la industria web, que publica contenido editorial y siempre está al tanto de las tendencias digitales. En el campo de las aplicaciones web progresivas, también están abogando por ello y han invertido en esta tecnología.
Para proporcionar una experiencia agradable para los usuarios, incluso cuando no tienen conectividad a Internet, Smashing Magazine permite que la aplicación recupere y almacene en caché datos para que puedan seguir navegando por la aplicación en esta situación. En el ejemplo anterior, cargamos un artículo y, justo después, nos desconectamos (modo avión para estar seguros), e incluso después de actualizar la página, el artículo seguía disponible para leer.
El equipo de desarrollo también pensó en la situación en la que el usuario no había almacenado en caché una página, pero hizo clic en un enlace y lo abrió. Con el objetivo de ofrecer la experiencia de aplicación perfecta, crearon una página para informar al usuario qué está sucediendo y cómo funciona la aplicación en circunstancias fuera de línea.
Fresco
Una vez más, la idea es poner al usuario en primer lugar y ofrecer una gran experiencia como en las aplicaciones nativas. Ofrecer contenido actualizado es una característica rudimentaria de las PWA, que es posible gracias a los Service Workers.
Una vez que el script del service worker se ha almacenado en caché, no solo tiene la capacidad de almacenar contenido para su uso sin conexión, sino también de activar sincronizaciones en segundo plano para descargar datos nuevos y actualizados. Luego, cuando el usuario tiene una conexión a Internet estable, se puede utilizar el navegador para recopilar y almacenar más información.
Filpkart es una empresa de comercio electrónico con sede en Bangalore, India. Están a la vanguardia del desarrollo de PWA y la utilizan para mejorar los KPI de su negocio, como la conversión, el tiempo dedicado a la página y la lealtad del usuario.
En la aplicación de Flipkart, podemos percibir que parte del contenido se está cargando mientras se navega por la aplicación. Como la aplicación solo carga el contenido que se solicita, 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.
Progresiva
En principio, las aplicaciones web progresivas evolucionan a medida que el usuario interactúa con ellas. Esto significa que, independientemente de si el usuario navega por la aplicación con Chrome, Safari o cualquier otro navegador, la PWA mejorará continuamente y, además, también podrá aprovechar las funciones disponibles en el dispositivo y el navegador del usuario.
Para mostrar esta característica, abrí la aplicación de Flipkart en el navegador Chrome en un dispositivo Android. Cuando se carga la página, podemos percibir instantáneamente cómo se ha adaptado la interfaz de usuario del navegador, cambiando los colores para que coincidan con la PWA. Este es un muy buen ejemplo de cómo las aplicaciones pueden mejorar constantemente al responder a los recursos disponibles.
También en este ejemplo, aprovechan las funciones del dispositivo, como la vibración, para llamar la atención del usuario sobre acciones específicas que desean alentar, invitándolo a agregar la aplicación a la pantalla de inicio en este caso. Más allá de eso, también se ejecutan las operaciones en segundo plano del teléfono, con el fin de recopilar datos de uso para brindar una mejor experiencia a los usuarios.
Responsive
Para desafiar el diseño perfecto de píxeles de las aplicaciones nativas, las Progressive Web Apps son extremadamente responsivas, lo que significa que el diseño de la aplicación se adaptará según el factor de forma (móvil, tableta y computadora de escritorio) y el tamaño de la pantalla, que puede variar mucho, incluso solo en teléfonos inteligentes.
El comportamiento de la capacidad de respuesta puede variar según cómo se construya la aplicación. Puede ser la arquitectura de bloques, a la que nos referimos en una de las publicaciones del blog de esta serie, donde los bloques se organizan y multiplican según la pantalla, o bloques individuales que cambian internamente y responden a los cambios de tamaño.
Walmart (Estados Unidos) es un minorista multinacional, cuyo objetivo principal es ayudar a las personas a ahorrar cuando compran. Ahora, en su Progressive Web App, están ofreciendo a los clientes la experiencia de compra en línea perfecta, independientemente de dónde se encuentren y qué dispositivo estén usando.
La página web de Walmart es un gran ejemplo de cómo un sitio web puede adaptarse a sí mismo, cambiando el diseño según las capacidades del dispositivo del usuario. Por ejemplo, en la versión móvil, que se parece mucho a la interfaz de una aplicación, la mayoría de los botones de navegación se han movido al menú, al que ahora se puede acceder a través de un botón en la esquina superior. Además, se ha distribuido parte de la información y los anuncios internos, por lo que parece más nativo para los usuarios. Pasando a los otros dos ejemplos, ahora son mucho más similares, ya que la proporción de la pantalla no cambia tanto, por lo que solo se multiplican y redimensionan algunos de los bloques.
También en este caso, es interesante prestar atención al banner superior en iPad y Desktop. Mientras que en iPad invita al usuario a instalar la aplicación nativa, en el escritorio se destaca alguna promoción específica. Este es un ejemplo de cómo las estrategias de marketing se pueden adaptar a diferentes plataformas, y cómo el móvil es una herramienta importante para convertir a los usuarios en clientes premium.
Navegación tipo aplicación
La arquitectura de una PWA es otro factor crucial para su funcionalidad mejorada, todo ello siguiendo el modelo que enmarca la aplicación. Esta estructura minimiza las solicitudes de páginas, ya que separa las partes de la aplicación que suelen ser constantes, como el menú, el encabezado y el diseño de las páginas (que en conjunto se denominan App Shell), de las partes que se actualizan constantemente, normalmente el contenido.
En términos prácticos, las Progressive Web Apps imitan la navegación de las aplicaciones nativas para ofrecer interacciones fluidas y similares a las de una aplicación. Para los usuarios recurrentes, esto significa que los elementos clave de la aplicación se mostrarán de inmediato, ya que ya están almacenados en caché, lo que mejora el rendimiento, y el resto del contenido se recuperará durante el uso.
Siguiendo el caso de Walmart, el equipo de diseño y desarrollo que creó la aplicación realmente logró que su sitio web se sintiera como una aplicación. En cuanto a los elementos del shell de la aplicación, el encabezado se ha utilizado no solo como un recurso gráfico, sino también para mantener la barra de búsqueda y otros botones que son relevantes para los usuarios. Como se mencionó anteriormente, ahora el menú contiene la mayoría de los botones de navegación del sitio web y se ha dividido en secciones para que siga siendo fácil de usar. Las páginas también siguen diseños de bloques simples, mostrando el contenido de forma clara y permitiendo, en conjunto, que la aplicación se cargue realmente rápido.
Descubrible
Quizás una de las mayores ventajas sobre las aplicaciones nativas es la característica fundamental de la capacidad de descubrimiento de las Progressive Web Apps. Naturalmente, como están construidas sobre páginas web, es posible aprovechar el poder de los motores de búsqueda para indexar y distribuir la aplicación en los resultados de búsqueda.
Desde un punto de vista de marketing, esto también significa que algunas técnicas de optimización de motores de búsqueda ahora se pueden aplicar a las aplicaciones. Esto aporta una luz completamente nueva a la adquisición de usuarios para aplicaciones y nuevas oportunidades para combinar con estrategias de ASO (App Store Optimization).
The Washington Post, fundado en 1877, es uno de los editores de medios más tradicionales de los Estados Unidos. Hoy, la empresa está prosperando en el campo de las Progressive Web App para aumentar su alcance y participación digital.
En el ejemplo anterior tenemos un artículo de The Washington Post que ha sido indexado en Google, incluso con funciones enriquecidas como miniaturas de detalles de texto y enlaces a su aplicación web progresiva. Para muchas empresas que producen contenido original, puede ser una excelente manera de generar clientes potenciales y comenzar a crear conexiones con usuarios que de otro modo no habrían usado la aplicación.
Enlazable
Una cosa que podemos decir con certeza sobre las aplicaciones web progresivas es que brindan muchas herramientas para llegar a nuevos usuarios potenciales. Ahora, cuando alguien quiere compartir la aplicación, o incluso una página específica dentro de la aplicación, simplemente puede enviar la URL y la otra persona puede abrirla fácilmente sin la necesidad de instalarla o ser enviada a una página de destino general.
Este es el ejemplo perfecto de una característica que se ha extendido ampliamente en las tecnologías web y que ahora está potenciando las PWA. En el ejemplo anterior con la aplicación del Washington Post, el usuario puede simplemente utilizar las opciones nativas para compartir, copiar/pegar donde quiera o incluso marcar la página en sus favoritos.
Segura
La seguridad web es un tema de gran importancia en la actualidad y, dado que las Progressive Web Apps se basan en páginas web, existen algunos requisitos que deben cumplir. Para cumplir con las demandas de seguridad necesarias para las aplicaciones, los desarrolladores deben servir las PWA en un HTTP seguro o HTTPS, lo que permite el cifrado del tránsito de datos.
Incluso si la información del sitio web no es sensible, la privacidad y la seguridad del usuario son las principales preocupaciones al pensar en esta característica. Además, con las nuevas especificaciones realizadas por Apple, para las aplicaciones iOS y servicios como los pagos en línea que ya requieren conexiones HTTPS, implementar esta característica está empezando a ser una obviedad.
En la imagen superior podemos ver el mensaje que indica que se trata de 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 creó la Validación de Papel, que les permite mostrar el nombre de la empresa en la barra de navegación, en lugar de la URL predeterminada de la página.
Instalable
Algunos pueden considerar el proceso de instalación en aplicaciones nativas como un aspecto negativo, ya que requiere una mayor participación del lado del usuario. Ahora, las aplicaciones web progresivas están dando la vuelta a esta situación y haciendo que todo el proceso sea mucho más simple, incitando a los usuarios a agregar la aplicación a la pantalla de inicio de su teléfono inteligente o tableta, lo que reduce la fricción original.
Con el manifiesto de la aplicación web, los desarrolladores pueden proporcionar a los navegadores un “paquete de instalación”, que incluye recursos gráficos, como un icono y una pantalla de presentación, así como información sobre cómo debe comportarse la aplicación cuando se inicia. Una vez que se ha instalado la aplicación, asume una importancia de primer nivel, mejorando la experiencia general.
La misión de Product Hunt es permitir que los usuarios compartan y descubran nuevos productos. Ahora, con una PWA, el sitio web ofrece una experiencia perfecta como en su aplicación, lo que ayuda a la comunidad a ser más activa y comprometida.
Product Hunt, como pionero por naturaleza, ya comenzó a aprovechar esta característica y a permitir a los usuarios instalar su página web en la pantalla de inicio de su teléfono inteligente. La instalación se puede realizar con el mensaje de solicitud de instalación o desde el botón Opciones del navegador, ambos son simples y rápidos para los usuarios.
Además de los beneficios obvios de estar presente en el trampolín del dispositivo, una vez instalada la PWA, mejora progresivamente, perdiendo la interfaz de usuario del navegador, lo que permite que los service worker respondan de manera más eficiente y mejorando la experiencia general del usuario. Al reducir la fricción del proceso de instalación que se enfrenta en las tiendas de aplicaciones, se vuelve más fácil volver a involucrar a los usuarios y luego convertirlos en clientes o usuarios leales.
Re-engageable
Otra característica fundamental de las aplicaciones web progresivas son sus funciones de participación. Anteriormente solo disponibles para aplicaciones nativas, los desarrolladores ahora pueden habilitar notificaciones push para PWA, que funcionan como una tarea en segundo plano para el trabajador de servicios. Actualmente, las notificaciones push de PWA son compatibles con Chrome, Firefox, Opera, Safari en el escritorio, pero no en el móvil. Las aplicaciones que ya implementaron esta función percibieron un aumento del 72% en el tiempo empleado y las visitas repetidas aumentaron más del 50%.
Además de eso, algunas interacciones como el cambio de tareas de nivel superior y la capacidad de ingresar a la aplicación con un solo toque desde cualquier lugar de la web hacen que los usuarios tengan más probabilidades de usar la aplicación de manera constante. Esta es una buena noticia para varias empresas y comprender cómo jugar con estas mejoras puede cambiar las reglas del juego.
Nuevamente, Product Hunt está utilizando las características de PWA a su favor, el ejemplo anterior muestra las notificaciones push web. Cuando los usuarios han estado en la aplicación durante un tiempo, se les solicita que permitan las notificaciones push en la aplicación web progresiva, esto activa el service worker que, ahora, puede enviar notificaciones push para los usuarios, no solo cuando están en la aplicación, sino también cuando el teléfono está en reposo o el usuario está en diferentes aplicaciones.
Al unir todas estas piezas y ponerlas en perspectiva, lo que las aplicaciones web progresivas realmente aportan son aplicaciones web radicalmente mejoradas que ofrecen la experiencia perfecta para los usuarios. Por lo tanto, la confiabilidad, la velocidad y el compromiso son los puntos principales de esta metodología.
Como pudimos ver, los casos de uso de las aplicaciones web progresivas son bastante diversos y, seguramente, a medida que más de nuestros clientes adopten esta tecnología, seremos testigos del desarrollo de muchos más ejemplos sorprendentes. ¡Solo podemos decir que estamos emocionados y con los ojos abiertos para continuar creando soluciones!