Manifest hat kein maskierbares Symbol

Maskierbare Symbole ist ein neues Symbolformat, mit dem du dafür sorgen kannst, dass dein PWA-Symbol auf allen Android-Geräten gut aussieht. Auf neueren Android-Geräten haben PWA-Symbole, die nicht dem maskierbaren Symbolformat entsprechen, einen weißen Hintergrund. Wenn Sie ein maskierbares Symbol verwenden, nimmt es den gesamten Platz ein, den Android dafür zur Verfügung stellt.

So schlägt die Prüfung maskierbarer Symbole in Lighthouse fehl

Lighthouse kennzeichnet Seiten, die nicht maskierbare Symbole unterstützen:

Die Prüfung maskierbarer Symbole in der Lighthouse-Bericht-UI.

So besteht die Prüfung:

  • Es muss ein Manifest für die Web-App vorhanden sein.
  • Das Manifest der Web-App muss ein icons-Array haben.
  • Das Array icons muss ein Objekt mit einem purpose-Attribut enthalten und der Wert dieses purpose-Attributs muss maskable enthalten.

Unterstützung für maskierbare Symbole zu Ihrer PWA hinzufügen

  1. Mit dem Maskable.app Editor können Sie ein vorhandenes Symbol in ein maskierbares Symbol umwandeln.

  2. Fügen Sie einem der icons-Objekte in Ihrem Web-App-Manifest das Attribut purpose hinzu. Legen Sie den Wert von purpose auf maskable fest. Siehe Werte.

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

  3. Prüfen Sie mit den Chrome-Entwicklertools, ob das maskierbare Symbol korrekt angezeigt wird. Weitere Informationen finden Sie unter Sind meine aktuellen Symbole bereit?

Ressourcen