PWA

> Temas > PWA
Editar

PWA o Progressive Web App, es un modelo de aplicación web que permite trabajar con características avanzadas de las aplicaciones de escritorio o aplicaciones para móviles, usando solamente tecnologías web y sin necesidad de publicarse en las stores.

Las Progressive Web Apps (PWA) son aplicaciones web que permiten realizar diversas tareas anteriormente disponibles solo en aplicaciones para móviles o aplicaciones de escritorio, como el trabajo offline, recibir notificaciones push, instalar la aplicación en el dispositivo, etc.

Para desarrollar una Progressive Web App se usan solamente tecnologías web y su publicación se realiza en cualquier servidor web. No se requiere subir las aplicaciones al stores como Google Play o App Store, simplemente publicar la web en un dominio de Internet.

Para poder realizar una PWA se requieren tres cosas principalmente:

  • Disponer de HTTPS: No es posible disfrutar de las ventajas de las PWA en servidores que no sean seguros.
  • Tener un Service Worker: Que es código Javascript que puede ejecutarse en el navegador, incluso aunque la web no esté abierta.
  • Disponer de un archivo manifest: que ofrece datos sobre la aplicación, como su nombre, los iconos de la web, la orientación y otra serie de cosas.

Más información:

Evolución de las Progressive Web Apps

Las Progressive Web Apps no son algo nuevo. Existen desde hace ya más de 5 años en la web y actualmente muchas de las aplicaciones más importantes se basan en este conjunto de tecnologías para ofrecer a sus usuarios una experiencia web mucho más avanzada.

Las PWA llegaron al mundo web de la mano de Google, que es uno de los grandes impulsores de los estándares de la web y de la propia web como plataforma de ejecución de aplicaciones. La idea era ofrecer a los usuarios de las páginas experiencias de uso cercanas a las que disponen las aplicaciones móviles instalables en los stores. El concepto abre interesantes posibilidades a los desarrolladores y empresas, que pueden distribuir sus aplicaciones sin la barrera inicial que supone la tienda de aplicaciones.

Muchas empresas ofrecen Progressive Web Apps a sus usuarios, por lo que es posible que ya las conozcas aunque no le habías puesto nombre todavía. Uno de los mejores ejemplos es la red social Twitter, que ofrece una de las PWA más completas, cuyo uso es prácticamente idéntico a la versión instalable en el móvil mediante Google Play. Pero muchas otras empresas ofrecen aplicaciones progresivas, ya que las posibilidades que ofrecen han sido bien acogidas por los desarrolladores y en principio su distribución es mucho más sencilla, sobre todo de cara a usuarios menos experimentados y aquellos que no les gusta instalar cualquier cosa en sus teléfonos.

Sin embargo, a decir verdad, todavía hay camino que recorrer para que las PWA sean una alternativa completamente pareja a las aplicaciones móviles, sobre todo por un problema: Apple. La empresa de la manzana está haciendo todo lo posible por frenar esta tecnología, ya que la percibe como una amenaza a todos los ingresos que percibe mediante su App Store, pues los desarrolladores que publican PWA no necesitarían pagar la cuota de desarrolladores de Apple y los ingresos producidos por las apps no dejarían comisiones en Apple. Es por eso que las PWA las podemos ver en todo su explendor en sistemas Android y en ordenadores de escritorio, pero no en iOS donde a día de hoy están todavía muy limitadas.

Editar

Qué características incluyen las 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.

Editar

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.

Editar

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.

Editar

¿Quieres añadir algo sobre PWA?

Crea artículos, recursos o comparte información sobre PWA

Crear un bloque

PWA

Manuales

Manual de Progressive Web Apps
En el Manual de Progressive Web Apps vamos a abordar una de las novedades más destacadas para la realización de...

Preguntas y respuestas

Se han recibido 1 faqs en PWA

Hacer una pregunta