Progressive Web Apps

  • Por
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:

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

davidcm86

20/9/2016
Buena pinta
Hola Miguel!
Tiene muy buena pinta esa app que mejora desarrolloweb. ¿qué tecnologías usas? Polymer,Angular 2? Diseño AngularMaterial? y BBDD Firebase? Mezcla exitosa.

saludos!

midesweb

20/9/2016
tecnologías de la PWA de DesarrolloWeb
Hola David,
De momento estoy construyendo solamente la App e incorporando más funcionalidad poco a poco. Me alegro que de momento te guste lo que hay.
Usa Polymer, Firebase y en el backend uso NodeJS para varios procesos que es mejor dejarlos fuera del frontend.
Tiene una arquitectura de la que estoy bastante satisfecho pero tengo que seguir trabajando.

Ismael

21/9/2016
Muy buena la proresive app de desarrolloweb ¡Va como un rayo!
Me he dado cuenta que usa muchos contenidos que ya tenia www.desarrolloweb.com
¿Le has hecho una API REST para alimentar esta nueva app?
En lugar de node.js ¿Se podría haber usado PHP 7?

Saludos

midesweb

21/9/2016
contenidos y... php7, por supuesto, pero...
Los contenidos son los mismos, pero estamos haciendo cosas nuevas y de otra manera. En esta app vamos a centralizar todo lo que son las descargas de los manuales y queremos crear nuevas secciones basadas en la interacción y el tiempo real. Todo poco a poco porque nuestro tiempo es limitado.
De momento estoy haciendo un sistema para poder generar los manuales en formatos para eReaders. Tengo ya mi primer prototipo en el manual de Polymer, que está disponible para Kindle y lectores de ePub. Mira en https://app.desarrolloweb.com/manuales/manual-polymer

No tenemos un API en DesarrolloWeb, sino que nos estamos apoyando en Firebase, que usa WebSockets, por eso va tan rápido, y porque es una SPA, que aunque tiene varias pantallas todo se desarrolla en la misma página.

Sobre PHP7, a mi me encanta, pero NodeJS es compatible con el API de Firebase, el mismo API que se usa en la programación del lado del cliente, por lo que era la solución más sencilla para este proyecto. Me ha tocado aprender muchas cosas nuevas y eso también ha sido muy gratificante.

Daniel

21/9/2016
Felicitaciones!
Apenas y me inicio como desarrollador, este concepto de PWA me ha hecho el día, y aplaudo si es que en el futuro estaremos usando todos, todo desde la app de DW. Gracias!

Pregunta: ¿Esto de las PWAs, vendría bien para lo que es el desarrollo de carritos de compra a medida?

Francisco

26/9/2016
Hola Miguel Ángel, muy buen artículo
Pues eso, gran artículo y me pongo a echar un vistazo al vídeo. Ya conocía los componentes de las PWA pero no el concepto en sí. Creo que una tecnología que ha empezado a tener bastante aceptación tras el paso de PARSE es BACKENDLESS que además en una sola plataforma permite integrar todos o casi todos los requisitos para una PWA entre los que para mí mayormente destacan la parte de MENSAJERÍA Y NOTIFICACIONES PUSH, AUTENTICACIÓN, etc. es parecido a Firebase pero yo lo veo en algunos aspectos más completo y documentado, además tienen soporte para JavaScript, PHP, etc. Sería bueno si cubrieseis algunos aspectos de esta plataforma.

midesweb

11/10/2016
le echaré un vistazo a backendless
Gracias por la recomendación. Le echaré un vistazo en cuanto se ponga a tiro ;)
Ahora mismo aprendiendo React y escribiendo un manual... y enseguida comienzo el curso de Polymer en EscuelaIT, así que no sé hasta donde llegará mi tiempo

Jorge

21/11/2016
Ejemplo de PWA en webs de contenido
Normalmente siempre que se habla de PWA y serviceworkers parece que es sólo para aplicaciones web concretas y en su mayoría de casos single page apps, pero casi nunca he visto hablar sobre las aplicaciones de estas tecnologías para webs de contenido de toda la vida, que sean buenas para el SEO, que se le pueda meter publicidad como Adsense, y que aparte consigan obtener ventajas tanto para los usuarios en rendimiento, posibilidad de notificaciones, y para el desarrollador con una mejor gestión del cache y permitir liberar al servidor y consumir menos recursos.

Pues os enseño una web que hace todo esto, la web de chistes https://www.chistetes.com/ sigue viéndose normal en un navegador que no soporte serviceworkers como edge o safari, pero si la usamos en Chrome por ejemplo, podemos tener notificaciones tipo android, carga ultrarápida sobretodo al ir mirando los chistes siguietnes, funciona incluso sin conexión mostrandolo lo cual mejora la experiencia de usuario. Conseguimos un rendimiento típico de aplicaciones single page, pero con una grandísima ventaja, podemos usar por ejemplo Adsense para monetizar el sitio, además de lo dicho anteriormente que para el bot de google sigue siendo un sitio de contenido normal.

Creo que es un ámbito del que todavía no se ha hablado mucho pero que es el futuro en las webs de contenido también, no solo para aplicaciones web.

erama

02/12/2016
Descarga de audio para reproducción offline en un PWA
Estoy desarrollando mi 1º PWA y quisiera saber si es posible, hace descaga de audio por ejemplo , para luego cuando el offiline ese audio pueda ser reproducido sin problema. La app es de podcast y la idea es que se pueda usar offline previa descarga del contenido muchas gracias.

midesweb

02/2/2017
Descarga de audio
En cuanto a ofrecer descarga de audio el problema con el que puedes encontrarte es que los navegadores limitan el espacio de almacenamiento local. Yo lo que hago con el app.desarrolloweb.com es que los archivos los descargo directamente en el dispositivo. Luego cada usuario abre el archivo en su dispositivo con el programa que prefiera. el archivo le queda al usuario en el sistema de archivos y no en el sistema de almacenamiento del navegador, que tiene sus limitaciones.
Para tu caso igual tendrías que irte a una app híbrida o una app nativa, todo depende.

Guest

02/5/2017
Ejemplos de pwa
Os dejo una web con ejemplos de varios servicios basados en pwa
http://www.progressivewebapproom.com/

alan mizraji

16/5/2017
notificaciones push
Hola como estas?
Tengo una app web que esta desarrollada en angular, www.poraprender.com, contacta 2 puntos, gente que quiere enseñar con gente que quiere aprender. Me gustaria agregar las notificaciones push para los mensaje.
Que tan viable o tan complicado es hacer en angular?
Gracias.

midesweb

16/10/2017
PWA en Angular
Hola, Las Progressive Web Apps las puedes hacer en Angular y también en cualquier otro framework. Son sencillas de hacer, puesto que puedes ir agregando funcionalidades de PWA poco a poco, a medida que quieras ir incrementando servicios que se beneficien de ellas.
El caso de las notificaciones Push es muy sencillo de realizar del lado del cliente. Incluso te puedes apoyar en librerías com las que te ofrecen en Firebase. Pero tienen una parte del lado del servidor que también tendrás que desarrollar, en NodeJS o cualquier otro lenguaje que estés usando. Esa parte no es que sea complicada tampoco, pero requiere otro conjunto de tecnologías y conocimientos.
Yo en el Curso de Polymer en EscuelaIT https://escuela.it/cursos/desarrollo-aplicaciones-polymer mostré cómo recibir notificaciones con Polymer y las librerías para generarlas desde el servidor con NodeJS. También te puede interesar el curso de PWAs con Angular que hemos impartido en EscuelaIT. https://escuela.it/cursos/curso-de-progressive-web-apps-con-angular