Mobile Open Source Tools und Tipps

Web-App-Manifest: Mobile Browser anweisen

Auf bestimmte Webseiten ändert sich auf dem Smartphone die Farbe vom gesamten Smartphone Browser. Das sonst graue Browser Fenster wird bunt und verschmilzt mit der Webseite. Grund für die Anpassung ist die manifest.json-Datei. In der Web-App-Manifest Datei können verschiedene Konfigurationen oder besser gesagt, Anweisen für den Browser hinterlegt werden. Als Beispiel kann ich meine Freifunk Leer Seite nennen. Hier habe ich einen helles Rosa, passgenaue Favicons und eine Start URL angegeben.

Welche Möglichkeiten bietet die Web-App-Manifest?

Hauptzweck des Web-App-Manifest ist es Webseiten als Art Anwendung auf dem Homescreen zu hinterlegen. In dem Manifest werden genaue Informationen wie Beschreibung, Farb-Theme, Start URL und Anzeigeart angegeben.

Klickt ein Webseitenbesucher z.B. in dem Google Chrome Browser auf „Zum Startbildschirm hinzufügen“ (Screenshot 1), liest der Browser die manifest.json Datei aus und fügt das angegebene Icon mit Name auf den Homescreen (Screenshot 2). Beim öffnen der Anwendung wird die eigentliche Webseite als Art „Standalone“ App angezeigt. Das im Hintergrund noch immer der Google Chrome Browser aktiv ist sieht man nicht (Screenshot 3).

Anleitung: Webseite als App hinterlegen

Manifest Angaben

In dem Manifest können diverse Angaben gemacht werden. Folgend eine kurze Erläuterung zu den möglichen Angaben:

„display“ – MDN Link

Über ‚display‘ wird die Anzeige gesteuert. Soll sich ein Browser Fenster öffnen oder die Webseite als eigenständige App aussehen?

„icons“ – MDN Link

Mit ‚icons‘ wird angegeben welche App Symbole auf dem Homescreen angezeigt werden sollen.

„name“ – MDN Link

Der Wert wird später auf dem Homescreen als Bezeichnung angezeigt.

„related_applications“ – MDN Link

Mithilfe von ‚related_applications‘ können ähnliche Anwendungen angegeben werden. Somit kann in der Browser Leiste die Verlinkung zum Playstore hinzugefügt werden.

„start_url“ – MDN Link

Hiermit wird die Start URL angegeben, die sich beim Klick auf das Symbol öffnet. Das kann die Startseite sein, aber auch eine spezielle Unterseite für Mobil Geräte oder Link Parameter für Marketing Leute (Google Analytics, Piwik, usw.)

„theme_color“ – MDN Link

Wie oben zu meiner Freifunk Seite beschrieben, kann über ‚theme_color‘ die Browser Farbe angegeben werden, damit sich der Browser der Webseite farblich anpasst.

Alle weiteren Möglichkeiten sind im Mozilla Developer Network mit Beispielen und Tipps unter Manifest zu finden.

In Google Chrome testen

Die manifest.json kann selbst mit Google Chrome auf dem PC getestet werden. In der Developer Bar unter Application gleich der erste Link zeigt die entsprechenden Manifest Anweisungen an:

Web-App-Manifest Informationen in Google Chrome

Schon seit 2014 gibt es das Web-App-Manifest. Eine gute Erklärung mit ein paar Hintergrund Details gibt es auf developers.google.com/web/fundamentals/web-app-manifest.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.