Artikelformat

WebApp-Icons für Chrome auf Android definieren

Das Android-Maskottchen: ein grüner Roboter

WebApps sind im Grunde einfach Webseiten, die man mit eigenen Icon auf seinen Smartphone installieren kann. Die Nutzer brauchen so nicht über einen Appstore zu gehen.Um eine solche WebApp zu entwickeln müssen wir dem HTML-Code einer Webseite zusätzliche Informationen mitgeben: die generelle Eigenschaft “WebApp-fähig” sowie mindestens ein Icon. Apple hat sich hier ein Link-Element mit Namen “apple-touch-icon” ausgedacht, zunächst in der krummen Größe von 57 Pixel. Dann kamen neue Geräte und Auflösungen, und Ruck-Zuck durfte man 4 verschiedene Icons allein für Apple definieren.Android hat WebApps bisher zwar auch unterstützt, aber eher halbherzig. Und Android möchte gerne andere Icon-Größen haben, die Vielfalt ist noch höher als bei Apple. Die Icon-Größen sind hier 48/72/96/144/192. Natürlich wollten die Android-Entwickler nicht die Tags nutzen, die das Wort “Apple” im Namen haben. All diese Bilder müssen im Kopfbereich der HTML-Datei verlinkt werden. Der Kopfbereich wird dadurch immer größer, ohne das irgend ein substanzieller Inhalt hinzukommt.

Die neue Lösung

Mit Chrome ab Version M39 hat sich Google jetzt der WebApp-Funktionalität noch einmal angenommen. Die Lösung ist eine zusätzliche Datei, die von der Originaldatei mit einem Link-Element referenziert wird:

<link rel="manifest" href="manifest.json">

Der Browser braucht die Informationen in der Datei nur anfordern, wenn der Nutzer die Webseite wirklich als WebApp auf den Startbildschirm installieren will. In der Datei können wird die verschiedenen Icons definieren, sowie einige nützliche Extra-Informationen:

  • name: Der Name, der auf dem Startbildschirm erscheinen soll. Der sollte möglichst kurz sein, also oft anders als der HTML-Title.
  • orientation: Man kann landscape oder portrait als Ausrichtung festlegen.
  • start_url: Das ist meistens einfach “index.html”
  •  display: “standalone” Dieses Attribut schaltet die Webapp Funktionalität in Chrome an.

Weitere Informationen gibt es in der Chrome-Entwicklerdokumentation: Add To Homescreen

Ergebnis

Die Auslagerung der Web-App-Definition macht den Head-Bereich von Webseiten wieder kleiner (oder zu mindestens wächst er nicht mehr mit jeder neuen Icon-Größe). Das gewählte Format ist offenbar wieder mal ein Alleingang einer amerikanischen Firma. Weder CSS, noch der ebenfalls “Manifest” genannte Appcache-Definition, noch die XML-Widget-Definition des W3C wurden verwendet. Leider fehlt bei Chrome immer noch eine definierte Möglichkeit, wie die WebApp erkennen kann, dass sie im Standalone-Modus läuft.  

 

Autor: Karsten Meier

Weil ich gerne Probleme löse bin ich Informatiker geworden. Für meine Kunden berate und konzeptioniere ich und entwickle mit fast allem, was einen Prozessor hat. Sie finden mich auch auf Twitter

Hinterlassen Sie eine Antwort

Pflichtfelder sind mit * markiert.