Aplicaciones Web Progresivas PWAs: ¿el futuro? o ¿debemos apurarnos?

Sebastian Vega

Sebastian Vega

Compartir

Aplicaciones Web Progresivas PWAs: ¿el futuro? o ¿debemos apurarnos?

Desde hace mucho mucho tiempo, cuando era joven y estaba en la universidad, siempre he escuchado la promesa de que — tanto en escritorio, como en móviles — la aplicaciones web reemplazarían a las nativas, y que, finalmente todo convergería en la web, lo cual sería genial considerando las ventajas y lo increíble que es: acceso y alcance multiplataforma, no se requieren instalaciones, actualizaciones transparentes, fácil distribución, sólo una base de código, no es una “tienda” que le pertenezca a alguien, etc.

Personalmente nunca creí mucho, al menos, que en el corto plazo esto fuera posible. La diferencia entre una aplicación nativa y una aplicación web eran enormes.

En todo este tiempo, han habido buenas ideas como el diseño web responsive y mobile first, pero que, lamentablemente no fueron tan bien ejecutadas. En teoría, adaptar las páginas a distintos dispositivos es un gran avance en esta línea y no es tan difícil de hacer. El problema es que en la práctica muchos sitios responsive tienen serios problemas de performance y mala experiencia de usuario, que finalmente es lo más importante en una experiencia móvil.

Por el lado de tener una sola base de código y sus ventajas también se avanzó con frameworks — algunos muy malos — para aplicaciones híbridas y nativas con lenguajes como javascript y typescript que sin proponer soluciones completamente web; en términos de ciclo de vida de desarrollo tienden a intersectarse. Frameworks como react native, nativescript, ionic 2, xamarin ofrecen experiencias nativas utilizando las mismas tecnologías utilizadas para desarrollo web.

Pero más allá de los frameworks, que por cierto, siguen mejorando y los hay muy buenos; hay algo que especialmente me llama la atención en este momento, y es por lo que estoy escribiendo: las PWA, que si bien les falta aún, creo que al fin estamos cerca de saldar la deuda, incluso apegados a los estándares web… qué mejor que eso!.

Qué son las PWAs?

En 2015, la diseñadora Frances Berriman y el Ingeniero de Google Chrome Alex Russell, acuñaron el termino “Progressive Web Apps” para describir aplicaciones que aprovechan las nuevas características soportadas por los navegadores modernos, como service workers, apis nativas, web apps manifests, entre otros.

“These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins.“ — Alex Russel

Son aplicaciones web que usan las últimas tecnologías web y características de navegadores modernos, las cuales buscan experiencias que combinan lo mejor de la web y de las aplicaciones nativas.

Generalmente el foco de la conversación sobre PWA se da en el contexto de móviles y comparación con aplicaciones nativas, es importante tener en cuenta que no se reduce solo a eso, sino que afecta a la web como un todo, lo cual obviamente incluye experiencias de escritorio.

Nada de esto es tan nuevo en realidad. Muchas tecnologías o técnicas ya existían antes de acuñar el concepto — lo realmente importante es el apego a los estándares en múltiples plataformas, y cómo en este momento han sido respaldadas por gigantes de la industria como Google y Mozilla.

Hoy, los navegadores modernos son cada vez más completos y apegados a los estándares de la W3C, y soportan realmente muuuchas cosas entretenidas, por ejemplo pueden ver lo que les ofrece el suyo en https://whatwebcando.today/

Características de una PWA

Según Google Developers una PWA es:

Progresiva: funciona para todos los usuarios, sin importar la elección de navegador, porque está construida con mejora progresiva como principio central.
Adaptable: se adapta a cualquier factor de formulario, sea escritorio, móvil, tablet o lo que venga en el futuro.
Independiente de la conectividad: mejorada con service workers para trabajar sin conexión o con redes de mala calidad.
Estilo app: al usuario le parece una app con interacciones y navegación estilo app, porque está construida con modelo de shell de app.
Fresca: siempre actualizada gracias al proceso de actualización de service worker.
Segura: emitida vía HTTPS para evitar intromisiones y para garantizar que el contenido no se haya manipulado.
Descubrible: se puede identificar como “app” gracias al manifiesto W3C y al alcance de registro de service worker, lo que permite que los motores de búsqueda la encuentren.
Posibilidad de volver a interactuar: facilita la posibilidad de volver a interactuar a través de funciones como notificaciones push.
Instalable: les permite a los usuarios “conservar” las apps que les resultan más útiles en su pantalla principal sin la molestia de una tienda de app.
Vinculable : se puede compartir fácilmente vía URL, no requiere instalación compleja.

¿Por qué tenemos que hacer PWAs hoy?

Como dijimos anteriormente, una PWA ofrece una experiencia entre lo mejor de la web y las apps nativas, sin la necesidad de desarrollar y mantener una aplicación web y multiples apps móviles. Si lo anterior no es suficiente por si solo, vale decir que, el 2017, en el mundo hay 2.32 Billones de personas que tienen un smarthphone, y si queremos llegar a esas personas es fundamental mejorar las experiencias móviles que ofrecemos.

Casos PWAs en producción

Google ha hecho unos estudios de caso acerca del uso de PWAs en producción, algunos con resultados impresionantes:

Twitter. 328 millones de usuarios activos al mes usan twitter, con un 80% de uso móvil. Con la PWA de Twitter Lite, se obtuvieron los siguientes resultados en la web móvil:

  • 65% de incremento en páginas por sesión.
  • 75% de incremento en tweets enviados.
  • 20% menos en tasa de rebote.
Twitter Lite is now the fastest, least expensive, and most reliable way to use Twitter. The web app rivals the performance of our native apps but requires less than 3% of the device storage space compared to Twitter for Android. — Nicolas Gallagher, the Engineering Lead for Twitter Lite

Alibaba. Líder mundial en negocios B2B. Actualizaron su página a una PWA con los siguientes resultados en la web móvil:

  • 76% de aumento en la tasa de conversión!!
  • 14% de aumento en usuarios activos en iOS; 30% de aumento en Android.
  • Se cuadruplicó la tasa de interacción del botón “Agregar a Homescreen”

The Weather Channel. Lanza su PWA en 178 paises y 62 idiomas, con los siguientes resultados:

  • 80% de mejora en el tiempo de carga de la página.
  • Agrega notificaciones push para usuarios móviles.
  • En 3 meses, aproximadamente 1 millón de personas activaron las notificaciones push.

Santa Tracker. La primera PWA que probé, al menos siendo consciente de ello. Es un juego, recomiendo instalarlo en sus teléfonos, se puede agregar como aplicación, jugar offline e incluso utiliza características propias del smathphone. El caso y más detalles interesantes en el siguiente link.

Duolingo. No se mucho del caso, pero me acabo de enterar que es una PWA y nunca me di cuenta usándola.

Más aplicaciones PWA de ejemplo en pwa.rocks!.

Conclusiones

No se realmente si las PWA terminarán reemplazando aplicaciones nativas, no creo que lo hagan completamente, ni tan rápido. Lo que sí es seguro, es que tienen el potencial para hacer grandes cambios, y debemos aprovecharlo, pues está en nuestras manos… literalmente. En {apside} nos tomamos muy en serio esta responsabilidad, y ya estamos con las manos en el código. Luego — en otro post — vemos casos más prácticos.

Toda página web hoy puede convertirse en una PWA, y debería, o al menos apuntar a eso incorporando progresivamente algunas características. ¿Qué estamos esperando?.

Algunos enlaces recomendados: