Wenn Sie auf einem neuen Android-Smartphone eine progressive Web-App (PWA) installiert haben, kann das Symbol der App einen weißen Hintergrund haben. Einführung von Android 8.0 Adaptive Symbole, die App-Symbole in verschiedenen Formen auf dem Gerät darstellen Modelle. Symbole, die dieses Format nicht verwenden, haben einen weißen Hintergrund.
<ph type="x-smartling-placeholder">![PWA-Symbole in weißen Kreisen auf Android-Geräten](https://web.developers.google.cn/static/articles/maskable-icon/image/pwa-icons-white-circles-7fce0dc6ce82f.png?authuser=1&hl=de)
Maskierbare Symbole sind ein neues Symbolformat für Chrome und Firefox, mit dem Ihr Bei progressiven Web-Apps werden adaptive Symbole verwendet und Sie haben mehr Kontrolle über Ihre an der Darstellung des Symbols.
<ph type="x-smartling-placeholder">![PWA-Symbole auf Android-Geräten, die den gesamten Kreis abdecken](https://web.developers.google.cn/static/articles/maskable-icon/image/pwa-icons-covering-entir-011491639007f.png?authuser=1&hl=de)
Sind meine aktuellen Symbole bereit?
Da maskierbare Symbole eine Vielzahl von Formen unterstützen müssen, müssen Sie ein undurchsichtiges Bild mit einem gewissen Abstand, den der Browser auf den erforderlichen und Größe für jeden Browser und jede Plattform anpassen.
<ph type="x-smartling-placeholder">Die Spezifikation für maskierbare Symbole enthält eine standardisierte „minimale sichere Zone“ die von allen Plattformen respektiert werden. Die wichtigen Bestandteile muss sich in einem kreisförmigen Bereich in der Mitte des -Symbol mit einem Radius von 40% der Symbolbreite. Der äußere Rand von 10% könnte auf einigen Plattformen zugeschnitten.
Mit Chrome können Sie prüfen, welche Teile Ihrer Symbole sich im sicheren Bereich befinden Entwicklertools. Öffne bei geöffneter progressiver Web-App die Entwicklertools und navigiere zu das Steuerfeld Anwendung. Im Bereich Symbole haben Sie folgende Möglichkeiten: Für maskierbare Symbole nur den minimalen sicheren Bereich anzeigen: Dadurch werden die Symbole so zugeschnitten, nur der sichere Bereich sichtbar ist. Wenn Ihr Logo innerhalb dieses sicheren Bereichs zu sehen ist, Ihr Symbol ist bereit.
<ph type="x-smartling-placeholder">![Anwendungsbereich in den Entwicklertools, auf dem PWA-Symbole mit abgeschnittenen Kanten zu sehen sind](https://web.developers.google.cn/static/articles/maskable-icon/image/applications-panel-devto-a75aad0ea167e.png?authuser=1&hl=de)
Um dein maskierbares Symbol mit verschiedenen Android-Formen zu testen, verwende Tiger Oakes Maskable.app enthält. Wenn du ein Symbol öffnest, kannst du mit Maskable.app Testen Sie verschiedene Formen und Größen und teilen Sie die Vorschau mit Ihrem Team.
Wie kann ich maskierbare Symbole verwenden?
Um ein maskierbares Symbol auf der Grundlage eines vorhandenen Symbols zu erstellen, können Sie die Methode Maskable.app Editor: Symbol hochladen, Farbe und Größe und exportieren Sie das Bild.
<ph type="x-smartling-placeholder">![Screenshot des Maskable.app-Editors](https://web.developers.google.cn/static/articles/maskable-icon/image/maskableapp-editor-scree-fdc82299dbabb.png?authuser=1&hl=de)
Nachdem du ein maskierbares Symbol erstellt und in den Entwicklertools getestet hast, musst du
Web-App-Manifest so, dass es auf das neue Asset verweist. Die
Das Web-App-Manifest enthält Informationen über Ihre Webanwendung in einer JSON-Datei und
enthält ein icons
-Array.
Über das Feld purpose
wird dem Browser mitgeteilt, wie Ihr Symbol verwendet werden soll. Standardmäßig
Symbole haben den Zweck "any"
. In Android wird die Größe dieser Symbole auf einem weißen
Hintergrund.
{
…
"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"`
},
…
],
…
}
Um ein Symbol maskierbar zu machen, setzen Sie den Wert purpose
auf "maskable"
, um anzugeben,
er sollte mit Symbolmasken verwendet werden. Dadurch wird der weiße Hintergrund entfernt
haben Sie mehr Kontrolle über die Darstellung des Symbols. Sie können auch mehrere
durch Leerzeichen getrennt (z. B. "any maskable"
), wenn Sie möchten,
maskierbares Symbol, das auf anderen Geräten ohne Maske verwendet werden kann.
Danksagungen
Diese Seite wurde von Joe Medley überprüft.