PWA

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 necesidad de acudir a 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 aportan una 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.

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.

Actualmente las PWA tienen un soporte ampliamente extendido en la mayoría de los navegadores. Aunque los medios donde más penetración tienen las PWA son los ordenadores de escritorio y los móviles Android.

Dentro de su conjunto de características ha elementos como el Service Worker que están ampliamente soportados por todos los browser (excluído el viejo y ya retirado Internet Explorer). Hay otras características como la posibilidad de instalar aplicaciones en el escritorio que solamente están disponibles en determinados navegadores.

No obstante para que las PWA sean una alternativa completamente pareja a las aplicaciones móviles todavía hay que vencer un último escollo, que no es pequeño: Apple. La empresa de la manzana está poniendo trabas para frenar esta tecnología, ya que la percibe como una amenaza a los ingresos que obtiene 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 su navegador Safari no ha implementado completamente todas sus características.

Actualizado: Las PWA ya se pueden instalar en Safari para iOS, aunque no se encuentra muy a la vista y tienes que usar el mismo mecanismo de creación de los iconos en el móvil que se permite en sitios normales. Una vez instaladas se pueden abrir desde los iconos de apps y la PWA se muestra sin el marco del navegador, como una App móvil instalada en el store. Safari también está aceptando el Service Worker y realizando cacheo para trabajo offline.

Javascript es el lenguaje con el que se desarrollan las PWA, el lenguaje de la web. No necesitas nada más. Ni tan siquiera un framework o nada parecido. No obstante, librerías como Lit o React o frameworks como Angular o Vue facilitarán algunas de las tareas.

El desarrollo de Progressive Web Apps en Angular es prácticamente inmediato, ya que es un framework especialmente preparado para crear aplicaciones modernas. En el caso de usar algunos sistemas como Lit, Vue o React se hace muy fácil también si usas Vite como herramienta frontend, el cual tiene un plugin especialmente creado para desarrollar la PWA con prácticamente cero configuración.

Otra de las bibliotecas básicas para crear las PWA, para generación de los service Workers es Workbox. Si usas el mencionado plugin de Vite puedes ahorrarte el uso de Workbox porque el plugin lo utiliza por debajo para ti.

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.

Para la creación de la Progressive Wew App otro de los requisitos es tener un archivo manifest. Este archivo tiene formato de texto y en él se encuentran datos generales sobre la aplicación, como el nombre, el tema gráfico y los iconos que se usarán al instalar la aplicación.

El código del Manifest se declara en formato JSON y puede tener extensión .json o .webmanifest. Lo enlazamos en la página mediante una etiqueta <link>.

<link rel="manifest" href="/manifest.webmanifest">

El código JSON del manifest puede incluir toda una serie de campos, algunos son opcionales. Un ejemplo lo tenemos aquí:

{
  "name": "Mi PWA Grandiosa",
  "short_name": "Mi PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ff88ff",
  "lang": "es",
  "scope": "/",
  "description": "Aplicación para realizar todas las actividades de desarrollo de PWA",
  "theme_color": "#40C090",
  "icons": [
    {
      "src": "pwa-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "pwa-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Puedes encontrar más información en la página dedicada al archivo manifest.