Welcome to my blog! If you've stumbled across this in your travels on the internet, please take a moment click on an ad - or two! You might see something you like, *and* it helps finance the blogosphere. Think of the children!

Ok, after a couple of days hiatus, we're ready to tackle Jonathan Stark's phone-gap tutorial again. We were about 2/3 of the way through the murderous part 3 when we left off.

The next step is "Adding an Icon to the Home Screen". Let's see what this does. It's essentially just adding a 57 x 57 file named "apple-touch-icon.png" to your public_html directory. It lets the user put an app for your mobile web app onto his icons along with the regular app from the safari browser (by hitting the middle icon on the bottom of the browser and selecting "add to home screen". Pretty nifty.

Next up is "Full Screen Mode". All you need to do for this is add this line:

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

to the head section of "iphone.html". It gives you extra space on the web display on the hijacked links.

Note, you need to delete and re-add the icon you just added to your home screen to make it work. It should look something like this:



Ok, the next step is to change the color of the status bar:


<meta name="apple-mobile-web-app-status-bar-style" content="black" />

non-escaped html:



Finally, we can add a startup graphic with this:

<link rel="apple-touch-startup-image" href="myCustomStartupGraphic.png" />

non-escaped html:



And you get the loading graphic...and we're done!