Cómo convertir tu app web en una PWA instalable

Para convertir una app web en una aplicación web progresiva (PWA) instalable, sírvela por HTTPS y agrega un manifest: un archivo JSON pequeño con el nombre de la app, un icono de 192 y otro de 512 píxeles, una URL de inicio y un modo de display como standalone, enlazado desde todas las páginas. Con eso Chrome, Edge y Samsung Internet ya ofrecen instalarla, y en iPhone se puede agregar desde el menú Compartir. El service worker es opcional para instalar, pero es lo que te da funcionamiento sin conexión, cargas más rápidas al volver y notificaciones push.

En esta guía repasamos el manifest, el service worker, lo que cambia en iPhone, los errores de caché que provocan el clásico "mis usuarios siguen viendo la versión vieja" y cómo se compara una PWA con publicar en las tiendas.

¿Qué ganan mis usuarios con una app "instalable"?

Una PWA instalada tiene su icono en la pantalla de inicio o en el dock, se abre en su propia ventana sin la barra de direcciones, aparece en el selector de apps y se desinstala como cualquier app. Con un service worker, además, carga al instante cuando vuelves, muestra algo útil sin conexión y, en las plataformas que lo permiten, recibe notificaciones push.

Sigue siendo tu app web. Un solo código, un solo despliegue, y las actualizaciones llegan a todos a la vez sin revisión de ninguna tienda.

¿Qué tiene que llevar el manifest?

Crea manifest.webmanifest (o manifest.json) en tu carpeta pública:

{
  "name": "Acme Planner",
  "short_name": "Planner",
  "start_url": "/app",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1f3a5f",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Y enlázalo en el <head> de cada página:

<link rel="manifest" href="/manifest.webmanifest">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">

En los navegadores basados en Chromium (Chrome, Edge, Samsung Internet), el manifest debe incluir name o short_name, iconos de 192 y 512 píxeles, un start_url, un valor de display que sea standalone, fullscreen, minimal-ui o window-controls-overlay, y no poner prefer_related_applications en true. Chrome además espera a que el visitante haya interactuado con la página antes de ofrecer su aviso de instalación.

Algunos detalles prácticos:

• start_url debería ser donde quiere caer un usuario que vuelve, muchas veces el panel y no la portada de marketing. Si esa página pide login, asegúrate de que la redirección lo devuelva ahí.
• Un icono maskable tiene margen extra para que Android pueda recortarlo en círculo u otra forma sin cortar tu logo.
• El enlace apple-touch-icon es el que usa iOS para el icono de la pantalla de inicio.

¿Necesito un service worker?

Para instalar desde el menú del navegador, ya no. Chrome quitó el requisito de un service worker con manejador fetch para la instalación desde el menú en la versión 108 en móvil y 112 en escritorio, y MDN lo indica como opcional. Igual vas a querer uno para:

• Funcionar sin conexión, aunque sea con una página amable de "Estás sin conexión".
• Velocidad, guardando en caché el JavaScript, el CSS y las fuentes después de la primera visita.
• Notificaciones push, que pasan por el service worker.

En una app de Vite o React, el plugin vite-plugin-pwa genera el service worker y el manifest a partir de tu configuración. Para Next.js hay paquetes parecidos, o puedes escribir a mano un service worker sencillo.

¿Qué debería guardar en caché el service worker?

El "cascarón" de la app: los archivos de JavaScript y CSS compilados (que llevan un hash en el nombre), los iconos y las fuentes. Ten cuidado con:

• Respuestas de la API con datos privados. Cachearlas significa que los datos de un usuario podrían quedar en un dispositivo compartido después de cerrar sesión. Déjalas ir a la red.
• index.html. Si lo cacheas de forma agresiva, los usuarios siguen cargando la versión vieja después de cada despliegue.

¿Por qué mis usuarios siguen viendo la versión vieja?

Es la queja más común con las PWA. Un service worker nuevo espera a que se cierren todas las pestañas que usan el anterior antes de tomar el control. En una app instalada que la gente casi nunca cierra del todo, eso pueden ser días.

La solución es detectar cuando hay una versión nueva esperando y mostrar un aviso pequeño de "Hay una versión nueva, recarga" que le indique al service worker en espera que se active (vite-plugin-pwa tiene un modo de aviso para esto). Evita forzar la toma de control inmediata en cada despliegue si los usuarios podrían estar llenando un formulario.

¿Qué cambia en iPhone y iPad?

• No hay aviso automático de instalación. El evento beforeinstallprompt no existe en iOS, así que un botón propio de "Instalar app" no funcionará ahí. Muestra instrucciones cortas: Compartir y luego Agregar a pantalla de inicio.
• Desde iOS 16.4, otros navegadores en iOS (Chrome, Edge, Firefox y otros) también pueden agregar apps web a la pantalla de inicio desde su menú Compartir, no solo Safari.
• Desde iOS 26, los sitios agregados a la pantalla de inicio se abren como apps web por defecto, con una opción en el diálogo para dejarlos como un simple marcador.
• Las notificaciones push en iOS solo funcionan en apps web agregadas a la pantalla de inicio (desde iOS 16.4), y solo después de que el usuario dé permiso desde un toque dentro de la app.

En escritorio, Safari en macOS Sonoma y posteriores ofrece Agregar al Dock. Firefox de escritorio no instala PWA a partir de un manifest.

¿PWA o publicar en las tiendas?

Puedes empaquetar una PWA para Google Play con una Trusted Web Activity. Las pautas de revisión de la App Store de Apple rechazan apps que son poco más que un sitio web envuelto, así que en iOS una app de tienda normalmente necesita funciones nativas reales. Si necesitas estar en las tiendas, mira nuestro servicio para publicar tu app en App Store, y si tu app está hecha con Bolt y Expo, la guía para publicar una app móvil hecha con Bolt.

¿Cómo compruebo que funciona?

1. En las DevTools de Chrome abre Application (Aplicación) y luego Manifest. Ahí ves los campos leídos, los iconos y cualquier problema de instalación.
2. En Service workers, dentro del mismo panel, comprueba que esté registrado y activo; luego marca Offline y recarga.
3. Instálala en un Android y un iPhone reales, ábrela desde la pantalla de inicio, inicia sesión, ciérrala del todo y vuelve a abrirla.
4. Despliega un cambio pequeño y confirma que los usuarios con la app instalada lo reciben, con tu aviso de actualización.

Respuestas rápidas

¿Una PWA funciona sin conexión automáticamente? No. El modo sin conexión depende de lo que guarde tu service worker y de cómo maneje tu app las peticiones fallidas.

¿Una PWA puede mandar notificaciones push en iPhone? Sí, desde iOS 16.4, si el usuario la agregó a la pantalla de inicio y aceptó las notificaciones.

¿Convertir mi app en PWA ayuda al SEO? No directamente. Las páginas se posicionan como cualquier página web; la velocidad que ganes con la caché puede mejorar la experiencia.

¿Una PWA reemplaza a una app nativa? En muchas herramientas de negocio, sí. En apps que dependen mucho del hardware o de estar en las tiendas, normalmente no.

¿Quieres que lo hagamos por ti?

Si quieres tu app instalable sin sorpresas de caché, nuestro equipo de desarrollo de apps móviles trabaja con PWA además de apps nativas, y el mantenimiento de software mantiene bajo control las versiones y las actualizaciones del service worker. Prueba antes la revisión gratuita de tu app o contáctanos con tu URL. La guía de MDN (en inglés) para hacer instalables las PWA detalla cada navegador.