Las Progressive Web Apps o Aplicaciones Web Progresivas llegaron de la mano de Google y podrían considerarse como un conjunto de herramientas que permiten obtener en los terminales móviles una experiencia lo más similar posible a una aplicación web nativa. Es decir, son el medio que permite convertir una web en una aplicación móvil, haciéndola accesible para diferentes soportes y facilitando que todos los usuarios puedan tener una experiencia lo más completa posible desde sus terminales móviles.
Estas Progressive Web Apps vienen utilizándose desde hace un tiempo por grandes empresas como Google, Twitter o Facebook, pero hoy en día están al alcance de cualquier programador que busque una de las mejores y más fáciles maneras de adaptar su sitio web a los dispositivos móviles.
Características de las Progressive Web Apps
Dentro de Progressive Web Apps, podemos destacar una serie de herramientas cuyo punto en común es el hecho de ser funcionalidades asociadas con las aplicaciones para móviles y muy similares a las de éstas.
Una de las más relevantes e interesantes características son las notificaciones push, ya que ofrecen la posibilidad de interactuar con el usuario a través del envío de notificaciones al dispositivo. Antes, era una funcionalidad exclusiva de las app móviles, pero las Progressive Web Apps permiten que puedan enviarse sin la necesidad de tener una app para ello o de que esté abierta para recibirlas, siendo el propio navegador el que las envía al usuario.
Otro punto importante es el acceso offline, que permite que la Progressive Web App siga funcionando aun sin disponer de Internet. Existe una pequeña salvedad, ya que algunas de las funcionalidades no estarán disponibles offline, pero una vez que el dispositivo u ordenador recobre la conexión, la app sincronizará los datos que se han generado cuando no estaba conectado a Internet.
Las Progressive Web Apps tienen la capacidad de hacer un cacheo de las páginas de modo diferente, así en los futuros accesos arrancan de manera mucho más rápida. Además, pueden adelantarse al usuario, accediendo a recursos que seguramente se requieran posteriormente, así los cachea y los sirve a mayor velocidad en el momento en que se necesiten.
Otra característica es que al igual que ocurre con las app para dispositivos, las Progressive Web Apps son capaces de instalarse en la pantalla de inicio del móvil, para un acceso más rápido y directo. Al arrancarse, muestran al usuario una pantalla inicial (pantalla de splash), donde aparece una imagen que se mostrará mientras se carga la aplicación, como por ejemplo el logo de la web. Por otra parte, utilizan el sistema de storage o almacenamiento de datos del propio navegador para llevar a cabo diferente tareas.
Todas estas características y funcionalidades, además del diseño y experiencia del usuario, guardan gran similitud a las nativas de los teléfonos y presentan la ventaja de que no hay que instalar nada; basta con que el usuario acceda a las Progressive Web Apps, como lo haría con cualquier otra web.
El lenguaje en las Progressive Web Apps
Para poder realizar todas estas funciones, solamente necesitaremos emplear JavaScript como lenguaje, echando mano en ocasiones de librerías como Polymer, Angular o React, para facilitar algunas de las tareas más complejas.
En empleo de Polymer, por ejemplo, facilita mucho la implementación de muchas de las características de las Progressive Web Apps, dado su amplio catálogo de componentes. Si te interesa, en este mismo blog tienes numerosos artículos de Polymer.
Tecnología en las Progressive Web Apps
Sobre la tecnología que debemos emplear, cabe detenerse en el Service Worker, que facilita muchas de las características de las Progressive Web Apps, ya que nos permite acceder offline a una web y recibir notificaciones aun cuando el usuario no esté conectado.
Se trata de archivos de código Javascript referenciados en la página que se instalan en el navegador y pueden funcionar aun cuando el usuario no esté accediendo a nuestra página. Por tanto, pueden acceder al sistema de caché, mostrando contenido aunque el usuario no esté conectado, guardar información o enviar notificaciones, entre otras opciones. Existe la posibilidad de configurar el Service Worker según unas necesidades específicas, para que éste se genere automáticamente mediante el uso de templates.
Si quieres seguir profundizando en el tema, la zona de desarrolladores de Google contiene los mejores recursos para trabajar con Progressive Web Apps.