Progressive Web App (PWA): definición, funcionamiento y casos de uso

Es muy probable que ya hayas usado una progressive web app sin saberlo. Cuando una tienda online te propone « Añadir a la pantalla de inicio », el icono aparece en tu móvil junto a las demás aplicaciones y, al abrirlo, ya no hay barra de direcciones ni pestañas: eso es una PWA. Técnicamente sigues en una web. En la práctica, estás usando una aplicación.

Esta guía da la definición exacta de una progressive web app, explica qué la diferencia de una simple web responsive, detalla lo que puede y lo que no puede hacer — sobre todo en iPhone — y te ayuda a decidir si es el formato adecuado para tu proyecto.

Definición: ¿qué es una progressive web app?

Una progressive web app (PWA) es una aplicación web, construida con tecnologías estándar (HTML, CSS, JavaScript), que aprovecha capacidades modernas del navegador para ofrecer una experiencia equivalente a la de una app móvil: instalación en la pantalla de inicio, apertura a pantalla completa, carga rápida, funcionamiento parcial sin conexión y notificaciones push.

El término lo introdujo Google en 2015. El adjetivo « progressive » viene de la mejora progresiva: la misma URL funciona en todas partes y cada navegador aprovecha todo lo que sabe hacer. En un navegador antiguo el usuario ve una web normal. En uno moderno obtiene una aplicación instalable. Nunca hay dos versiones que mantener.

Qué diferencia una PWA de una web móvil normal

Una web responsive se adapta al tamaño de la pantalla, y poco más. Una progressive web app añade tres cosas que una web clásica no tiene: es instalable (tiene su propio icono y su propio lanzamiento), es fiable (muestra algo útil incluso con conexión inestable o nula) y puede trabajar en segundo plano (notificaciones, sincronización).

• Web responsive: se abre en el navegador, depende de la red, sin icono ni notificaciones.
• Progressive web app: se instala, se abre a pantalla completa, guarda datos en caché y puede notificar.
• App nativa: se descarga de una tienda, accede a todo el hardware y se desarrolla específicamente para iOS y Android.

Cómo funciona una progressive web app

Tres piezas convierten una web en una progressive web app. No dependen de tu framework, así que se puede convertir un sitio existente sin reconstruirlo.

1. El manifiesto (web app manifest)

Es un pequeño archivo JSON que describe tu aplicación al sistema operativo: nombre, nombre corto bajo el icono, iconos en varios tamaños, color de tema, página de inicio y modo de visualización. Es lo que permite al navegador proponer la instalación y lo que hace desaparecer la barra de direcciones al abrirla.

2. El service worker

Es el corazón técnico de una PWA: un script que se ejecuta en segundo plano, aparte de la página, y actúa de intermediario entre la aplicación y la red. Intercepta las peticiones y decide si sirve una versión en caché o busca datos actualizados. Eso es lo que da una carga casi instantánea en la segunda visita, una pantalla útil cuando se cae la red y notificaciones push con la aplicación cerrada.

3. El HTTPS

Un service worker solo funciona sobre una conexión segura. El HTTPS no es opcional en una progressive web app: es un requisito, igual que para el posicionamiento.

Checklist: los criterios de una PWA real

Muchos sitios se presentan como progressive web apps sin cumplir las condiciones. Esto es lo que conviene verificar antes de usar el término.

• El sitio se sirve íntegramente por HTTPS.
• Hay un manifiesto válido, con al menos nombre, icono 512×512 y página de inicio.
• Hay un service worker registrado que gestiona al menos un escenario sin conexión.
• La interfaz es usable en móvil sin zoom ni desplazamiento horizontal.
• El rendimiento móvil está controlado (Core Web Vitals: LCP, INP, CLS).
• Cada pantalla importante conserva una URL limpia e indexable por Google.

Las ventajas concretas de una progressive web app

• Una sola base de código. El mismo producto sirve como web, app de Android y app de iPhone, en vez de tres proyectos que financiar y mantener.
• Sin fricción de instalación. El usuario llega por un enlace y usa la aplicación al momento. Sin pasar por una tienda ni descargar decenas de megas.
• Actualizaciones inmediatas. Despliegas y todos tienen la nueva versión en la siguiente carga. Sin revisión que esperar ni usuarios atascados en una versión antigua.
• Posicionamiento intacto. A diferencia de una app nativa, invisible para Google, una progressive web app sigue siendo un sitio indexable que capta tráfico de búsqueda.
• Sin comisión de tienda. Los pagos pasan por tu propia solución web, sin retención sobre las compras integradas.

Los límites que hay que conocer antes de decidir

Una progressive web app no es una app nativa disfrazada. Tres límites marcan la decisión.

• La App Store sigue cerrada a las PWA. Apple no acepta una progressive web app enviada tal cual: una app que no aporta nada más allá de una web es rechazada. En Android, en cambio, sí se puede publicar una PWA en Play Store mediante una Trusted Web Activity. Si tu captación depende de la visibilidad en la App Store, la PWA por sí sola no bastará.
• iOS va por detrás. Las notificaciones push web existen en iPhone desde iOS 16.4, pero solo si el usuario ha añadido realmente la aplicación a la pantalla de inicio — un paso extra que Safari destaca mucho menos que Chrome en Android. Además, varias API avanzadas siguen sin estar disponibles.
• El acceso al hardware es parcial. Cámara, micrófono y geolocalización funcionan bien. Bluetooth, NFC, biometría avanzada, procesamiento de vídeo pesado o integración profunda con el sistema siguen siendo terreno nativo.

PWA, app nativa o WebView: la comparativa

Cuándo la progressive web app es la opción correcta

La PWA rara vez es un compromiso resignado: para toda una categoría de productos es objetivamente el mejor formato.

• Un MVP o un producto que hay que validar rápido, donde no se justifica un doble desarrollo nativo.
• Una herramienta interna, un portal de clientes o un back-office, que nadie va a buscar en una tienda.
• Un e-commerce o un servicio de reservas, donde cada paso extra antes de comprar hunde la conversión.
• Un medio o servicio de contenidos cuya captación se basa en el posicionamiento orgánico.

Al contrario, ve a nativo si tu producto depende de un uso avanzado del hardware, de una experiencia muy animada, o si la presencia en la App Store es tu canal principal de captación.

Cómo crear una progressive web app

El proceso se resume en cinco pasos, en este orden.

• 1. Construir una base web sólida. Interfaz mobile-first, navegación clara y buen rendimiento: una PWA lenta sigue siendo una app lenta.
• 2. Añadir el manifiesto. Nombre, iconos, colores, modo de visualización y página de inicio.
• 3. Implementar el service worker. Definir qué se cachea y qué debe venir de la red, y diseñar la pantalla sin conexión.
• 4. Servirlo todo por HTTPS. Con tu propio dominio, clave para la confianza y para el SEO.
• 5. Probar en dispositivos reales. Verificar la instalación en Android e iPhone, el comportamiento sin conexión y los Core Web Vitals.

Progressive web app y SEO

Esta es la principal ventaja estratégica del formato: tu aplicación sigue siendo un sitio web. Cada página conserva una URL indexable, su propio title y meta description, y puede llevar datos estructurados. La velocidad que aporta la caché repercute directamente en los Core Web Vitals, que forman parte de las señales de experiencia de página. Una app nativa, en cambio, no aporta ninguna visibilidad en los resultados de búsqueda.

Un punto de atención: si el contenido se renderiza por completo en el cliente, asegúrate de que los rastreadores puedan acceder a él. El renderizado en servidor o la generación estática evitan sacrificar el SEO por la experiencia de aplicación.

Dónde entra Cadrant

Con Cadrant describes tu aplicación en lenguaje natural y obtienes una base web real y mobile-first, con código que te pertenece. Iteras prompt a prompt, publicas en tu propio dominio con HTTPS y mantienes un producto indexable por Google.

Y si tu proyecto acaba exigiendo presencia en la App Store, no te quedas bloqueado: Cadrant también genera aplicaciones móviles con publicación automatizada (certificado, perfil de firma, build de producción y envío a App Store Connect). Puedes empezar con una progressive web app para validar el mercado y añadir el canal de tiendas cuando sea rentable.

Conclusión

Quédate con la definición simple: una progressive web app es una web que se instala y se comporta como una aplicación. Te da una única base de código, posicionamiento intacto, actualizaciones inmediatas y un coste de entrada mucho menor que el nativo, a cambio de un acceso parcial al hardware y de la ausencia en la App Store.

Para la mayoría de proyectos que arrancan es el formato más racional: pone el producto en manos de usuarios reales sin inmovilizar meses de presupuesto y deja abierta la opción nativa para el día en que realmente se justifique.