# Aplicación web progresiva

> Un sitio web que se puede instalar y usar como una app, incluso sin conexión.

- Nivel: Intermedio
- Temas: Software
- URL: https://tidbit.legios.com.ar/es/progressive-web-app/
- En inglés: [Progressive web app](https://tidbit.legios.com.ar/progressive-web-app/)

Una **aplicación web progresiva** (PWA, por progressive web app) es un sitio web armado para comportarse como una app instalada. Entrás desde el navegador web, tocás "Agregar a la pantalla de inicio" o "Instalar", y desde ahí se abre desde su propio ícono, en su propia ventana, sin la barra de direcciones. Por debajo sigue siendo HTML, CSS y JavaScript servidos desde una URL.

Hay dos piezas que lo hacen posible. El **web app manifest** es un archivo JSON chiquito con el nombre, el ícono y los colores de la app, que le dice al dispositivo cómo instalarla. El **service worker** es un script que el navegador corre en segundo plano, entre la página y la red: puede guardar copias de archivos y datos en una caché para que la app abra sin señal, y puede recibir notificaciones push. Las PWA tienen que servirse por HTTPS.

Lo atractivo es tener un solo código para todos los dispositivos, sin revisión de una tienda de apps y con actualizaciones que llegan la próxima vez que el usuario la abre. Twitter, Starbucks y Uber lanzaron PWA, muchas veces para llegar a gente con celulares baratos o datos que van y vienen. Los límites también existen: el iPhone soporta las PWA con menos funciones que Android, y algunos accesos al hardware siguen siendo más fáciles desde una app nativa.

## Una analogía

Un food truck que además puede estacionarse y convertirse en un localcito. La misma cocina y el mismo menú, pero cuando se instala en tu cuadra tiene cartel, puerta y una despensa que sigue funcionando aunque el camión de proveedores se atrase.

## Para quedarse

- Un sitio web que se instala en la pantalla de inicio y abre en su propia ventana.
- El manifest describe la app; el service worker maneja la caché offline y las notificaciones.
- Necesita HTTPS y se actualiza como un sitio, sin pasar por una tienda de apps.
- El soporte varía: iOS ofrece menos funciones de PWA que Android y los navegadores de escritorio.

## Para seguir leyendo

- [Aplicaciones web progresivas (MDN)](https://developer.mozilla.org/es/docs/Web/Progressive_web_apps)
- [Progressive Web Apps (web.dev, en inglés)](https://web.dev/explore/progressive-web-apps)
- [Aplicación web progresiva en Wikipedia](https://es.wikipedia.org/wiki/Aplicación_web_progresiva)

## Términos relacionados

- [Sitio web](https://tidbit.legios.com.ar/es/website/): Un conjunto de páginas web bajo una dirección, guardadas en un servidor.
- [Navegador web](https://tidbit.legios.com.ar/es/web-browser/): La app que trae páginas web desde internet y las dibuja en tu pantalla.
- [HTML](https://tidbit.legios.com.ar/es/html/): El formato de texto que describe qué hay en una página web: títulos, párrafos, links.
- [CSS](https://tidbit.legios.com.ar/es/css/): El lenguaje que decide cómo se ve una página web: colores, letras, espacios.
- [JavaScript](https://tidbit.legios.com.ar/es/javascript/): El lenguaje de programación que corre en las páginas web y las vuelve interactivas.
- [URL](https://tidbit.legios.com.ar/es/url/): La dirección completa de algo en la web: protocolo, sitio y ruta.
- [JSON](https://tidbit.legios.com.ar/es/json/): El formato de texto con el que los programas se pasan datos estructurados.
- [Caché](https://tidbit.legios.com.ar/es/caching/): Guardar una copia de una respuesta a mano para no tener que calcularla de nuevo.