Il file manifest non ha un'icona mascherabile

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:

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

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

Come aggiungere il supporto delle icone mascherabili alla PWA

  1. Utilizza l'editor di Maskable.app per convertire un'icona esistente in un'icona mascherabile.

  2. Aggiungi la proprietà purpose a uno degli oggetti icons nel tuo file 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. Vedi Le mie icone attuali sono pronte?

Risorse