PWA: aplicaciones web progresivas, instalables, rápidas y sin tienda de apps

Un cliente nos enseñó hace poco la carta digital de su restaurante: un PDF enlazado desde un código QR que tardaba casi diez segundos en abrirse con la cobertura de la terraza. Le propusimos algo distinto. La misma carta, como web ligera, que se abre en un instante, se puede guardar en la pantalla de inicio de los clientes habituales y, si la conexión falla, sigue mostrando los platos porque ya están guardados en el móvil. Eso es, en pequeño, una aplicación web progresiva.

PWA son las siglas de Progressive Web App. El nombre suena a tecnología nueva, pero la idea es sencilla: una web que, gracias a unas pocas piezas técnicas, se comporta como una aplicación. Se instala, abre en su propia ventana sin la barra del navegador, funciona con mala conexión y puede enviar notificaciones. Y lo hace sin pasar por ninguna tienda de apps, con un solo código y una sola URL.

En el estudio la usamos mucho más de lo que parece, a veces sin ponerle la etiqueta. Esta guía explica cómo se construye, qué puede hacer hoy en cada plataforma y cómo decidir si tu proyecto la necesita.

01Qué hace a una web «progresiva»

Lo de «progresiva» viene de la mejora progresiva: la web funciona para todo el mundo en cualquier navegador y, donde el navegador lo permite, suma capacidades extra. Nadie se queda fuera; quien tiene un dispositivo moderno disfruta de más.

Técnicamente, una PWA descansa sobre tres pilares:

1. 01HTTPS. Todas las capacidades avanzadas exigen una conexión segura. Si tu web aún no la tiene, empieza por la guía de HTTPS y certificados SSL.
2. 02Un manifiesto web (web app manifest). Un archivo JSON que describe la aplicación: nombre, iconos, colores, cómo debe abrirse.
3. 03Un service worker. Un script que el navegador ejecuta en segundo plano, separado de la página, y que intercepta las peticiones de red. Es el que permite la caché inteligente, el modo sin conexión y las notificaciones.

Con esas tres piezas, el navegador reconoce la web como instalable. A partir de ahí, todo lo demás es diseño de producto: decidir qué debe funcionar sin conexión, qué merece una notificación y cómo se presenta la invitación a instalar.

02El manifiesto: la ficha de identidad de tu app

El manifiesto se enlaza desde el <head> de todas las páginas y le dice al sistema operativo cómo presentar la aplicación una vez instalada.

{
  "id": "/",
  "name": "Restaurante La Terraza",
  "short_name": "La Terraza",
  "start_url": "/carta?origen=app",
  "scope": "/",
  "display": "standalone",
  "background_color": "#F7F3EC",
  "theme_color": "#1E3A2F",
  "lang": "es",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "screenshots": [
    { "src": "/screens/carta-movil.png", "sizes": "1080x1920", "type": "image/png", "form_factor": "narrow" }
  ]
}

Algunos campos merecen explicación:

• →`display`: standalone abre la app en su propia ventana, sin barra de direcciones. minimal-ui deja unos controles mínimos de navegación, y browser la abre como una pestaña normal.
• →`short_name`: el nombre que aparece bajo el icono. Mejor que no pase de unos 12 caracteres para que no se corte.
• →`start_url`: la página con la que arranca. Añadir un parámetro permite medir en la analítica cuántas visitas llegan desde la app instalada.
• →Iconos `maskable`: Android recorta los iconos en distintas formas (círculo, cuadrado redondeado). Un icono enmascarable deja el motivo principal dentro de una zona segura central, aproximadamente el 80 % del lienzo, para que nunca se corte. Es una versión más del sistema de marca, igual que el favicon, como contamos en la guía sobre versiones de logotipo.
• →`screenshots`: en Android y en Chrome de escritorio enriquecen el diálogo de instalación con capturas, como una mini ficha de tienda.

Para iOS conviene añadir además un apple-touch-icon de 180 × 180 píxeles en el HTML, que es el que Safari usa en la pantalla de inicio.

03El service worker y las estrategias de caché

El service worker es el corazón de la PWA. Se registra desde la página y, a partir de ese momento, puede decidir para cada petición si responde con lo que tiene guardado, va a la red o combina ambas cosas.

// En la página: registrar el service worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js'));
}
// En sw.js: guardar lo esencial al instalarse y servir una página sin conexión
const CACHE = 'terraza-v3';
self.addEventListener('install', (e) => {
  e.waitUntil(caches.open(CACHE).then((c) => c.addAll(['/offline', '/carta', '/css/app.css'])));
});
self.addEventListener('fetch', (e) => {
  if (e.request.mode === 'navigate') {
    e.respondWith(fetch(e.request).catch(() => caches.match(e.request).then((r) => r || caches.match('/offline'))));
  }
});

En proyectos reales no escribimos todo a mano: usamos Workbox, la librería de Google que simplifica las estrategias de caché, el precacheo de archivos y la gestión de versiones. Lo importante es elegir bien la estrategia para cada tipo de recurso:

Actualizaciones sin sorpresas

Un service worker nuevo no toma el control hasta que se cierran todas las pestañas de la versión anterior. Eso evita mezclar versiones, pero puede dejar a alguien con contenido antiguo durante días. Lo que funciona es detectar la nueva versión y mostrar un aviso discreto, del tipo «Hay una versión nueva disponible · Actualizar», que recarga la página al pulsarlo. Y cada despliegue cambia el nombre de la caché (terraza-v3, terraza-v4) para limpiar la anterior.

04Lo que una PWA puede hacer hoy en cada plataforma

El soporte ha avanzado mucho, aunque no es idéntico en todas partes. Este es el panorama a mediados de 2026, a grandes rasgos:

En Mac, Safari permite desde macOS Sonoma añadir cualquier web al Dock como aplicación. Aun así, la regla práctica es diseñar la experiencia completa para lo que funciona en todas partes y tratar las capacidades exclusivas como mejora.

Dos datos de contexto útiles. Lighthouse, la herramienta de auditoría de Google, retiró en su versión 12 la categoría específica de PWA, y hoy la instalabilidad se revisa en el panel Aplicación de las herramientas de desarrollo de Chrome. Y la documentación de referencia está en web.dev y en MDN, que mantienen las tablas de compatibilidad al día.

05Notificaciones push con criterio

Las notificaciones son la capacidad que más ilusión despierta y la que más cuidado pide. Técnicamente funcionan con la Push API y la Notifications API: el usuario concede permiso, el navegador genera una suscripción y tu servidor envía los mensajes a través del servicio de push del navegador, firmados con claves VAPID. Librerías como web-push en Node o servicios como OneSignal resuelven el envío.

Lo delicado es el permiso. Si la web lo pide nada más cargar, la mayoría de la gente lo rechaza por reflejo, y un rechazo es casi definitivo, porque volver a activarlo exige entrar en los ajustes del navegador. Lo que funciona es pedirlo en contexto, cuando la persona entiende para qué sirve:

• →Después de reservar: «¿Quieres que te avisemos el día antes de tu mesa?»
• →Al seguir un pedido: «Te avisamos cuando salga del almacén.»
• →En una herramienta interna: al asignar la primera tarea a alguien del equipo.

Primero un aviso propio de la interfaz, con tu tono y tu diseño, y solo si la persona acepta, el diálogo del sistema. Cada mensaje debe ser útil, puntual y fácil de silenciar desde un apartado de preferencias dentro de la propia app. Pocas notificaciones bien elegidas construyen confianza; el resto se convierte en ruido. En la guía de notificaciones, toasts y banners profundizamos en cómo jerarquizar los avisos.

06Cuándo una PWA es la mejor opción

Una PWA brilla cuando el uso es recurrente pero no diario, cuando el público llega sobre todo desde la web o desde un QR, y cuando pedir una descarga en una tienda sería una barrera. Algunos casos en los que encaja de maravilla:

• →Cartas, reservas y fidelización en restaurantes y hoteles: el cliente la añade a la pantalla de inicio sin pasar por ninguna tienda.
• →Herramientas internas para equipos comerciales o de campo: catálogos, partes de trabajo, inventarios que deben funcionar en una nave o en una obra con poca cobertura.
• →Plataformas SaaS que ya son una aplicación web y ganan una ventana propia, notificaciones y arranque instantáneo.
• →Eventos y ferias: programa, mapa del recinto y avisos en tiempo real, para un uso intensivo de pocos días.
• →Tiendas online con compra recurrente, donde la rapidez en visitas repetidas se nota en la conversión.

Donde se queda corta es en apps que necesitan acceso profundo al hardware (Bluetooth en iOS, NFC en iPhone, sensores avanzados), procesamiento intensivo en segundo plano o una presencia destacada en las tiendas como canal de captación. La comparación completa entre caminos la hacemos en la guía de web app, app nativa o híbrida.

07Cómo convertir tu web en PWA, paso a paso

1. 01Revisa la base. HTTPS, buen rendimiento y diseño responsive. Una PWA amplifica lo que ya hay: si la web es lenta, la app instalada también lo será.
2. 02Define qué debe funcionar sin conexión. No todo tiene sentido offline. Haz una lista corta con el equipo: la carta, el último pedido, la ficha del cliente.
3. 03Prepara los iconos y el manifiesto. Iconos de 192 y 512 píxeles, uno enmascarable, el apple-touch-icon, nombre corto y colores de marca.
4. 04Implementa el service worker con Workbox, con la estrategia de caché adecuada para cada tipo de recurso y la página sin conexión.
5. 05Diseña la invitación a instalar. En Android puedes capturar el evento beforeinstallprompt y mostrar tu propio botón en el momento adecuado (después de una reserva, por ejemplo). En iOS, una breve guía visual de cómo añadirla a inicio.
6. 06Prueba en dispositivos reales: Android de gama media, iPhone, modo avión, conexión lenta simulada y actualización de versión.
7. 07Mide. El parámetro en start_url y el modo de visualización (display-mode: standalone en CSS o en JavaScript) permiten saber cuántas visitas llegan desde la app instalada.

08Una web que se queda en el bolsillo

Lo más bonito de una PWA es que no obliga a elegir: es tu web, la misma que encuentra Google y comparte cualquiera con un enlace, y a la vez una pequeña aplicación para quien quiere tenerla a mano. Bien diseñada, refuerza la relación con los clientes habituales sin pedirles ningún esfuerzo.

En SIMA diseñamos y desarrollamos PWAs dentro de nuestros proyectos de desarrollo web y apps, cuidando tanto la parte técnica como la experiencia y la marca en cada pantalla. Si estás pensando en una app y quieres valorar si una PWA te basta, escríbenos y lo vemos juntos.