Web applicatie als een echte "App Store app" opstarten

[S¡mon]

Hallo,

Ik ben nu bezig met een site, Welkom op Cijfers Bijhouden.nl, en zoals de naam al zegt: leerlingen kunnen hier hun cijfers bijhouden. De site is nog in onderhoud, omdat ik het ook perfect wil hebben voor iPhone gebruikers en daarom ben ik ook nog alles via de Safari Reference Library aan het bestuderen.

Wat ik zelf heel interessant vind is dat je je web-applicatie kan laten opstarten als een "echte app." Dit houd dus in dat er GEEN status-bar bovenaan staat en dat je ook zo'n "laadscherm" kan hebben.

Het is heel moeilijk uit te leggen, maar doe dit eens:
Let op: om het "laadscherm" duidelijk te zien kan je het beste op GRPS zitten of 3G. Anders is het laadscherm heel snel weer weg, omdat het laden heel snel gaat.

1) Ga op je iPhone naar Welkom op Cijfers Bijhouden.nl
2) Klik op het plusje en zet het op je homescreen
3) De webapp staat nu op je homescreen, open deze VANAF je homescreen
4) Je zal nu een opstart scherm zien, de site word ondertussen geladen
5) De site is geladen, zoals je ziet staan er onderin geen buttons en is er geen url-balk.

Als je dit nu heel goed uitwerkt kan je je web-app er uit laten zien als een echte App Store applicatie.

How to
Zet de volgende HTML codes in je bestand.

<link rel="apple-touch-startup-image" href="http://www.cijfersbijhouden.nl/startup.png">

en

<meta name="apple-mobile-web-app-capable" content="yes" />

Als nu iemand jou applicatie op z'n homescreen zet, krijg je het resultaat zoals hierboven beschreven.

Groetjes,
Simon