Stax

Constructor de Manifiesto PWA

Genera un Manifiesto de Aplicación Web completo para tu PWA.

{
  "name": "My PWA App",
  "short_name": "MyApp",
  "description": "A Progressive Web Application",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "any",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "lang": "en",
  "categories": [
    "utilities"
  ],
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#000000" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="MyApp" />

¿Qué es el constructor de manifest PWA?

Esta herramienta genera el JSON Web App Manifest completo para Progressive Web App — con nombre, iconos, tema, modo de display.

Cómo crear manifest

  1. Ingresa nombre y nombre corto de app.
  2. Sube iconos (192×192, 512×512).
  3. Selecciona colores de tema y fondo.
  4. Selecciona modo de display.
  5. Copia el JSON generado.

Campos requeridos

  • name, short_name (nombres de app)
  • icons (192×192, 512×512)
  • start_url (página por defecto)
  • display (standalone/fullscreen)
  • theme_color, background_color

Preguntas frecuentes

¿Qué es el Web App Manifest?
Archivo JSON que define la PWA (Progressive Web App) — nombre, icono, color de tema, modo de display, URL de inicio. Habilita la función "Agregar a pantalla de inicio" del navegador.
¿Cuáles son los campos requeridos?
name, short_name, icons (192×192, 512×512), start_url, display (standalone/fullscreen). theme_color, background_color recomendados. Service worker es separado — el manifest solo define el comportamiento de instalación.
¿Cuáles son los modos de display?
standalone — se ve como app nativa, sin UI del navegador. fullscreen — pantalla completa, inmersivo. minimal-ui — controles mínimos del navegador. browser — pestaña regular. La mayoría de PWAs usan standalone.
¿Diferencia entre PWA y app nativa?
PWA: tecnologías web, multiplataforma, sin app store, actualizaciones instantáneas. Nativa: mejor rendimiento, acceso completo al dispositivo (NFC, BLE limitados), presencia en app store. También existen soluciones híbridas (Capacitor, Cordova).

Herramientas relacionadas