Wenn Sie eine progressive Web-App (PWA) auf einem aktuellen Android-Smartphone installiert haben, ist das Symbol der App möglicherweise weiß. Mit Android 8.0 wurden adaptive Symbole eingeführt, mit denen App-Symbole auf verschiedenen Gerätemodellen in verschiedenen Formen angezeigt werden. Symbole, die dieses Format nicht verwenden, haben einen weißen Hintergrund.
Maskierbare Symbole sind ein neues Symbolformat für Chrome und Firefox, mit dem Ihre Progressive Web-App adaptive Symbole verwenden kann. Außerdem haben Sie mehr Kontrolle über das Aussehen des Symbols.
Sind meine aktuellen Symbole bereit?
Da maskierbare Symbole eine Vielzahl von Formen unterstützen müssen, müssen Sie ein opakes Bild mit etwas Abstand angeben, das der Browser in jedem Browser oder auf jeder Plattform auf die erforderliche Form und Größe zuschneiden kann.
Die Spezifikation für maskierbare Symbole enthält einen standardisierten „minimalen sicheren Bereich“, der von allen Plattformen eingehalten wird. Die wichtigen Teile Ihres Symbols, z. B. Ihr Logo, müssen sich in einem kreisförmigen Bereich in der Mitte des Symbols befinden, dessen Radius 40 % der Symbolbreite entspricht. Der äußere Rand von 10% wird auf einigen Plattformen möglicherweise abgeschnitten.
Mit den Chrome DevTools können Sie prüfen, welche Teile Ihrer Symbole sich innerhalb der sicheren Zone befinden. Öffnen Sie bei geöffneter progressiver Web-App die Entwicklertools und rufen Sie den Bereich Anwendung auf. Im Bereich Symbole können Sie festlegen, dass bei maskierbaren Symbolen nur der minimale sichere Bereich angezeigt wird. Dadurch werden Ihre Symbole so zugeschnitten, dass nur der sichere Bereich sichtbar ist. Wenn Ihr Logo innerhalb dieses Bereichs sichtbar ist, ist Ihr Symbol fertig.
Wenn Sie Ihr maskierbares Symbol mit verschiedenen Android-Formen testen möchten, verwenden Sie die Maskable.app von Tiger Oakes. Öffnen Sie ein Symbol und mit Maskable.app können Sie verschiedene Formen und Größen ausprobieren und die Vorschau mit Ihrem Team teilen.
Wie verwende ich maskierbare Symbole?
Wenn Sie ein maskierbares Symbol auf der Grundlage eines vorhandenen Symbols erstellen möchten, können Sie den Maskable.app-Editor verwenden. Laden Sie Ihr Symbol hoch, passen Sie Farbe und Größe an und exportieren Sie das Bild.
Nachdem Sie ein maskierbares Symbol erstellt und in DevTools getestet haben, müssen Sie Ihr Web-App-Manifest aktualisieren, damit es auf das neue Asset verweist. Das Web-App-Manifest enthält Informationen zu Ihrer Webanwendung in einer JSON-Datei und ein icons-Array.
Im Feld purpose wird dem Browser mitgeteilt, wie Ihr Symbol verwendet werden soll. Standardmäßig haben Symbole den Zweck "any". Unter Android werden diese Symbole auf einem weißen Hintergrund neu skaliert.
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
Wenn ein Symbol maskiert werden soll, legen Sie den purpose-Wert auf "maskable" fest, um anzugeben, dass es mit Symbolmasken verwendet werden soll. Dadurch wird der weiße Hintergrund entfernt und Sie haben mehr Kontrolle über die Darstellung des Symbols. Sie können auch mehrere durch Leerzeichen getrennte Zwecke angeben (z. B. "any maskable"), wenn das maskierbare Symbol auf anderen Geräten ohne Maske verwendet werden soll.
Danksagungen
Diese Seite wurde von Joe Medley überprüft.