Le icone mascherabili sono un nuovo formato di icone che garantisce che l'icona PWA venga visualizzata ottimo su tutti i dispositivi Android. Sui dispositivi Android più recenti, le icone PWA che non seguono le icone mascherabili hanno uno sfondo bianco. Quando utilizzi un oggetto assicura che l'icona occupi tutto lo spazio disponibile da Android.
Come funziona il controllo delle icone mascherabili di Lighthouse
Lighthouse segnala le pagine che non supportano le 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 quella proprietàpurpose
deve includeremaskable
.
Come aggiungere il supporto delle icone mascherabili alla PWA
- Utilizza l'Editor Maskable.app per convertire un'icona esistente in un'icona mascherabile.
Aggiungi la proprietà
purpose
a uno degli oggettiicons
nel file manifest dell'app web. Imposta il valore dipurpose
sumaskable
. Consulta 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?