Verifica del manifesto delle applicazioni web (manifest.json)

Basta incollare il contenuto del file manifest.json per accertare se siano soddisfatte le condizioni di installazione di un'applicazione web progressiva. Controlla i campi obbligatori — nome, indirizzo iniziale, modalità di visualizzazione, icone — e la presenza di un'icona mascherabile, elencando i difetti riscontrati.

Ultimo aggiornamento: 2026-10-18

Verificare se un manifest.json soddisfi le condizioni di una PWA

Un Web App Manifest è il file JSON che decide l'icona, il nome e l'aspetto all'avvio quando un sito viene aggiunto a una schermata iniziale. Incollatene il contenuto e questo strumento controlla le voci richieste come name, start_url, display e icons, insieme alla presenza di un'icona maskable, ed elenca ciò che manca.

Ciò che qui merita attenzione è che un manifest completo non basta da solo a rendere un sito installabile. Fra le condizioni alle quali Chrome propone l'installazione figurano l'essere servito in HTTPS e l'aver avuto un'interazione dell'utente con la pagina, e nessuna si può giudicare dal contenuto del manifest (per l'installazione dal menu del browser, Chrome non richiede più un service worker dalla versione 108 su dispositivi mobili e 112 su desktop). Ciò che questo strumento esamina è soltanto la parte di quelle condizioni di cui il manifest risponde. L'altro punto è l'icona maskable: senza di essa Android rimpicciolisce l'icona dentro un cerchio bianco. Fornire un'immagine a parte con purpose posto a maskable consente al sistema di disegnarla fino al bordo della forma che l'apparecchio adopera.

Come si usa

Incollate il contenuto di manifest.json Inserite l'intero JSON così com'è.
Provate prima gli esempi Sono forniti un esempio completo e uno minimo.
Leggete ciò che manca Vengono riferite sia le voci richieste assenti sia la presenza o l'assenza di un'icona maskable.
Controllate anche le condizioni esterne al manifest, come HTTPS Che il sito sia servito in HTTPS è una condizione esterna al manifest. Non giudicate dal solo esito di questo strumento.

Consigli per sfruttarlo al meglio

Conviene indicare tanto il nome completo quanto quello breve: in assenza del secondo, il testo che compare sotto l'icona nella schermata iniziale viene troncato meccanicamente dal primo, con esiti indesiderati.
Senza un'icona con purpose "maskable", su alcuni dispositivi Android l'icona può risultare ritagliata in modo innaturale o lasciare trasparire il colore di sfondo. Basta aggiungere al vettore delle icone una voce dedicata per risolvere il problema.
Prevedete sempre icone da 192x192 e da 512x512: i criteri di installazione di Chrome richiedono entrambe le dimensioni.
Le condizioni di installazione realmente applicate dai navigatori possono cambiare in futuro: considerate l'esito di questa verifica come un'indicazione e completate il controllo, per esempio, con il pannello delle applicazioni degli strumenti per sviluppatori.
L'indirizzo iniziale può essere anche un percorso relativo, come "/?source=pwa". Aggiungendovi un parametro di interrogazione potrete distinguere più facilmente, negli strumenti di analisi, gli avvii provenienti dall'applicazione installata.

Quando torna utile

Nell'avviare il lavoro su una PWA

Nella fase in cui non è chiaro che cosa scrivere, potete stabilire quali voci occorrano.

Nel circoscrivere perché un sito non si installi

Potete accertare anzitutto se la colpa stia nel manifest.

Nel migliorare l'aspetto dell'icona

Aggiungere un'icona maskable cambia il modo in cui il sito appare su una schermata iniziale Android.

Nell'ispezionare una configurazione esistente

Potete accertare se un manifest scritto tempo fa soddisfi ancora le condizioni odierne.

Termini del Web App Manifest

Name e short_name: Il nome dell'applicazione. short_name compare sotto l'icona della schermata iniziale, perciò tenetelo abbastanza corto da starci.
Start_url: L'indirizzo che si apre all'avvio dalla schermata iniziale. Non deve per forza essere la pagina d'ingresso.
Display: L'aspetto all'avvio. Porre standalone toglie la barra degli indirizzi del browser e gli dà l'aria di un'applicazione.
Icons: L'elenco delle icone. I criteri di installazione di Chrome richiedono sia un'icona da 192×192 sia una da 512×512.
Maskable: Un'immagine preparata nel presupposto che verrà ritagliata secondo la forma d'icona che l'apparecchio usa. Si dichiara tramite purpose.
Theme_color: Il colore adoperato per la barra di stato e simili all'avvio. Accordarlo alla tavolozza del sito dà un'impressione d'insieme.

Domande frequenti

I criteri di installazione delle PWA di Chrome richiedono name oppure short_name, start_url, display (fullscreen, standalone, minimal-ui o window-controls-overlay; browser non è ammesso) e un vettore icons che comprenda un'icona da 192px e una da 512px. Inoltre prefer_related_applications deve essere assente o valere false. Se manca anche uno solo di questi elementi, il sito non si può installare.

È un'icona con la proprietà purpose impostata su "maskable". I dispositivi Android ritagliano le icone della schermata iniziale in forma circolare o quadrata con angoli arrotondati, e un'immagine ordinaria rischia di perdere i bordi del disegno. L'icona mascherabile riserva al centro un margine, la cosiddetta zona sicura, così da apparire integra qualunque sia la forma del ritaglio.

Con larghezza e altezza separate dalla lettera x, come «192x192». Se un unico file copre più dimensioni, per esempio un'immagine vettoriale, si può indicare «any». Per esprimere più dimensioni in una sola voce si possono anche elencare separate da spazi, come «192x192 512x512».

La specifica del consorzio del web ne definisce quattro: fullscreen, che usa l'intero schermo; standalone, che nasconde l'interfaccia del navigatore dando un aspetto da applicazione; minimal-ui, che ne mostra il minimo indispensabile; e browser, che apre la pagina in una scheda ordinaria. Per un aspetto da applicazione si sceglie di norma standalone. Indicando browser, però, i criteri di installazione di Chrome non sono soddisfatti e il sito non si può installare come applicazione.

Si tratta soltanto di un controllo statico della conformità del contenuto di manifest.json alla specifica. La possibilità effettiva di installare l'applicazione dipende anche da altre condizioni, come la distribuzione in HTTPS e un'interazione dell'utente con la pagina: eseguite quindi la verifica finale anche con gli strumenti per sviluppatori del browser o su un dispositivo reale.

A proposito — il manifesto delle applicazioni web e le applicazioni progressive

Il manifesto delle applicazioni web è una specifica in formato JSON definita dal consorzio del web, che raccoglie le informazioni necessarie ad aggiungere e installare un sito nella schermata iniziale come se fosse un'applicazione nativa: nome, icone, modalità di visualizzazione all'avvio, colore del tema. L'espressione «applicazione web progressiva» fu proposta nel 2015 da alcuni ingegneri di Google, e proprio questo manifesto, insieme al lavoratore di servizio che consente il funzionamento fuori linea, ne costituisce il nucleo tecnico.

Se il manifesto non è configurato correttamente, il navigatore non riconosce l'applicazione come installabile e non mostra l'invito ad aggiungerla alla schermata iniziale. Le icone di risoluzione insufficiente e i valori errati nella modalità di visualizzazione sono difetti particolarmente insidiosi, perché il JSON resta sintatticamente valido e ci si accorge del problema soltanto tentando l'installazione.

Le icone mascherabili sono una specifica relativamente recente, aggiunta intorno al 2019 per adattarsi alle icone adattive di Android. Le icone ordinarie sono ritagliate dal dispositivo in forma circolare o quadrata con angoli arrotondati: se l'immagine non ha margini, parte del logo viene tagliata. Un'icona mascherabile va disegnata tenendo conto di una zona sicura ed è consuetudine prepararla a parte rispetto alle icone ordinarie.

Questo strumento si limita alla verifica statica del solo manifesto e non accerta condizioni esterne al manifesto, come la distribuzione in HTTPS o la registrazione del lavoratore di servizio. Per la verifica definitiva in produzione conviene affiancare gli strumenti per sviluppatori del navigatore, per esempio il pannello delle applicazioni.

Vedi tutte le curiosità