Sie haben eine Progressive Web App (PWA) erstellt, ein Icon dafür entworfen und installieren diese nun auf dem Startbildschirm Ihres Android-Geräts.
Aber, wenn Sie ein aktuelles Android-Smartphone besitzen, werden Ihre Icons so angezeigt:
Was ist passiert? Nun, Android Oreo hat die adaptiven Icons eingeführt, ein neues Icon-Format, das für alle Icons auf dem Startbildschirm die gleiche Form erzwingt. Icons, die das neue Format nicht befolgen, erhalten einen weißen Hintergrund.
Es gibt jedoch ein neues Web-Feature namens Maskable Icons, das bald für Firefox Preview und andere Webbrowser verfügbar sein wird. Dieses neue Icon-Format ermöglicht es Ihren PWAs, eigene adaptive Icons unter Android zu haben.
Ich arbeite bei Mozilla und habe die Unterstützung für Maskable Icons in Firefox Preview implementiert. Ich zeige Ihnen, wie Sie diese zu Ihren eigenen PWAs für Android hinzufügen.
Was sind Maskable und Adaptive Icons?
Bis vor ein paar Jahren waren Android-App-Icons freiform und konnten jede beliebige Form haben. Das bedeutete, dass Web-Apps auch das gleiche transparente Icon wiederverwenden konnten, wenn sie auf dem Startbildschirm angeheftet wurden.
Hersteller wie Samsung wollten jedoch, dass alle Icons auf einem Gerät die gleiche Form haben, um die Konsistenz zu wahren. Einige Hersteller wollten sogar unterschiedliche Formen. Um der Vielfalt der Anforderungen von Herstellern und Geräten gerecht zu werden, hat Android "adaptive Icons" eingeführt. Sie liefern ein Bild mit zusätzlichem Platz am Rand, und Android schneidet es zur richtigen Form zu.
Aber Web-Apps sind dafür konzipiert, auf jeder Plattform zu funktionieren, daher haben sie keine APIs, um diese speziellen Android-Icons zu erstellen. Stattdessen wurden Icons in weiße Boxen gequetscht, wie hier:
Und siehe da, im letzten September kam eine brandneue API auf uns zu und wurde in die W3C-Spezifikation aufgenommen. Maskable Icons ermöglichen es Webentwicklern, ein randloses Icon anzugeben, das zugeschnitten wird. Es ist plattformunabhängig, sodass Windows sie für Kacheln oder iOS für Icons verwenden könnte.
Wie man Maskable Icons erstellt
Da das Maskable-Icon-Format für die Arbeit auf jeder Plattform konzipiert ist, unterscheiden sich Größe und Verhältnisse von denen der adaptiven Icons von Android. Das bedeutet, Sie können nicht dasselbe Asset wiederverwenden.
Maskable Icons können jede Größe haben, und Sie können weiterhin die gleichen Größen verwenden, die Sie für normale transparente Icons verwenden würden. Achten Sie jedoch beim Entwerfen des Icons darauf, dass wichtige Informationen innerhalb einer "sicheren Zone" in Form eines Kreises mit einem Radius von 40% der Bildgröße liegen.
Alle Pixel innerhalb dieser Zone sind garantiert sichtbar. Pixel außerhalb der Zone können je nach Icon-Form und Plattform abgeschnitten werden.
Warnung: Wenn Sie bereits eine Android-App haben, vermeiden Sie es, das Icon von Ihrer Android-App in Ihre Web-App zu kopieren und einzufügen. Die Verhältnisse sind unterschiedlich, sodass Ihre Icons zu klein aussehen würden.
Hinzufügen des Icons zu Ihrem Web App Manifest
Sobald die Icons erstellt sind, können Sie Ihrem Web App Manifest einen Eintrag hinzufügen, ähnlich wie bei anderen Icon-Assets. Das Web App Manifest liefert Informationen über Ihre Web-App in einer JSON-Datei und enthält ein "icons"-Array.
{
...
"icons": [
...
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable"
]
...
}Maskable Icons verwenden einen speziellen neuen Schlüssel, "purpose", um anzuzeigen, dass sie für die Verwendung mit Icon-Masken gedacht sind. Icons mit transparenten Hintergründen haben einen Standard-"purpose" von "any", und Icons können für mehrere Zwecke verwendet werden, indem jede Option durch ein Leerzeichen getrennt wird.
"purpose": "maskable any"Vorschau Ihrer Icons
Möchten Sie sehen, wie Ihre eigenen Maskable Icons aussehen werden? Ich habe ein Tool erstellt, Maskable.app, das Ihnen hilft, zu beurteilen, wie das Icon in verschiedenen Formen erscheint.
Die App ermöglicht Ihnen, Ihr Icon in verschiedenen Formen anzuzeigen, die auf Android-Geräten vorkommen. Ich hoffe, dieses Tool hilft Ihnen, einzigartige Icons für Ihre Progressive Web Apps zu erstellen.
Sobald Sie mit den Ergebnissen zufrieden sind, können Sie mit dem Testen Ihrer App beginnen. Firefox Preview Nightly und Chrome Canary unterstützen Maskable Icons. Sie können sie verwenden, um zu überprüfen, wie Ihre PWA aussieht.
Tools wie PWACompat unterstützen ebenfalls Maskable Icons. Sie können automatisch Icons für iOS und andere Geräte basierend auf Ihren neuen Maskable Icons generieren!
Zeit, Ihre eigenen Icons zu erstellen
Wenn Sie mehr Kontrolle darüber haben möchten, wie Ihre PWA-Icons unter Android angezeigt werden, sind Maskable Icons die richtige Wahl. Mit Maskable Icons können Sie anpassen, wie Ihr Icon von Rand zu Rand angezeigt wird. Hoffentlich kann dieser Artikel Ihnen den Einstieg in die Erstellung Ihres ersten Maskable Icons ermöglichen.
Icon Credits
Hallo,
Dies ist der beste Beitrag, den ich je gelesen habe. Die Art und Weise, wie Sie alles erklärt haben, ist großartig.
Ich bin ab sofort ein permanenter Nutzer Ihrer Website.
Machen Sie weiter so..!
Danke.
Hallo, das ist ein gut geschriebener Beitrag. Aber ich bekomme das unter Android nicht zum Laufen. Wird diese Funktion für die PWA-Installation auf Android über Chrome unterstützt?
Ich habe diese Zeile zu jedem meiner Icon-Objekte hinzugefügt: "purpose": "maskable any"
Aber ich bekomme immer noch das kleine Icon mit weißem Hintergrund. Gibt es bekannte Probleme mit Android?
Danke!
Chrome für Android unterstützt Maskable Icons noch nicht. Sowohl Chrome als auch Firefox Preview fügen die Unterstützung jedoch sehr bald hinzu! Vorerst können Sie mit dem Referenzbrowser von Mozilla testen.
Danke fürs Teilen