Manifest heeft geen maskeerbaar pictogram

Maskeerbare pictogrammen zijn een nieuw pictogramformaat dat ervoor zorgt dat uw PWA-pictogram er geweldig uitziet op alle Android-apparaten. Op nieuwere Android-apparaten krijgen PWA-pictogrammen die niet het maskeerbare pictogramformaat volgen een witte achtergrond. Wanneer u een maskeerbaar pictogram gebruikt, zorgt dit ervoor dat het pictogram alle ruimte in beslag neemt die Android ervoor biedt.

Hoe de Lighthouse-maskerbare pictogramaudit mislukt

Lighthouse markeert pagina's die geen maskerbare pictogramondersteuning hebben:

De maskeerbare pictogramaudit in de Lighthouse Report-gebruikersinterface.

Om de audit te doorstaan:

  • Er moet een web-app-manifest bestaan.
  • Het web-app-manifest moet een icons hebben.
  • De icons moet één object met een purpose bevatten, en de waarde van die purpose moet maskable bevatten.

Ondersteuning voor maskeerbare pictogrammen toevoegen aan uw PWA

  1. Gebruik Maskable.app Editor om een ​​bestaand pictogram te converteren naar een maskeerbaar pictogram.

  2. Voeg de eigenschap purpose toe aan een van de icons in uw webapp-manifest . Stel de waarde van purpose in op maskable . Zie Waarden .

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

  3. Gebruik Chrome DevTools om te controleren of het maskeerbare pictogram correct wordt weergegeven. Zie Zijn mijn huidige pictogrammen gereed?

Bronnen