Le icone mascherabili sono un nuovo formato di icone che garantisce un aspetto ottimale dell'icona della PWA su tutti i dispositivi Android. Sui dispositivi Android più recenti, le icone PWA che non rispettano il formato dell'icona mascherabile hanno uno sfondo bianco. Quando utilizzi un'icona mascherabile, questa occupa tutto lo spazio a disposizione su Android.
Come viene eseguito il controllo delle icone mascherabili di Lighthouse
Lighthouse segnala le pagine che non supportano le icone mascherabili:

Per superare la verifica:
- Deve esistere un 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 tua PWA
- Utilizza Maskable.app Editor per convertire un'icona esistente in un'icona mascherabile.
Aggiungi la proprietà
purpose
a uno degli oggettiicons
nel 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. Consulta Le mie icone attuali sono pronte?