Qué son las Progressive Web Apps

| 2016-09-22 | No hay comentarios »

Una aplicación web progresiva o PWA (Progressive Web Apps ) usa capacidades web modernas para ofrecer una experiencias para usuario similar a la de una aplicación móvil.

Screen-Shot-2016-07-21-at-9.48.28-PM-600x351

La idea que transmite esta definición es que los objetivos que debemos buscar al crear una PWA son:

  • Que tenga el mayor rendimiento posible en móviles y que cargue de manera casi instantánea
  • Una buena interfaz que se parezca lo máximo posible a una nativa
  • La posibilidad de trabajar sin conexión
  • Poder enviar notificaciones a los usuarios, como una app nativa

Tecnologías que aprovechan las PWA

Las PWAs se basan en unos conceptos bastante simples:

  • Responsive Web Design, animaciones CSS y frameworks específicos para crear interfaces móviles con aspecto de nativas
  • Service Workers
  • App Shell
  • Manifiesto de aplicación

Service Workers

Los Service workers son una tecnología muy interesante y a la vez bastante compleja que nos permite ejecutar servicios en segundo plano en los navegadores.

Van más allá de lo que ofrece un Web Worker. Éstos últimos nos permiten ejecutar código pesado en segundo plano (en un subproceso dedicado) y comunicarnos con ellos, de modo que una o varias tareas largas no bloqueen la interfaz de usuario. Pero los Service Workers son más potentes y complejos, puesto que pueden ejecutarse de manera independiente a la aplicación (es decir, estar en ejecución aunque la página de nuestra app web esté cerrada) y ofrecen capacidades avanzadas como la intercepción de las comunicaciones, el cacheado de información, la descarga en segundo plano de contenidos, el trabajo sin conexión o la posibilidad de enviar notificaciones.

En realidad para algunas cosas no es necesario utilizar un Service Worker. Por ejemplo, es posible crear aplicaciones web que funcionen off-line (sin conexión) utilizando la API de AppCache. El Service Worker nos puede dar más funcionalidad, sobre todo si necesitamos tomar decisiones a la hora de cachear la información y no solo asegurar que se encuentra almacenada, pero no son estrictamente necesarios. Es decir, para crear una PWA no es necesario estrictamente usar Service Workers salvo que requiramos ciertas funcionalidades avanzadas.

En el momento de escribir esto los únicos navegadores que permiten el uso de Service Workers son Chrome (el promotor de los mismos) y Firefox. En el caso que nos ocupa, los móviles, el único navegador móvil que ofrece soporte para esta tecnología es Chrome 51 o posterior en Android. Si queremos que la PWA funcione también en iOS, Windows Phone o teléfonos Android que no sean muy recientes, no estamos de suerte.

App Shell

App Shell no es una tecnología, sino un modelo o patrón a la hora de crear las aplicaciones. La idea es muy sencilla: separar la aplicación entre funcionalidad y contenido y cargarlos por separado.

Lo cierto es que la mayor parte de las aplicaciones de tipo Single Page (SPAs) ya suelen usar una u otra forma de hacer eso.

Lo suyo es tener, por un lado, la aplicación en sí cacheada para uso off-line (con Service Workers o no) de modo que cargue a toda velocidad, y luego el contenido (los datos) que cargue por otro lado, bien de una caché inicial también y luego se actualicen, o directamente desde la web si hay conexión.

Esto, bien realizado, hace que la percepción que tiene el usuario de la velocidad de carga de la app sea mayor. Parece que carga mucho más rápido porque al cargar el “shell” antes de nada y desde una caché, el usuario verá la app enseguida.

En mi opinión no es más que una “buzzword” para algo que cualquier programador preocupado por el rendimiento y la usabilidad ya debería estar haciendo. Pero no está mal que nos lo recuerden y nos “fuercen” a ello si queremos que nuestra aplicación web se pueda considerar “progresiva”.

Manifiesto de aplicación

Como comentaba al principio, desde los primeros smartphones como hoy los conocemos, siempre ha sido posible anclar al inicio una página web desde el navegador para luego poder ir directamente a ella. Para controlar el aspecto que tendrá el icono que los usuarios van a anclar es posible utilizar diversas técnicas dependiendo del navegador y el sistema operativo. Así, en iOS o Windows Phone eso se controla a través de unas cabeceras de tipo “meta” que podemos añadir a la página principal de la aplicación web. En el caso de Android y Chrome se utiliza un archivo llamado “Manifiesto” cuyo nombre es manifest.json (que funciona hace años, desde la versión 38 de Chrome en 2014).

Hace poco Google ha hecho que cuando se añade una aplicación al menú de inicio de Android salga un banner de instalación como el de una aplicación real, todo ello conducente a que la experiencia cada vez sea más parecida a la de las aplicaciones nativas. Pero no deja de ser una cuestión cosmética.

Esto, nuevamente, solo funciona con Chrome en Android, así que no sirve de mucho en otros sistemas, aunque todos tienen algo similar para definir el aspecto de los accesos directos.

Lenguaje y tecnología para hacer Progressive Web Apps

El lenguaje para hacer todo esto es Javascript, el lenguaje de la web. No necesitas nada más. Ni tan siquiera un framework o nada parecido, aunque librerías como es el caso de Polymer, Angular o React facilitarán algunas de las tareas.

De todos modos, cuando hablamos de tecnología nos tenemos que detener a explicar alguna cosa sobre uno de los actores principales de las Progressive Web Apps, el service worker.

Acerca del autor: Rodrigo Paszniuk

Ingeniero Informático, amante de la tecnología, la música, el ciclismo y aprender cosas nuevas.