Falta el Web App Manifest — Habilita "Añadir a pantalla de inicio" y funciones PWA

¿Qué es un web app manifest?

Un web app manifest (manifest.json o site.webmanifest) es un archivo JSON que proporciona metadatos sobre tu aplicación web. Indica a los navegadores cómo debe comportarse tu app cuando se instala en el dispositivo del usuario.

Qué permite

“Añadir a pantalla de inicio” — El aviso de instalación en Android Chrome
Experiencia similar a una app — Se abre sin la interfaz del navegador (pantalla completa o standalone)
Icono y nombre personalizados — Cómo aparece tu app en la pantalla de inicio
Pantalla de carga — Una pantalla de inicio al abrir la app
Funciones PWA — Service workers, soporte offline, notificaciones push
Tiendas de apps — Necesario para publicar PWAs en Google Play mediante TWA

Cómo solucionarlo

1. Crea el archivo manifest

Crea site.webmanifest en tu directorio público:

{
  "name": "Your App Name",
  "short_name": "App",
  "description": "A brief description of your app",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4285f4",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

2. Enlázalo en tu HTML

<link rel="manifest" href="/site.webmanifest" />

Propiedades clave del manifest

Propiedad	Descripción
`name`	Nombre completo de la app (se muestra en el diálogo de instalación)
`short_name`	Nombre corto (se muestra bajo el icono en la pantalla de inicio)
`start_url`	URL que se abre al iniciar la app
`display`	Modo de visualización: `standalone`, `fullscreen`, `minimal-ui`, `browser`
`theme_color`	Color de la barra de herramientas (coincide con la meta etiqueta theme-color)
`background_color`	Color de fondo de la pantalla de carga
`icons`	Array de objetos de icono con src, sizes y type

Buenas prácticas

Proporciona múltiples tamaños de icono — Como mínimo 192x192 y 512x512
Usa el modo standalone — Para la experiencia más similar a una app
Establece start_url como ”/” — O una landing page específica para usuarios con la app instalada
Incluye un icono maskable — Para soporte de iconos adaptativos en Android
Valida — Usa Chrome DevTools > Application > Manifest para verificar