Cómo usar: Generador de Manifest PWA
- Escribe el nombre de la app, un nombre corto para la pantalla de inicio (12 caracteres o menos), una descripción y la URL de inicio.
- Elige el modo de visualización (standalone para una ventana tipo app) y los colores del tema y del fondo que se usan en la barra de título y en la pantalla de inicio.
- Indica dónde están tus iconos (192 y 512 px, además de uno maskable), deja activado el service worker sin conexión y elige la estrategia de caché que mejor encaje con tu sitio.
- Descarga el ZIP, coloca los archivos en la raíz de tu sitio, añade las etiquetas del
<head>y revisa Chrome DevTools → Application → Manifest.
Qué hace que un sitio sea instalable
- Se sirve por HTTPS.
- Tiene un manifest de app web con
nameoshort_name,start_url, undisplaydistinto debrowsery iconos de al menos 192 px y 512 px. - Enlaza el manifest en el
<head>de la página. Chrome ya no exige un service worker para instalar, pero necesitas uno para funcionar sin conexión.
Estrategias de caché del service worker
| Estrategia | Cómo responde | Ideal para |
|---|---|---|
| Red primero | Intenta la red y, si no hay conexión, recurre a la caché | Páginas (siempre se usa para el HTML aquí) |
| Stale-while-revalidate | Responde al instante desde la caché y actualiza la caché en segundo plano | CSS, JS e imágenes que cambian de vez en cuando |
| Caché primero | Usa la caché y solo va a la red cuando el archivo no está | Archivos con hash o versión en el nombre |
Incrementa la versión de caché al desplegar, para que el nuevo service worker borre las cachés antiguas al activarse. Si nada está en caché y no hay red, los visitantes verán offline.html.
También se busca como: generador manifest pwa, generador web app manifest, generador manifest.json, generador service worker, generador pwa, hacer web instalable, service worker sin conexión, generador webmanifest.
Herramientas que combinan con: Generador de Manifest PWA
- Generador de iconos de aplicaciones — Sube una imagen cuadrada y obtén todos los tamaños de iconos que necesita tu app —un AppIcon.appiconset listo para Xcode, carpetas mipmap de Android con iconos adaptativos, el icono de Play Store e iconos para web y PWA— en un único archivo ZIP.
- Generador de favicons — Crea un paquete completo de favicones a partir de un logotipo, una letra o un emoji: un archivo favicon.ico con varios tamaños, un icono táctil de Apple, iconos para Android y PWA, un webclip de Webflow, el manifiesto web y las etiquetas HTML para pegar.
- Generador de Meta Tags — Rellena un solo formulario y obtén un <head> completo y válido: título, descripción, canonical, robots, Open Graph, cards de X/Twitter, color del tema e iconos, con vistas previas en vivo y salida específica para Webflow.
- Generador de archivos Deep Link — Crea los dos archivos que hacen que los enlaces de tu sitio web abran tu app: apple-app-site-association para Universal Links en iOS y assetlinks.json para App Links en Android.
Preguntas frecuentes
¿Es manifest.json o manifest.webmanifest?
Funcionan las dos. La extensión recomendada por la especificación es .webmanifest (servida como application/manifest+json); .json también sirve, siempre que el apunte a él.
¿Qué es un icono maskable?
Es un icono con margen extra (una zona segura en el 80% central) que Android puede recortar en círculo, squircle u otra forma sin cortar tu logotipo.
¿Por qué mi PWA no muestra el botón de instalar?
Revisa Chrome DevTools → Application → Manifest en busca de errores: normalmente falta un icono de 192 o 512 px, start_url o scope son incorrectos, display está en browser o la página no se sirve por HTTPS.
¿Cómo actualizo una PWA después de desplegar?
Cambia la versión de caché en sw.js. El navegador instala el nuevo service worker, que elimina las cachés antiguas y toma el control (skipWaiting y clients.claim), así que los usuarios recibirán los archivos nuevos en su próxima visita.
¿Puedo instalar Generador de Manifest PWA como aplicación web y utilizarla sin conexión?
Sí. Generador de Manifest PWA es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.