Las siglas PWA (Progressive Web App) suenan a tecnología complicada, y muchos artículos no ayudan: te sueltan un párrafo lleno de jerga y te quedas igual. Acabo de convertir una de mis webs en PWA y resulta que el concepto es bastante sencillo. Te lo cuento como me habría gustado que me lo contaran.
Contenidos
Una PWA es tu web de siempre, con dos añadidos
No te dejes intimidar por el nombre. Una PWA no es una app que subes a Google Play ni a la App Store. Es exactamente la misma web que ya tienes, a la que le añades dos ficheros que le dicen al navegador: “trátame como si fuera una aplicación”.
Esos dos ficheros son:
1. El manifest (la ficha de identidad)
Un archivo de texto (manifest.webmanifest) con los datos de tu “app”: el nombre, los iconos, el color de la barra y, sobre todo, esta línea:
"display": "standalone"
Eso es lo que hace la magia visual: cuando alguien abre tu web desde el icono, se ve a pantalla completa, sin la barra de direcciones del navegador. Indistinguible de una app nativa a primera vista. Un ejemplo de manifest mínimo:
{
"name": "Mi Web",
"short_name": "Web",
"start_url": "/",
"display": "standalone",
"theme_color": "#146c43",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
Y lo enlazas en el <head> con una línea:
<link rel="manifest" href="/manifest.webmanifest">
2. El service worker (el que da los superpoderes)
El manifest por sí solo hace que se vea como app, pero el que la hace funcionar como app es el service worker: un pequeño script de JavaScript que el navegador ejecuta por detrás, separado de la página.
Su trabajo principal es interceptar las peticiones de red y cachear. Gracias a él, tu web:
- Funciona sin conexión (o con conexión mala), sirviendo lo que tiene guardado.
- Carga instantánea en las visitas siguientes, porque no vuelve a descargar lo que ya tiene.
La estrategia más típica es: para los assets (CSS, JS, imágenes) tira de caché primero; para las páginas, intenta la red primero y solo si falla recurre a la caché (así el contenido se mantiene fresco). Un detalle importante si monetizas con publicidad: conviene que el service worker ignore las peticiones a dominios externos (anuncios, analítica) y solo cachee lo tuyo, para no romper nada.
¿Y cómo se instala? ¿Hay que poner un botón?
Aquí está la sorpresa agradable: no necesitas botón. Si tu web cumple los requisitos (HTTPS + manifest + service worker + iconos), el navegador se da cuenta solo.
- En Chrome/Android, el propio navegador ofrece “Añadir a la pantalla de inicio” (un banner o desde el menú ⋮). El usuario toca y aparece el icono en su pantalla, como cualquier app.
- En iOS/Safari es manual: el usuario pulsa Compartir → “Añadir a pantalla de inicio”. Pero el resultado es el mismo.
Si quieres, puedes añadir tu propio botón “Instalar app” capturando el evento beforeinstallprompt, pero no es obligatorio: la instalación funciona sin que toques nada en la interfaz.
Un requisito que no se negocia: HTTPS. Los service workers solo funcionan en sitios seguros (la única excepción es localhost para desarrollo). Si despliegas en algo como Cloudflare Pages o Netlify, ya tienes HTTPS gratis, así que cubierto.
¿PWA o app nativa?
La pregunta del millón. Mi regla rápida:
- PWA si lo que tienes es una web/herramienta y quieres presencia en el móvil, instalación sin fricción y una sola base de código. Mantienes tu web (y tu monetización, si tienes anuncios, porque sigue siendo la misma página). Coste: un par de ficheros.
- App nativa si necesitas hardware avanzado, notificaciones muy integradas, o presencia obligatoria en las tiendas. Coste: otra plataforma, otra tienda, otro mantenimiento.
Hay un punto intermedio interesante: un TWA (Trusted Web Activity) empaqueta tu PWA en un APK para publicarla en Google Play, mostrando tu web por dentro. Lo mejor de los dos mundos si quieres estar en la tienda sin duplicar el desarrollo.
Lo monté en una de mis webs
Lo probé en WeUtils.uk, un sitio de calculadoras y utilidades rápidas. El trabajo total fue: generar los iconos (192 y 512 px, más una versión maskable), escribir el manifest, un service worker de ~30 líneas y un script mínimo para registrarlo. Un rato de tarde. Ahora se puede instalar en el móvil, abre a pantalla completa y carga al instante.
Lo que más me gustó es que no rompe nada de lo que ya tenías: la web sigue siendo web (indexable por Google, con sus anuncios, su analítica), y encima gana el modo “app”. Es de esas mejoras con una relación valor/esfuerzo difícil de batir.
Si tienes una web estática o una herramienta y nunca te habías planteado lo de la PWA por miedo a la complejidad: no la hay. Son dos ficheros y un rato. Dale una oportunidad.