Il file manifest non ha un'icona mascherabile

.

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:

Il controllo delle icone mascherabili nell'interfaccia utente del report Lighthouse.

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 includere maskable.

Come aggiungere il supporto delle icone mascherabili alla tua PWA

  1. Utilizza Maskable.app Editor per convertire un'icona esistente in un'icona mascherabile.

  2. Aggiungi la proprietà purpose a uno degli oggetti icons nel manifest dell'app web. Imposta il valore di purpose su maskable. Vedi Valori.

    {
  …
  "icons": [
    …
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
  …
}

  3. Utilizza Chrome DevTools per verificare che l'icona mascherabile venga visualizzata correttamente. Consulta Le mie icone attuali sono pronte?

Risorse