Lo que necesitas saber sobre progressive Web Applications y el offline first web development.


En el último año se están empezando a escuchar dudas por parte de nuestros clientes sobre qué son las Progressive Web Applications o PWA y qué diferencia hay con las aplicaciones instalables desde un store (nativas o híbridas).

Lo que se denomina una PWA (Progressive Web App), no es más que una aplicación web de navegador (web app) o incluso un sitio web, que hace uso de tecnologías ya disponibles que nos permiten dotarla de una UX mucho más próxima a la que obtendríamos con una aplicación instalable en nuestro ordenador o dispositivo móvil. Incluso podemos acceder a ellas o utilizarlas sin conexión a Internet.

Y esto es muy importante. Lo es, porque la barrera de instalación de aplicaciones en el dispositivo del usuario es cada vez más alta. Y la dificultad para retener esas instalaciones también lo es.

En el 2015, ComScore publicó un informe en el que se recogía que el 78% de los usuarios solo utilizaba realmente 3 apps de las instaladas en su dispositivo móvil. También mostraba que más efectivo captar audiencias a través de una webapp que a través de las instalaciones de sus apps y que las primeras crecen mucho más rápidamente.

Si pensamos también en la facilidad de publicación de una webapp en comparación de una aplicación que se instale a través de un store, nos sobran los argumentos para adoptar esta estrategia a la hora de plantear nuestro producto.

Actualmente, el valor que buscamos entregar al plantear nuestra aplicación como una PWA, actualmente es el siguiente:

  1. La mejor experiencia de uso sin conexión a Internet.
  2. Notificaciones
  3. Funcionamiento en segundo plano, sin tener el navegador abierto.
  4. Progressive enhancement
  5. UI (y su UX) lo más próxima a una aplicación instalable

Todo esto se puede conseguir con tecnología actual que ya está disponible para desarrolladores web y que son compatibles actualmente con los navegadores más relevantes que existen en la actualidad. Existen tecnologías muy interesantes que están en proceso de poderse utilizar también en dichos navegadores como por ejemplo: Web Bluetooth, NFC, Sensor de luz, Sensor de proximidad, Acelerómetro y Giroscopio.

Como se puede intuir, en unos años las aplicaciones web en sí podrán cubrir desde el navegador prácticamente la gran mayoría de problemáticas que resuelven las aplicaciones instalables en la actualidad. Bien es cierto que existen límites también que deben desaparecer para que podamos pensar en que las aplicaciones web puedan sustituir casi por completo a las aplicaciones nativas.

Realmente la parte más importante de una Progressive web application es la de plantear el desarrollo de nuestra webapp con una estrategia de offline first web development.

Con esta estrategia de desarrollo de aplicaciones web y sitios web, nos centramos en que la UX de nuestra aplicación web sea lo mejor posible sin disponer de conexión a Internet. Esto también mejorará notablemente la experiencia de uso también, cuando el usuario tenga conexión.

Esta estrategia plantea pensar en las aplicaciones desde otra perspectiva. Simplificando un poco, lo que se busca es que la primera vez que el usuario acceda a una aplicación web, esta se guarde en el equipo o móvil del usuario. La próxima vez que vuelva a abrir en el navegador o con un acceso directo en la pantalla de inicio, en lugar de conectarse a Internet, la aplicación arrancará como si “estuviese instalada” en el móvil u ordenador del usuario.

Esto implica técnicamente el diseñar estrategia de caché de la aplicación con la capacidad de actualizarse cuando una nueva versión se suba a Internet.

Otro requisito de trabajar offline es el de precisamente, no interrumpir el trabajo del usuario cuando este no disponga de conexión y tener capacidad de sincronizarse cuando la conexión esté disponible de nuevo. De hecho, al plantear una estrategia de offline-first, la aplicación debería funcionar perfectamente sin estar conectada.

Otro pilar importante es el trabajo en segundo plano. Gracias a una tecnología llamada Service Workers, los desarrolladores web podemos hacer funcionar aplicaciones web incluso si esta o el sitio web no están abiertos en el navegador web.

Esto nos permite realizar operaciones avanzadas como en una aplicación instalada en el equipo o dispositivo móvil: comunicarnos con el servidor, gestionar notificaciones push y mostrarlas al usuario…

Este diseño deberá tener en cuenta la implementación de un Progressive enhancement, mediante el cual vamos comprobando los límites del dispositivo del usuario para ir añadiendo características. Por ejemplo: si la conexión está disponible o no, si hay soporte para notificaciones, si hay soporte para Bluetooth… la idea es bastante básica y no es nueva, pero cuidar esto es un punto crítico a la hora de plantear una Progressive web application.

Estas tecnologías hacen también que empecemos a ver cambios en el diseño de UI de las aplicaciones que utilizamos a diario y también nos planteemos aplicarlos nosotros.

Algo a lo que ya empezamos a estar acostumbrados es a “instalar un icono” del sitio/app web en la pantalla de inicio del dispositivo. De esta forma la aplicación o sitio web arrancará sin necesidad de abrir el navegador, con look and feel nativo.

Ejemplo de App Banner

Otro cambio significativo es el App Shell. A nivel básico, con App Shell conseguimos que el usuario al arrancar la web obtenga inmediatamente el layout y toda la interfaz de la aplicación, sin un preloader o una página en blanco en el navegador y a medida que se va obteniendo la información se va dibujando el resto de la información.

De esta forma el usuario sabe exactamente lo que está cargando y donde va a aparecer antes de que lo haga, aprendiendo nuestra interfaz al mismo tiempo.

Ejemplo de App Shell

Ejemplo de App Shell de Linkedin

Combinar esta técnica de diseño con una buena estratega de desarrollo offline-first y las técnicas de desarrollo que hemos visto anteriormente, incrementarán notablemente la experiencia de uso y sentará las bases para ir implementando tecnologías más avanzadas que harán de nuestro sitio web, o aplicación web, un software muy potente que no necesitará instalarse por parte del usuario en sus dispositivos.

Escrito por Asier Marqués

Proyectos Open Source de Simettric que te harán sentir menos sucio cuando trabajes con WordPress

En el último año se están empezando a escuchar dudas por parte de nuestros clientes sobre qué son las Progressive Web Applications o PWA y qué diferencia hay con las aplicaciones instalables desde un store (nativas o híbridas). Lo que se denomina una PWA (Progressive Web App), no es más que una aplicación web de navegador […]

Introducción a GIT para no desarrolladores

En el último año se están empezando a escuchar dudas por parte de nuestros clientes sobre qué son las Progressive Web Applications o PWA y qué diferencia hay con las aplicaciones instalables desde un store (nativas o híbridas). Lo que se denomina una PWA (Progressive Web App), no es más que una aplicación web de navegador […]