Hoy tengo cinco apps funcionando como PWA, todas construidas con Claude Code y publicadas en Vercel: AXON, el CRM de Divine Machinery, Las Trincheras, el panel de Shushi y mi app de tareas. Ninguna pasó por una tienda. Estos son los errores que me costaron horas, cómo los resolví y un prompt para que tu IA no los cometa.
Tu cliente abre el link, toca Agregar a pantalla de inicio y le queda el ícono como cualquier app. Se abre en pantalla completa, sin la barra del navegador.
Un manifest (nombre, colores e íconos), un service worker (lo que la deja abrir rápido y sin señal) y los íconos. Tu IA los arma en minutos.
Para publicar en Google Play con una cuenta personal nueva te piden 12 testers durante 14 días seguidos. Una PWA sale con el mismo deploy de tu web.
En AXON, el botón de instalar no funcionaba. El navegador pide el manifest sin cookies, y el middleware que protege la app lo mandaba al login en vez de entregarlo.
Cómo evitarloSi tu app tiene usuarios, deja por fuera del login el manifest, el sw.js, los íconos y la página sin conexión. Es lo primero que reviso en cada app nueva.
Con el service worker activo en desarrollo, cambiaba un componente y la pantalla seguía igual, con errores raros que en realidad no existían.
Cómo evitarloRegistra el service worker solo en producción. En desarrollo no lo necesitas.
AXON, julio de 2026Después de un deploy, la app que el cliente tenía abierta en el iPhone seguía con el código anterior hasta que la cerraba y la volvía a abrir.
Cómo evitarloSirve el sw.js sin caché (Cache-Control: no-cache), regístralo con updateViaCache: 'none' y haz que las páginas vayan primero a la red. Ponle versión a la caché (v1, v2) y súbela en cada cambio grande. Y avísale a tu cliente que después de una actualización cierre la app y la abra de nuevo.
Pasé el ícono de mi app de tareas de azul a verde y la app seguía mostrando el azul: el archivo se llamaba igual y estaba guardado en caché. En esta misma web me pasó con una foto, porque las imágenes se guardan por un año.
Cómo evitarloCuando cambies un ícono o una imagen, cámbiale el nombre al archivo (icono-v2.png) y sube la versión del service worker.
Los primeros íconos del CRM no tenían versión maskable ni estaban pensados para el recorte de Android, que los muestra en círculo o en gota. Tocó regenerarlos.
Cómo evitarloÍconos opacos de 192 y 512 px, una versión maskable con el logo dentro del 80 % del centro y un apple-touch-icon de 180 px para el iPhone.
En el inventario de AXON, escanear un QR con la cámara del iPhone abría Safari, y ahí pedía iniciar sesión otra vez. iOS no comparte las cookies entre Safari y la app instalada.
Cómo evitarloLo que el usuario hace dentro de la app tiene que pasar dentro de la app. En AXON terminamos haciendo un escáner de QR propio.
AXON, julio de 2026En el iPhone, Agregar a inicio guarda la URL que estás viendo. En una página que se abre con un link privado, el ícono quedaba con ese link adentro.
Cómo evitarloDefine un start_url fijo en el manifest, y a las páginas que se abren con links privados no les pongas manifest.
Las Trincheras manda un recordatorio diario con notificaciones. En el iPhone, Safari no deja activarlas si la app no está agregada a la pantalla de inicio.
Cómo evitarloDetecta si es un iPhone sin instalar y muéstrale primero cómo agregarla a inicio. Y al tocar una notificación, abre solo páginas de tu app, nunca la dirección que venga en el mensaje.
Las Trincheras, octubre de 2026Mi botón de instalar depende de un aviso del navegador que nunca llega cuando el link se abre desde Instagram o WhatsApp, y que el iPhone no tiene.
Cómo evitarloTen un plan B: un cartel para iPhone que diga Compartir y luego Agregar a inicio, y un aviso para abrir el link en Safari o Chrome. Ojo, que este mismo link te llegó por Instagram.
App de tareas y panel de ShushiChrome del computador no reproduce todo lo que hace Safari en el iPhone. En AXON, el iPhone hacía zoom solo cada vez que alguien escribía, y había botones que quedaban por fuera de la pantalla.
Cómo evitarloPrueba en un iPhone de verdad, con la app instalada. Usa letra de 16 px o más en los campos (con menos, el iPhone hace zoom), márgenes seguros para el notch y nada de alturas fijas.
AXON y CRM de Divine Machinery, julio a septiembre de 2026Android congela la app cuando queda en segundo plano y corta la conexión en tiempo real. Al volver, mostraba datos de hace rato.
Cómo evitarloCuando la app vuelva al frente, que recargue los datos.
App de tareas, octubre de 2026display: standalone y un start_url fijo.apple-touch-icon de 180 px.sw.js e íconos por fuera del login.Pégalo en Claude Code, Cursor o la herramienta que uses, y cambia lo que está entre corchetes.
Quiero que mi aplicación tenga la funcionalidad de PWA, para que mis clientes la instalen desde el navegador en el celular y en el computador, sin pasar por las tiendas. Está hecha en [Next.js, Vite, HTML…] y se publica en [Vercel, Netlify…]. ## Lo que necesito - Un manifest con el nombre [NOMBRE DE LA APP], los colores de la marca, display standalone y un start_url fijo. - Íconos opacos de 192 y 512 px, una versión maskable con el logo dentro del 80 % del centro y un apple-touch-icon de 180 px. Sácalos de [ruta del logo]. - Un service worker escrito a mano, sin librerías, con estas reglas: - Las páginas van primero a la red. Sin señal, muestran la última copia o una página sin conexión. - Los archivos estáticos con versión en el nombre pueden salir de la caché. - Nunca guardes en caché la API, la base de datos ni nada con datos del usuario. - La caché lleva versión en el nombre (v1). Cuando cambie algo grande, súbela y borra las anteriores. - Regístralo solo en producción, con updateViaCache: 'none', y sirve el sw.js con Cache-Control: no-cache. ## Errores que no quiero repetir - Si la app tiene login, deja por fuera de la protección el manifest, el sw.js, los íconos y la página sin conexión. El navegador pide el manifest sin cookies. - Si cambias un ícono o una imagen, cámbiale el nombre al archivo. - En el iPhone no existe el botón automático de instalar: agrega un cartel que explique Compartir y luego Agregar a inicio. En el navegador de Instagram o de WhatsApp tampoco aparece: ahí pide abrir el link en Safari o Chrome. - Lo que el usuario hace dentro de la app pasa dentro de la app: en el iPhone, Safari y la app instalada no comparten la sesión. - Campos de texto con letra de 16 px o más (si no, el iPhone hace zoom), márgenes seguros para el notch y nada de alturas fijas. - Si hay notificaciones: en el iPhone solo funcionan con la app instalada, así que pide instalarla primero. Al tocar una notificación, abre solo páginas de esta app. - Cuando la app vuelva al frente, recarga los datos. ## Antes de terminar Revisa con Lighthouse que la app sea instalable y dime, paso a paso, cómo probarla en un iPhone y en un Android con la app instalada.
Quiero verla. Y si tu empresa necesita una app a la medida, en Divine Machinery las construimos con IA.