Il Web App Manifest
Scrivere un manifest.json con name, icons, start_url, display e theme_color affinché i browser propongano l’opzione per aggiungere l’app alla schermata Home
Il Web App Manifest è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Che cos'è una PWA?
Una Progressive Web App è un sito web con funzionalità tipiche delle app native: può essere installato nella schermata Home, funziona offline e può ricevere notifiche push. I tre elementi fondamentali sono un Web App Manifest, un Service Worker e HTTPS.
Il file manifest
manifest.json (o .webmanifest) è un file JSON che descrive i metadati dell'app. I browser lo leggono per abilitare l'opzione "Aggiungi alla schermata Home" e avviare l'app come se fosse nativa.
Manifest di base
Un manifest minimo include name, icons, start_url e la modalità di visualizzazione.
// 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" }
]
}Collegare il manifest
Collegatelo dall'HTML <head>.
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2563eb">Modalità display
"display" controlla gli elementi dell'interfaccia della finestra dell'app: "standalone" (senza interfaccia del browser, con aspetto da app), "fullscreen" (immersiva, nasconde la barra di stato), "minimal-ui" (alcuni controlli del browser), "browser" (scheda normale).
Icone: più dimensioni
Fornite icone in più dimensioni. Android moderno richiede 192 e 512; Apple ne richiede altre. Usate "purpose": "maskable" per le icone Android adattive.
"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" }
]Tag specifici per Apple
iOS non supporta completamente il manifest. Aggiungete meta tag specifici per Apple per consentire l'aggiunta alla schermata Home su 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">Prompt di installazione
I browser generano un evento beforeinstallprompt quando vengono soddisfatti i requisiti (manifest + service worker + HTTPS + interazione dell'utente). Potete rimandarlo e attivarlo dalla vostra interfaccia.
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;
}Scorciatoie (App Shortcuts)
Il manifest può dichiarare scorciatoie che compaiono tenendo premuta a lungo l'icona dell'app installata.
"shortcuts": [
{
"name": "New Note",
"short_name": "New",
"url": "/notes/new",
"icons": [{ "src": "/icons/new-96.png", "sizes": "96x96" }]
}
]Categorie e screenshot
Aggiungete categories e screenshots per un'interfaccia di installazione più completa su Chrome Android e 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" }
]Testare il manifest
Aprite DevTools → Application → Manifest. Chrome mostra i campi del manifest analizzati, le anteprime delle icone e gli avvisi (icone mancanti, contrasto ridotto e così via).
I framework semplificano tutto
Next.js: inserite manifest.webmanifest in public/. Nuxt: installate il modulo @vite-pwa/nuxt. Vite: vite-plugin-pwa genera automaticamente manifest e 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' }]
}
})]
};Verifica rapida
Quale valore di display in un Web App Manifest fa sì che la PWA installata si apra senza alcuna interfaccia del browser, come un'app nativa?
Riepilogo: Web App Manifest
File JSON che descrive i metadati della PWA. Includete name, short_name, start_url, display, theme_color e icons (in più dimensioni e con supporto maskable). Collegatelo nell'HTML con rel=manifest. iOS richiede meta tag specifici per Apple. L'evento beforeinstallprompt consente di creare un'interfaccia di installazione personalizzata. shortcuts e screenshots rendono più completa l'installazione. I framework (Vite PWA, Next, Nuxt PWA) automatizzano la generazione.
Domande Frequenti
La lezione «Il Web App Manifest» è gratuita?
Sì — il testo completo di «Il Web App Manifest» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Il Web App Manifest»?
Scrivere un manifest.json con name, icons, start_url, display e theme_color affinché i browser propongano l’opzione per aggiungere l’app alla schermata Home Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Il Web App Manifest»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Frontend Academy?
Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Il Web App Manifest
- Registrazione e ciclo di vita del Service Worker
- Strategie di caching offline: CacheFirst e NetworkFirst
- Notifiche push