Le icone mascherabili sono un nuovo formato di icona che garantisce che l'icona della PWA venga visualizzata correttamente su tutti i dispositivi Android. Sui dispositivi Android più recenti, alle icone PWA che non seguono il formato mascherabile viene assegnato uno sfondo bianco. L'utilizzo di un'icona mascherabile garantisce che occupi tutto lo spazio fornito da Android.
In che modo il controllo dell'icona mascherabile Lighthouse non va a buon fine
Lighthouse segnala le pagine che non supportano icone mascherabili:
Per superare il controllo:
- Deve esistere un file manifest dell'app web.
- Il file manifest dell'app web deve avere un array
icons
. - L'array
icons
deve contenere un oggetto con una proprietàpurpose
e il valore di questa proprietàpurpose
deve includeremaskable
.
Come aggiungere il supporto delle icone mascherabili alla PWA
- Utilizza l'editor di Maskable.app per convertire un'icona esistente in un'icona mascherabile.
Aggiungi la proprietà
purpose
a uno degli oggettiicons
nel tuo file manifest dell'app web. Imposta il valore dipurpose
sumaskable
. Vedi Valori.{ … "icons": [ … { "src": "path/to/maskable_icon.png", "sizes": "196x196", "type": "image/png", "purpose": "maskable" } ] … }
Utilizza Chrome DevTools per verificare che l'icona mascherabile venga visualizzata correttamente. Vedi Le mie icone attuali sono pronte?