Manifest hat kein maskierbares Symbol

.

Maskierbare Symbole sind ein neues Symbolformat, mit dem Ihr PWA-Symbol auf allen Android-Geräten gut aussieht. Auf neueren Android-Geräten erhalten PWA-Symbole, die nicht dem maskierbaren Symbolformat entsprechen, einen weißen Hintergrund. Wenn Sie ein maskierbares Symbol verwenden, nimmt es den gesamten von Android dafür vorgesehenen Platz ein.

Gründe für den Fehler bei der Lighthouse-Prüfung für maskierbare Symbole

Lighthouse meldet Seiten, die keine maskierbaren Symbole unterstützen:

Die Prüfung der maskierbaren Symbole in der Benutzeroberfläche des Lighthouse-Berichts

So bestehen Sie die Prüfung:

  • Es muss ein Web-App-Manifest vorhanden sein.
  • Das Manifest der Webanwendung muss ein icons-Array enthalten.
  • Das icons-Array muss ein Objekt mit der Property purpose enthalten und der Wert dieser Property muss maskable enthalten.purpose

So fügen Sie Ihrer PWA die Unterstützung für maskierbare Symbole hinzu

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

  2. Fügen Sie das Attribut purpose einem der icons-Objekte in Ihrem Manifest der Webanwendung hinzu. Legen Sie für purpose den Wert 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 richtig angezeigt wird. Weitere Informationen finden Sie unter Sind meine aktuellen Symbole bereit?

Ressourcen