Apple bietet auf dem iPhone / iPad die Möglichkeit, aus einer Website eine WebApp zu erzeugen, wenn diese auf dem Homescreen abgelegt wird. Aber alleine das Ablegen der Website auf dem Homescreen reicht nicht aus. Die Website benötigt noch ein paar Zeilen Code im Head-Bereich, um das App-Feeling zu vervollständigen.
Hier ein Beispiel für eine WebApp:
<!DOCTYPE html>
<html lang = "de-DE">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Meine WebApp</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-startup-image" href="pic/ios_startup.png">
</head>
Vor allem folgende zwei Zeilen Code sind für das App-Verhalten notwendig:
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-startup-image" href="pic/ios_startup.png">
Die erste Zeile ist dafür zuständig, dass die Website, wenn sie auf dem Homescreen abgelegt wird, vom iPhone als WebApp behandelt wird.
Dazu kommt noch die zweite Zeile. Startet man nun die WebApp auf dem iPhone über den Homescreen, kann es natürlich vorkommen, dass die Website ein paar (Milli)Sekunden benötigt, bis diese geladen wurde. Um in dieser Zeit keinen weißen Bildschirm zu sehen, bietet Apple die Möglichkeit, in diesem Zeitraum ein Bild anzuzeigen. Genau hierfür ist diese Code-Zeile – hier wird der Pfad zum Start-Bild hinterlegt.
Der Unterschied ist hier schön zu sehen. Ohne App-Anpassung:
Mit App-Anpassung:
Die Safari-Leisten oben und unten verschwinden. Im App-Switcher erscheint nicht mehr Safari mit der WebApp – die WebApp wird wie eine echte App behandelt und dargestellt.