App-Symbole, die sich an die Plattformen anpassen.
Was sind maskierbare Symbole?
Wenn du eine progressive Web-App auf einem neueren Android-Smartphone installiert hast, wird das Symbol möglicherweise mit einem weißen Hintergrund angezeigt. Mit Android Oreo wurden adaptive Symbole eingeführt, mit denen App-Symbole in verschiedenen Formen und auf verschiedenen Gerätemodellen angezeigt werden. Symbole, die dem neuen Format nicht entsprechen, haben einen weißen Hintergrund.
Maskierbare Symbole sind ein neues Symbolformat, mit dem du mehr Kontrolle hast und deine progressive Web-App adaptive Symbole verwenden kann. Wenn Sie ein maskierbares Symbol angeben, kann es die gesamte Form ausfüllen und auf allen Android-Geräten ansprechend aussehen. Firefox und Chrome bieten seit Kurzem Unterstützung für dieses neue Format, das Sie in Ihren Apps verwenden können.
Sind meine aktuellen Symbole bereit?
Da maskierbare Symbole eine Vielzahl von Formen unterstützen müssen, stellen Sie ein opakes Bild mit einem gewissen Abstand bereit, den der Browser auf die erforderliche Form und Größe zuschneiden kann. Sie sollten sich nicht auf eine bestimmte Form verlassen, da die endgültige Form je nach Browser und Plattform variiert.
Glücklicherweise gibt es eine klar definierte und standardisierte "minimale sichere Zone", die von allen Plattformen beachtet wird. Die wichtigen Teile deines Symbols, z. B. deines Logos, sollten sich in einem kreisförmigen Bereich in der Mitte des Symbols befinden, und zwar mit einem Radius von 40% der Symbolbreite. Der äußere Rand von 10% wird möglicherweise abgeschnitten.
Mit den Chrome-Entwicklertools können Sie prüfen, welche Teile Ihrer Symbole in den sicheren Bereich landen. Starten Sie während der progressiven 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 so zugeschnitten, dass nur der sichere Bereich sichtbar ist. Wenn Ihr Logo in diesem Sicherheitsbereich sichtbar ist, brauchen Sie nichts zu tun.
Verwenden Sie das von Tiger erstellte Tool Maskable.app, um Ihr maskierbares Symbol mit verschiedenen Android-Formen zu testen. Wenn Sie ein Symbol öffnen, können Sie mit Maskable.app verschiedene Formen und Größen ausprobieren und die Vorschau für andere in Ihrem Team freigeben.
Wie verwende ich maskierbare Symbole?
Wenn Sie ein maskierbares Symbol basierend auf einem vorhandenen Symbol erstellen möchten, können Sie den Maskable.app Editor verwenden. Lade dein Symbol hoch, passe Farbe und Größe an und exportiere das Bild.
Nachdem Sie ein maskierbares Symbol erstellt und in den Entwicklertools getestet haben, müssen Sie Ihr Web-App-Manifest 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.
Für maskierbare Symbole gibt das Feld purpose dem Browser an, wie das Symbol verwendet werden soll. Standardmäßig haben Symbole den Zweck "any". Auf Android-Geräten werden diese Symbole
auf einem weißen 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"`
},
…
],
…
}
Maskierbare Symbole sollten einen anderen Wert für purpose verwenden: "maskable". Dies weist darauf hin, dass ein Bild mit Symbolmasken verwendet werden soll, sodass Sie mehr Kontrolle über das Ergebnis haben.
So haben Ihre Symbole keinen weißen Hintergrund. 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.
Jetzt können Sie eigene maskierbare Symbole erstellen, damit Ihre App von Rand zu Rand gut aussieht (und von Kreis zu Kreis, von Oval zu Oval, was sie wert ist).
Danksagungen
Dieser Artikel wurde von Joe Medley geprüft.