Las trampas de hacer una PWA de verdad instalable
"Agregar un manifest.json y ya es una PWA" es una idea a medias. Un sitio con manifest se puede instalar en algunos casos, pero instalarla de verdad —que se sienta como una aplicación, que funcione sin conexión, que se vea bien como ícono en la pantalla de inicio— exige varias decisiones que solo se notan cuando alguien la instala en un celular real y la usa unos días, no en el primer intento en el navegador de escritorio.
El service worker no es opcional
El manifest le dice al navegador cómo se llama la app y qué ícono usar. Pero sin un service worker registrado, muchos navegadores directamente no ofrecen instalar el sitio, o lo instalan sin ningún soporte para funcionar sin conexión —que es la mitad de la promesa de una PWA. No es un detalle avanzado que se agrega después: es el componente que separa una PWA real de una página con un ícono bonito.
La trampa de la caché de un año
Una vez que el service worker está activo, es tentador cachear todo
de forma agresiva para que la app cargue instantánea la segunda vez.
El problema aparece cuando esa caché de larga duración —un año, por
ejemplo— incluye por accidente al propio archivo sw.js: el
navegador sigue sirviendo la versión vieja del service worker desde
caché, y esa versión vieja nunca se entera de que existe una
actualización, porque la lógica que debería revisarlo está en el
archivo que quedó congelado. La app deja de actualizarse para quien ya
la instaló, sin ningún error visible — simplemente se queda atrás. La
regla que aplico ahora: el archivo del service worker se sirve siempre
sin caché, o con una duración muy corta, aunque todo lo demás sí se
cachee agresivo.
La isla dinámica de iOS no lee tu theme-color
En Android, la etiqueta theme-color del manifest y del
HTML alcanza para que la barra del sistema combine con tu diseño. iOS
tiene su propia lógica alrededor de la isla dinámica y la barra de
estado que no siempre respeta ese mismo valor de la misma forma, sobre
todo si tu sitio cambia de tema según la hora o la preferencia del
sistema. La solución que funciona de forma confiable es declarar el
color con una media query —uno para tema claro, otro para tema
oscuro— en vez de un único valor fijo, y probarlo instalado en un
iPhone real, no solo en el simulador de Chrome DevTools.
Instalar y usar unos días, no solo instalar
La mayoría de estos problemas —el service worker congelado, el color que no combina, un ícono que se ve mal recortado en la pantalla de inicio— no aparecen en la primera instalación. Aparecen al segundo o tercer día de uso real, cuando el sitio publica una actualización y la app instalada no se entera, o cuando el usuario abre la app con el celular en modo oscuro por primera vez. Antes de dar una PWA por terminada, instalarla de verdad en un teléfono, usarla unos días y forzar una actualización del sitio para confirmar que sí llega, es la única prueba que de verdad valida el trabajo.