Angaben für Webapps im HEAD-Bereich
Eine Website kann mit normalen Webtechnologien so gestaltet werden, dass sie vom "Look and feel" einer nativen App sehr nahe kommt. Solche Websites werden auch Webapps oder Browserapps genannt, da sie im Grunde mit HTML(5), CSS und evtl. JavaScript erstellt werden. Wenn man Webapps erstellt, dann benötigt man gewisse Einträge im HEAD-Bereich. Hierbei muss man zwischen Einträgen zu eingebundenen Dateien und direkten Angaben unterscheiden.
Datei browserconfig.xml für Windows-Tiles
Für die Windows-Tiles, die mit Windows 8 eingeführt wurden, können die ursprünglich im HEAD-Bereich gemachten Einträge ab Windows 8.1 und IE 11 in die Konfigurationsdatei browserconfig.xml ausgelagert werden. Die Datei braucht man danach nur noch im Wurzelverzeichnis der Website ablegen. Beim Hinzufügen einer Website zum Startbildschirm wird sie automatisch vom Wurzelverzeichnis abgerufen. Wurde die Datei jedoch anders benannt oder in einem anderen Ordner abgelegt, wird im HEAD-Bereich ein Eintrag mit dem META-Tag benötigt. Ein Beispielcode.
<meta name="msapplication-config" content="/pfad/browserconfig.xml">Datei manifest.json einbinden
Eine andere Variante ist die Konfigurationsdatei manifest.json. Hierin können Einträge zum Webapp gemacht werden. Dadurch entfallen die Einträge für die Webapp im HEAD-Bereich. Allerdings muss die Datei im HEAD-Bereich eingebunden werden. Hierfür verwendet man den LINK-Tag. Ein Beispielcode.
<link rel="manifest" content="/pfad/manifest.json">Fallback für nicht unterstützende Browser und Systeme
Nicht alle Browser und Systeme kennen die Konfigurationsdateien browserconfig.xml oder manifest.json. Beispielsweise wurden die Windows-Tiles in Windows 8 eingeführt, die Datei browserconfig.xml jedoch erst ab Windows 8.1. Für die Version 8 und IE 10 wird ein Fallback benötigt, sofern man sie berücksichtigen möchte.
Das betrifft ebenfalls die Konfigurationsdatei manifest.json. Gemäß dem Stand von 06/2015 unterstützt nur der Browser Chrome für Android ab der Version 38 die Datei manifest.json. Für ältere und andere Systeme und Browser werden daher Fallbacks benötigt, wenn sie berücksichtigt werden sollen.
Angaben für die Windows-Tiles
Für die Windows-Tiles können z.B. folgende Angaben als Fallback gemacht werden.
<!-- Name für die Kachel -->
<meta name="application-name" content="Mein Webapp">
<!-- Kachel-Farbe für die Kachel -->
<meta name="msapplication-TileColor" content="#ff0000">
<!-- Pfad für die Bilder -->
<meta name="msapplication-square70x70logo" content="/tile-128x128.png">
<meta name="msapplication-square150x150logo" content="/tile-270x270.png">
<meta name="msapplication-wide310x150logo" content="/tile-558x270.png">
<meta name="msapplication-square310x310logo" content="/tile-558x558.png">Webapp Angaben für Chrome in Android
Für Chrome in Android vor der Version 38 können folgende Fallback-Angaben gemacht werden.
<!-- Webapp-fähig machen -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Angaben zu Icons -->
<link rel="icon" type="image/png" sizes="192x192" href="/touch-icon-192x192.png">Webapp-Angaben für iOS-Systeme
Für iOS-Systeme können folgende Angaben gemacht werden.
<!-- Webapp-fähig machen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Angaben zum Splash-Screen -->
<link rel="apple-touch-startup-image" href="/splash-screen.png">
<!-- Angaben zu Icons -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png">Sowohl für Chrome in Android als auch für iOS-Systeme können weitere Angaben zu Touch-Icons und Favicons gemacht werden. Die Angaben können auch von weiteren Browsern genutzt werden.