Adaptive Symbolunterstützung in PWA mit maskierbaren Symbolen

Was sind maskierbare Symbole?

Si ha instalado una aplicación Netz progresiva en un teléfono Android reciente, es posible que observe que el icono aparece con un fondo blanco. Android Oreo introdujo íconos adaptables, que muestran íconos de aplicaciones en una variedad de formas en diferentes modelos de dispositivos. Los iconos que no siguen este nuevo formato tienen un fondo blanco.

Maskierbare Symbole sind ein neues Symbolformat, das Ihnen mehr Kontrolle bietet und es Ihrer progressiven Webanwendung ermöglicht, reaktionsschnelle Symbole zu verwenden. Wenn Sie ein maskierbares Symbol bereitstellen, kann Ihr Symbol die gesamte Form ausfüllen und auf allen Android-Geräten gut aussehen. Firefox und Chrome haben kürzlich Unterstützung für dieses neue Format hinzugefügt, und Sie können es in Ihre Anwendungen übernehmen.

Sind meine aktuellen Symbole fertig?

Dado que los íconos enmascarables deben admitir una variedad de formas, proporcione una imagen opaca con algo de relleno que el Browser puede recortar posteriormente en la forma y tamaño deseados. Es mejor no depender de ninguna forma en particular, ya que puede variar según el navegador y la plataforma.

Zum Glück gibt es eine gut definierte und standardisiert «Zona mínima segura» que respetan todas las plataformas. Las partes importantes de su icono, como su Logo, deben estar dentro de un área circular en el centro del icono con un radio igual al 40% del ancho del icono. El borde exterior del 10% se puede recortar.

Mit Chrome DevTools können Sie überprüfen, welche Teile Ihrer Symbole in der sicheren Zone landen. Starten Sie bei geöffneter progressiver Webanwendung DevTools und navigieren Sie zu Anfrage Panel. Beim Symbole Abschnitt können Sie wählen Nur den minimalen Sicherheitsbereich für maskierbare Symbole anzeigen. Sus iconos se recortarán de modo que solo el área segura Sein visible. Si su logotipo es visible dentro de esta área segura, está listo para comenzar.

Wenn Sie eine Vorschau Ihres maskierbaren Symbols auf andere Weise anzeigen möchten, wie es unter Android angezeigt werden kann, habe ich ein Tool namens erstellt Maskable.app. Öffnen Sie ein Symbol, und mit Maskable.app können Sie verschiedene Formen und Größen ausprobieren. Sie können die Vorschau auch für andere Mitglieder Ihres Teams freigeben.

Wie übernehme ich maskierbare Symbole?

Wenn Sie ein maskierbares Symbol basierend auf Ihrem vorhandenen Symbol erstellen möchten, können Sie das verwenden Maskable.app Editor. Laden Sie Ihr Symbol hoch, passen Sie Farbe und Größe an und exportieren Sie das Bild.

Nachdem Sie ein maskierbares Symbolbild erstellt und in DevTools getestet haben, müssen Sie Ihr Bild aktualisieren Webanwendungsmanifest neue Vermögenswerte kennzeichnen. Das Webanwendungsmanifest enthält Informationen zu Ihrer Webanwendung in einer JSON-Datei und enthält a Symbole Ausbildung.

Durch die Aufnahme maskierbarer Symbole wurde ein neuer Eigenschaftswert für Bildressourcen hinzugefügt, die in einem Webanwendungsmanifest aufgeführt sind. das Zweck Das Feld teilt dem Browser mit, wie das Symbol verwendet werden soll. Standardmäßig haben die Symbole den Zweck "irgendein". Diese Symbole werden unter Android auf einem weißen Hintergrund in der Größe geändert.

Die maskierbaren Symbole müssen einen anderen Zweck haben: "maskierbar". Dies zeigt an, dass ein Bild mit Symbolmasken verwendet werden soll, sodass Sie mehr Kontrolle über das Ergebnis haben. Auf diese Weise haben Ihre Symbole keinen weißen Hintergrund. Sie können auch mehrere durch Leerzeichen getrennte Zwecke angeben (z. B. "jede maskierbare"), wenn Sie möchten, dass Ihr maskierbares Symbol auf anderen Geräten ohne Maske verwendet wird.

{
…
"icons": [
…
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "jede maskierbare" 
}
]
…
}

Auf diese Weise können Sie Ihre eigenen maskierbaren Symbole erstellen und sicherstellen, dass Ihre App von Kante zu Kante gut aussieht (und für das, was es wert ist, Kreis zu Kreis, Oval zu Oval 😄).