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:
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
Mit dem Maskable.app Editor können Sie ein vorhandenes Symbol in ein maskierbares Symbol konvertieren.
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.
Prüfen Sie mit den Chrome-Entwicklertools, ob das maskierbare Symbol richtig angezeigt wird.
Weitere Informationen finden Sie unter Sind meine aktuellen Symbole bereit?
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2024-04-16 (UTC)."],[],[]]