El manifiesto de la aplicación web
Escriba un manifest.json con name, icons, start_url, display y theme_color para que los navegadores ofrezcan la opción de añadir la aplicación a la pantalla de inicio.
El manifiesto de la aplicación web es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué es una PWA?
Una aplicación web progresiva es un sitio web con capacidades de aplicación nativa: se puede instalar en la pantalla de inicio, funciona sin conexión y puede recibir notificaciones push. Sus tres componentes fundamentales son un Web App Manifest, un Service Worker y HTTPS.
El archivo de manifiesto
manifest.json (o .webmanifest) es un archivo JSON que describe los metadatos de su aplicación. Los navegadores lo leen para habilitar «Añadir a la pantalla de inicio» y ejecutar la aplicación como si fuera nativa.
Manifiesto básico
Un manifiesto mínimo incluye name, icons, start_url y el modo de display.
// public/manifest.webmanifest
{
"name": "Coddy Notes",
"short_name": "Notes",
"description": "Lightweight markdown notes",
"start_url": "/?source=pwa",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2563eb",
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
]
}Enlazar el manifiesto
Enlácelo desde el <head> de su HTML.
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2563eb">Modos de display
"display" controla los elementos de la ventana de la aplicación: "standalone" (sin interfaz del navegador, con aspecto de aplicación), "fullscreen" (inmersivo, oculta la barra de estado), "minimal-ui" (algunos controles del navegador) y "browser" (pestaña normal).
Iconos: varios tamaños
Proporcione iconos de varios tamaños. Android moderno requiere los tamaños 192 y 512; Apple necesita tamaños adicionales. Use "purpose": "maskable" para los iconos adaptables de Android.
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]Etiquetas específicas de Apple
iOS no admite completamente el manifiesto. Añada etiquetas meta específicas de Apple para «Añadir a la pantalla de inicio» en iOS.
<link rel="apple-touch-icon" href="/icons/apple-180.png">
<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="Notes">Aviso de instalación
Los navegadores lanzan el evento beforeinstallprompt cuando se cumplen los criterios (manifest + service worker + HTTPS + interacción del usuario). Puede posponerlo y activarlo desde su propia interfaz.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
showInstallButton();
});
async function onInstallClick() {
if (!deferredPrompt) return;
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
console.log('install:', outcome);
deferredPrompt = null;
}Accesos directos (App Shortcuts)
El manifest puede declarar accesos directos que aparecen al mantener pulsado el icono de la aplicación instalada.
"shortcuts": [
{
"name": "New Note",
"short_name": "New",
"url": "/notes/new",
"icons": [{ "src": "/icons/new-96.png", "sizes": "96x96" }]
}
]Categorías y capturas de pantalla
Añada categories y screenshots para obtener una interfaz de instalación más completa en Chrome para Android y Windows.
"categories": ["productivity", "utilities"],
"screenshots": [
{ "src": "/screens/home.png", "sizes": "1280x720", "type": "image/png", "form_factor": "wide" },
{ "src": "/screens/mobile.png", "sizes": "720x1280", "type": "image/png", "form_factor": "narrow" }
]Probar el manifiesto
Abra DevTools → Application → Manifest. Chrome muestra los campos analizados del manifiesto, vistas previas de los iconos y advertencias (iconos ausentes, poco contraste, etc.).
Los frameworks lo facilitan
Next.js: coloque manifest.webmanifest en public/. Nuxt: instale el módulo @vite-pwa/nuxt. Vite: vite-plugin-pwa genera automáticamente el manifiesto y el service worker.
// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa';
export default {
plugins: [VitePWA({
manifest: {
name: 'Coddy Notes',
icons: [{ src: '/192.png', sizes: '192x192', type: 'image/png' }]
}
})]
};Comprobación rápida
¿Qué valor de display en un Web App Manifest hace que la PWA instalada se abra sin ninguna interfaz del navegador, como una aplicación nativa?
Resumen: Web App Manifest
Archivo JSON que describe los metadatos de una PWA. Incluya name, short_name, start_url, display, theme_color e icons (varios tamaños y maskable). Enlácelo en HTML mediante rel=manifest. iOS necesita etiquetas meta específicas de Apple. Use el evento beforeinstallprompt para crear una interfaz de instalación personalizada. Añada shortcuts y screenshots para una instalación más completa. Los frameworks (Vite PWA, Next y Nuxt PWA) automatizan la generación.
Preguntas frecuentes
¿La lección «El manifiesto de la aplicación web» es gratis?
Sí — el texto completo de «El manifiesto de la aplicación web» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «El manifiesto de la aplicación web»?
Escriba un manifest.json con name, icons, start_url, display y theme_color para que los navegadores ofrezcan la opción de añadir la aplicación a la pantalla de inicio. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «El manifiesto de la aplicación web»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El manifiesto de la aplicación web
- Registro y ciclo de vida de un Service Worker
- Estrategias de caché sin conexión: CacheFirst y NetworkFirst
- Notificaciones push