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.

Consigli

  • 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.
  • Fra le icone inseritene almeno una di 192x192 e, se possibile, anche una di 512x512: la prima serve alla schermata iniziale, la seconda alla schermata di avvio.
  • 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.

Domande frequenti

Le condizioni di installazione dei principali navigatori richiedono il nome completo o quello breve, l'indirizzo iniziale, la modalità di visualizzazione — fullscreen, standalone, minimal-ui oppure browser — e un vettore di icone che ne comprenda almeno una di 192x192. Se anche uno solo manca, l'invito all'installazione può non comparire.

È 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.

La verifica riguarda soltanto la conformità del manifesto alla specifica. L'installabilità reale dipende anche da altre condizioni, come la distribuzione in HTTPS e la corretta registrazione del lavoratore di servizio: completate quindi il controllo con gli strumenti per sviluppatori del navigatore e con una prova sul dispositivo.
Tool-kun

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 altre condizioni che incidono sull'installabilità reale, come la registrazione del lavoratore di servizio o la distribuzione in HTTPS. Per la verifica definitiva in produzione conviene affiancare gli strumenti per sviluppatori del navigatore, per esempio il pannello delle applicazioni.