Wenn du eine progressive Web-App (PWA) auf einem neueren Android-Smartphone installiert hast, hat das Symbol der App möglicherweise einen weißen Hintergrund. Mit Android 8.0 wurden adaptive Symbole eingeführt, die App-Symbole in verschiedenen Formen auf verschiedenen Gerätemodellen anzeigen. Andere Symbole 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 und Sie mehr Kontrolle über die Darstellung von Symbolen haben.
Sind meine aktuellen Symbole bereit?
Da maskierbare Symbole verschiedene Formen unterstützen müssen, müssen Sie ein opakes Bild mit einem gewissen Abstand bereitstellen, den der Browser auf die erforderliche Form und Größe für jeden Browser oder jede Plattform zuschneiden kann.
Die Spezifikation für maskierbare Symbole umfasst eine standardisierte „minimale sichere Zone“, die von allen Plattformen berücksichtigt wird. Die wichtigen Teile Ihres Symbols, z. B. Ihres Logos, müssen sich in einem kreisförmigen Bereich in der Mitte des Symbols befinden, und zwar mit einem Radius, der 40% der Symbolbreite entspricht. Der äußere Rand von 10% ist auf einigen Plattformen möglicherweise abgeschnitten.
Mit den Chrome-Entwicklertools können Sie prüfen, welche Teile Ihrer Symbole sich im sicheren Bereich befinden. Starten Sie bei geöffneter progressiver Web-App die Entwicklertools und gehen Sie zum Bereich Anwendung. Im Abschnitt Symbole können Sie die Option Nur den minimalen sicheren Bereich für maskierbare Symbole anzeigen auswählen. Die Symbole werden dann so geschnitten, dass nur der sichere Bereich sichtbar ist. Wenn Ihr Logo in diesem sicheren Bereich sichtbar ist, ist es bereit.
Wenn Sie Ihr maskierbares Symbol mit verschiedenen Android-Formen testen möchten, verwenden Sie die Maskable.app von Tiger Oakes. Öffnen Sie ein Symbol, um mit Maskable.app verschiedene Formen und Größen auszuprobieren und die Vorschau mit Ihrem Team zu teilen.
Wie verwende ich maskierbare Symbole?
Mit dem Maskable.app Editor können Sie ein maskierbares Symbol basierend auf einem vorhandenen Symbol erstellen. 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 den Entwicklertools getestet haben, müssen Sie das Manifest für Ihre Web-App so aktualisieren, dass es auf das neue Asset verweist. Das Web-App-Manifest enthält Informationen zu Ihrer Webanwendung in einer JSON-Datei und enthält ein icons-Array.
Über das Feld purpose wird dem Browser mitgeteilt, wie das Symbol verwendet werden soll. Standardmäßig haben Symbole den Zweck "any". In Android wird die Größe dieser Symbole auf weißem Hintergrund angepasst.
{
…
"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 Sie ein Symbol maskierbar machen möchten, setzen Sie seinen purpose-Wert auf "maskable". Damit geben Sie an, 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 geprüft.