Il file manifest non ha un'icona mascherabile

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:

Controllo delle icone mascherabili nella UI 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 quella proprietà purpose deve includere maskable.
di Gemini Advanced.

Come aggiungere il supporto delle icone mascherabili alla PWA

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

  2. Aggiungi la proprietà purpose a uno degli oggetti icons nel file manifest dell'app web. Imposta il valore di purpose su maskable. Consulta 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