Diese Seite wurde von der Cloud Translation API übersetzt.

Adaptive Unterstützung von Symbolen in PWAs mit maskierbaren Symbolen

Thomas Steiner

Tiger Oakes

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>

Transparente PWA-Symbole werden auf Android-Geräten in weißen Kreisen angezeigt.

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>

Maskierbare Symbole decken stattdessen den gesamten Kreis ab.

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>

. Verschiedene plattformspezifische Symbolformen

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>

Der Bereich „Anwendungen“ mit zugeschnittenen PWA-Symbolen.

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>

Symbole im Maskable.app-Editor erstellen

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.