martes, 14 de febrero de 2017

Aplicaciones Web Progresivas o Progressive Web Apps.


Progressive-web-apps

Contexto

Últimamente se habla mucho de las PWAs (Progressive Web Apps), pero ¿qué son? Antes de nada, contextualicemos. Estos últimos años se ha debatido ampliamente sobre qué tiene más futuro, las aplicaciones o la web.

Gracias al estudio del 2015 de Morgan Stanley Research hay datos (si bien demasiado dramáticos) que dicen que la web sobrevivirá. Es más, que es el futuro. Pero para seguir siendo relevante, Google y otros navegadores necesitan promocionar la navegación web desde el teléfono y mejorar todo lo posible la experiencia.

Una de esas tecnologías son las aplicaciones web progresivas. Las PWAs pretenden conseguir una experiencia veloz y semejante a la que el usuario pueda experimentar en una app. Buscan desdibujar los límites entre web y app, manteniendo las ventajas (y tráfico) de la web.

Este concepto, que inicialmente fue planteado para el iPhone del 2007 pero fracasó, a día de hoy puede implementarse con éxito usando el desarrollo híbrido de aplicaciones y alguna herramienta como Apache Cordova que permite convertir web móvil la app nativa.

Sin embargo, esto no es exactamente el concepto de las PWAs: estas deberían funcionar sobre el navegador de la misma manera que una app, sin necesidad de transvases.

¿Cómo funcionan?

Las PWAs están diseñadas para cargar de manera instantánea. Para lograr esto, el buscador necesita tener un script que se conoce como Service Worker. Este script se encargar de eliminar los pasos que normalmente se requerirían para acceder a determinada información desde la web.

Ya que las PWAs usan más parámetros, también consiguen una experiencia personalizada, basada en los intereses de usuario, y un diseño más cercano al de las apps.

Las PWAs guardan la web que se esté cargando en local y la ponen en una App Shell. Desde ahí solamente se subirá el contenido a medida que se vea necesario. Es el Service Worker el que se encarga de ir subiéndolo todo (CSS, imágenes, JavaScript) a medida que sea necesario. Ya que la mayoría de elementos necesarios para la página están almacenados localmente, la página cargará muy rápido.

Dado que no es preciso descargar nada, acceder a las PWAs es fácil. Además del acceso sin problemas desde el buscador se podrá entrar aun estando offline porque quedan los datos en caché.

Enfoque

Google, que lleva intentando propulsar este tipo de concepto desde hace años, ha publicado recientemente una lista de características, un punto de referencia, para crear PWAs. Además, han publicado una herramienta, Lighthouse, disponible como extensión para Chrome, que comprueba de manera automática si se cumplen la mayoría de los elementos del estándar. Los elementos básicos serían:
  • La web deberá funcionar sobre HTTPS
  • Las páginasdeberán ser responsivas tanto en para todo tipo de aparatos.
  • Al menos la página principal deberá cargar offline.
  • Deberán añadirse metadatos que permitan que el usuario ancle la página en su pantalla de inicio en el teléfono.
  • Carga veloz, incluso en 3G. Deberá conseguirse interactividad en <10s.
  • La web deberá funcionar en distintos buscadores (sugeridos como prueba Chrome, Firefox, Safari y Edge).
  • Las transiciones entre páginas deberán ser suaves y rápidas (incluso con conectividad mala).
  • Cada página deberá tener una URL
Además de esta lista básica, han compilado otra serie de requisitos que de convertirían la PWA en una PWA modelo. Esta lista, mucho más larga, incluye factores para mejorar el posicionamiento, la experiencia del usuario, el rendimiento, el almacenamiento y el sistema de notificaciones entre otros.

Conclusión

Las PWAs ofrecen muchas mejoras visibles, ¿podrían ser más que la buzzword del año y ser realmente el futuro? El tiempo dirá, pero mientras tanto, parece que vale la pena ponerse al día con ellas.

¡Comentadnos vuestras opiniones sobre el asunto!