> Manuales > Manual de Progressive Web Apps

Qué son las Progressive Web Apps, características y tecnologías para desarrollar este tipo de aplicaciones web.

Progressive Web Apps es un nuevo concepto que llega al mundo del desarrollo web de la mano de Google. Es algo que engloba varias cosas, como herramientas, tecnologías o simplemente la forma como las aplicaciones web se relacionan con los usuarios. Lo describiremos en el presente artículo.

Pero antes de comenzar, cabe decir que seguramente ya has experimentado las Progressive Web Apps anteriormente, aunque quizás sea algo a lo que no le habías puesto nombre todavía. Muchos de los grandes, como Google, Facebook, Twitter o Linked-in están usando herramientas de Progressive Web Apps en sus sitios web y tú también puedes hacerlo de una manera relativamente sencilla.

Qué características incluye el concepto de Progressive Web Apps

Podemos nombrar una serie de herramientas o características que están incluidas dentro de lo que se conoce como Progressive Web Apps. Verás que todas tienen un denominador común: ser funcionalidades asociadas con las apps para móviles, que hasta hace poco eran ajenas a la web.

Y es que, en resumen, las Progressive Web Apps son funcionalidades extendidas de las aplicaciones web, que permiten colocarlas a un nivel mucho más próximo de las aplicaciones móviles, o de escritorio. Es decir, son un pasaporte para convertir una web en una aplicación capaz de hacer cosas que antes estaban asociadas a programas y aplicaciones instalables en ordenadores o dispositivos.

Notificaciones push:
Para mi es una de las características más interesantes dentro de las Progressive Web Apps. La posibilidad de enviar notificaciones al usuario, ya sea a su móvil o al ordenador de escritorio, laptop, etc. Hasta ahora las notificaciones estaban reservadas prácticamente para las aplicaciones de móviles y hoy las Progressive Web Apps también son capaces de enviarlas. No necesitas una app y tampoco una aplicación. El propio navegador se encarga de enviarlas al usuario, incluso a pesar que la página de la aplicación no esté abierta.

Acceso offline:
Aunque tus usuarios se queden sin conexión a Internet, una Progressive Web App es capaz de seguir funcionando. Obviamente algunas de las funcionalidades no estarán disponibles, pero será capaz de sincronizar los datos una vez la conexión vuelva al ordenador o al dispositivo.

Cacheo, precacheo:
Son capaces de cachear las páginas de una manera distinta, permitiendo arrancar mucho más rápidamente en sucesivos accesos. Además son capaces de adelantarse al usuario y acceder a recursos, como páginas o imágenes, que se prevé van a requerirse más adelante, para cachearlos y servirlos más rápidamente cuando llegue el momento.

Instalación en la pantalla de inicio:
Son capaces de instalarse en la pantalla de inicio del móvil, igual que ocurre con las apps para dispositivos.

Pantallas de splash:
Cuando arrancan pueden mostrar una pantalla inicial al usuario, con el logotipo de la web o cualquier otra imagen, que se visualizará durante la carga de la aplicación.

Storage:
El uso del sistema de almacenamiento de datos del navegador para realizar tareas diversas, es otra de las características habituales de las PWA.

Como ves, estas capacidades, y otras que pueden englobarse en el conceto de Progressive Web App son todas muy similares a las que ya conoces de las apps nativas de los teléfonos. Solo que no tienes que instalar nada, simplemente se acceden como cualquier otra web. Obviamente, todo esto va unido a un diseño y experiencia de usuario que también se asemeja al de las apps para móviles.

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.

Nota: En mi caso he experimentado en el desarrollo de Progressive Web Apps en una aplicación Polymer y es realmente rápido el desarrollo porque en el catálogo de componentes de Polymer ya se encuentran varios para implementar de una manera rápida y cómoda muchas de estas características. Puedes aprenden en el Manual de Polymer y atento al próximo curso de desarrollo de apps con Polymer, donde explicaremos al detalle cómo realizar todas estas cosas.

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.

Qué es un Service Worker

Los service workers son los facilitadores de muchas de las asombrosas características de las Progressive Web Apps. Son los que permiten acceder offline a una web, así como recibir notificaciones aunque el usuario no esté visitando nuestra web en ese momento, por poner algunos ejemplos.

Básicamente son archivos de código Javascript referenciados en la página, igual que otros scripts que se puedan usar. Solo que los service workers se instalan en el navegador del usuario y son capaces de funcionar incluso cuando el usuario no tiene abierta nuestra página.

Esos Service Workers tienen acceso a la plataforma web (el navegador) y pueden hacer cosas como acceder a su sistema de caché, mostrar contenido aunque el usuario esté offline, guardar información en el sistema de almacenamiento, lanzar notificaciones, etc.

Tú mismo puedes construir tu propio service workers o usar una especie de templates mediante los cuales puedes configurar el service worker para que éste se genere automáticamente atendiendo a una configuración que puedes definir según tus necesidades.

Los service Workers en sí dan para escribir un manual independiente para ellos solos. De momento Google o Mozilla son los que más información han publicado de ellos. Si buscas información encontrarás algunos buenos tutoriales en la web.

La PWA de DesarrolloWeb

Durante el parón de vacaciones de agosto construí una Progressive Web App, que todavía estoy mejorando poco a poco, a medida que el tiempo me lo permite. La hice con ánimo de experimentar con todas estas funcionalidades nuevas del ámbito de la web, y de paso mejorar algunas cosas que estaban anticuadas en DesarrolloWeb.

La puedes visitar en https://app.desarrolloweb.com/

Hay muchas cosas que hacer todavía, y muchas ideas que espero tener tiempo de implementar durante los próximos meses.

Vídeo de las Progressive Web Apps

El pasado martes emitimos un programa en directo para hablar de las Progressive Web Apps. Es un buen modo de mantenerte informado de las características de la web de hoy y del futuro. Te arrojará muchos otros datos para conocer las características y el ecosistema de las PWA.

Puedes verlo a continuación:

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual