Progressive Web Apps

Hace más de 3 años que en este blog vimos qué eran las Web Apps. La tecnología ha mejorado mucho desde entonces y Google ha añadido un adjetivo a las web apps que usan estas mejoras tecnológicas: Progressive. Las Progressive Web Apps o PWA son web apps que se caracterizan por mejorar la experiencia de usuario en los dispositivos móviles. Es decir, pese a ser webs intentan que la experiencia de usuario sea igual de buena que en una app nativa. Y todo esto gracias a un conjunto de nuevas tecnologías web, Web APIs y la aplicación de nuevos conceptos en el diseño de webs para dispositivos móviles.

Progressive Web Apps, ¿qué beneficios nos aportan?

Las Progressive Web Apps buscan:

1. Mejorar la velocidad de carga.
2. Mejorar el engagement (fidelización) del usuario.
3. Mejorar la conversión.

Son 3 ventajas de las apps nativas y que estas nuevas tecnologías pretenden incorporar a las web apps. Con estos tres objetivos se han desarrollado una serie de tecnologías enfocadas a eliminar las barreras que actualmente tienen las webs adaptadas a dispositivos móviles.

Las PWA se caracterizan por:

• Progresivas: se adaptan al navegador con el que se está accediendo.
• Carga instantánea: estas webs se cargan rápidamente, independientemente del tipo de conexión a Internet. Google dice que las Progressive Web Apps se cargan en menos de un segundo, aunque mi experiencia no ha sido tan espectacular.
• Rapidez: velocidad y suavidad en las transiciones, con el scroll y durante la navegación. Pero hay que tener presente que esto dependerá del navegador que se esté utilizando.
• Seguridad: utilizan el protocolo https.
• Notificaciones Push: sólo si se usa el navegador Chrome, se pueden enviar notificaciones push a los usuarios de las wep apps. Esta característica es la que les permite venderse como que son apps que permiten el “engagement”.
• Responsive: se adaptan a cualquier tipo de dispositivo móvil.
• Icono: se puede añadir un icono -de igual manera que con las apps nativas- en la pantalla de tu móvil. De momento no funciona en iOS. Aquí puedes ver un ejemplo del funcionamiento… ¿no te recuerda a los smart app banners?
• Independientes de la conexión: funcionan con Internet lento o, incluso, sin conexión… siempre y cuando previamente se haya guardado la información en el caché del móvil.
• Contenido siempre actualizado: gracias a los procesos en background el contenido se mantiene actualizado. Estos procesos aprovechan los momentos que hay conexión para actualizar los contenidos.
• Indexables como apps: según W3C las Progressive Web Apps son consideradas “apps” para los buscadores.
• Linkables: al tratarse de páginas web pueden enlazarse fácilmente a través de su URL y no es necesario que se descarguen de una tienda de apps.

Si, además, utilizamos en las WPA el “One tap sign in” (Credentials API y Web Payments API) la experiencia de compra de productos desde las web apps mejorará notablemente.

“Curioso” que la WPA de Aliexpress te incite a que te descargues al app nativa

Buena parte de estas características de las web apps son gracias al Service Worker y al App Shell. Veamos qué son estos dos conceptos…

¿Qué es el Service Worker?

Navegación offline, actualizaciones periódicas en background, notificaciones push… funcionalidades que vimos que eran una exclusiva de las aplicaciones móviles nativas ya están disponibles en las web apps gracias a Service Worker.

No nos vamos a poner muy técnicos pero podemos decir que Service Worker es un script que corre en background en tu navegador web de manera independiente de la página web y que permite que se realicen tareas que no requieren la interacción del usuario. Procesos que pasan sin que tú te enteres y que permiten mejorar tu experiencia de uso.

¿Y qué es el App Shell?

Siguiendo la idea de “progressive”, las web apps envían en primer lugar la información básica de la estructura de la app y, después, el contenido. Esta estructura básica del interfaz del usuario es lo que se conoce como App Shell. Esto permite guardar en caché de manera separada la interfaz de usuario del contenido de la web app y, por tanto, permitir la carga rápida cuando el usuario accede de nuevo a la web.

¿Y tú qué opinas?

¿Crees que las WPA pueden plantar cara a las apps nativas?. ¿Por qué Google insiste en llevar al usuario a la web?. ¡Deja tus comentarios en el pie del post!.