Manifest hat kein maskierbares Symbol

Maskierbare Symbole ist ein neues Symbolformat, das dafür sorgt, dass Ihr PWA-Symbol auf allen Android-Geräten. Auf neueren Android-Geräten können PWA-Symbole, erhalten das maskierbare Symbol einen weißen Hintergrund. Wenn Sie ein maskierbares Element verwenden, Symbol platziert, wird sichergestellt, dass das Symbol den gesamten von Android zur Verfügung gestellten Platz einnimmt.

So schlägt die Prüfung der maskierbaren Lighthouse-Symbole fehl

Leuchtturm kennzeichnet Seiten, die keine maskierbaren Symbole unterstützen:

Prüfung der maskierbaren Symbole in der Lighthouse-Berichtsbenutzeroberfläche

Um die Prüfung zu bestehen, müssen folgende Voraussetzungen erfüllt sein:

  • Ein Web-App-Manifest muss vorhanden sein.
  • Das Manifest der Web-App muss ein icons-Array haben.
  • Das Array icons muss ein Objekt mit der Eigenschaft purpose enthalten. und der Wert dieser purpose-Eigenschaft muss maskable enthalten.

Unterstützung für maskierbare Symbole in einer PWA hinzufügen

  1. Verwenden Sie Maskable.app Editor, um ein vorhandenes Symbol in ein maskierbares Symbol zu konvertieren.

  2. Füge einem der icons-Objekte in deinem 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 findest du unter Sind meine aktuellen Symbole bereit?

Ressourcen