Making this blog work as an app on the iPhone (part 2)

Now that we have a special web site that displays properly either in portrait or landscape mode, let’s make it a web application that we pin to the Home screen. Boiled down to its essence, this is easy: you bring the web page up in Safari, touch the middle button in the bar at the bottom of the screen, and then select the Add to Home Screen option.

iOS selects a screenshot for the icon (bleugh!) and allows you to edit the caption for the icon. Once that’s done the web page will appear as a web application or Web Clip on some page of your Home screen. If this were all that there was to it, this would be a very short post, but luckily. . .

Of course the very first thing we should do is to define a cool icon for the Web Clip. None of that “screen snapshot” stuff for us. Fire up your favorite paint program and design a 57×57 PNG file. I came up with this one for boyet.com/:

Yeah, so I’m not an artist. Sue me.

Now you have to specify this icon in your web pages. Add a link element to your head element, like this:

<link rel="apple-touch-icon" href="/somepath/HomeIcon.png"/>

You can also provide higher resolution images for the iPad and for the retina display on the iPhone 4+:

<link rel="apple-touch-icon" sizes="72x72" href="/somepath/HomeIcon-ipad.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="/somepath/HomeIcon-iphone4.png"/>

Next up is to hide the Safari chrome: the address bar and button bar. This is done through another meta element within the head element, and needs to be set before the rest of the tags will work:

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

This will leave just the device’s status bar at the top of the screen. If you want to get rid of that too, tough. The closest you can get is to make it translucent – your content will appear behind it. It’s another meta element.

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

I just turned it to black for mine (the other alternative is to leave it at default, or remove the meta tag altogether):

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

The other tweakable knob is to specify a start-up or splash image. This defaults to a screenshot of the last time the Web Clip was used, which is a little disconcerting especially if there’s no internet connection (it’ll look like you can interact with the page, but it’s just an image). Basically provide a portrait 320×480 pixel image:

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

Now if you create a Web Clip from the web page, you will get all of that new nice behavior. The web app will still play nice when you re-orient the device. But, and it’s a big but, if you click on a “read more…” link, Safari will fire up up and the new page will load there. Ouch. Not really a web app if it’s just one page.

Next time, we’ll look at solving that with a judicious bit of JavaScript and jQuery.

  Loading links to posts on similar topics...

1 Response

#1 Iphone App Builder said...

13-Mar-12 10:22 PM

Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further post thanks once again.

Leave a response

Note: some MarkDown is allowed, but HTML is not. Expand to show what's available.

•  Emphasize with italics: surround word with underscores _emphasis_
•  Emphasize strongly: surround word with double-asterisks **strong**
•  Link: surround text with square brackets, url with parentheses [text](url)
•  Inline code: surround text with backticks `IEnumerable`
•  Unordered list: start each line with an asterisk, space * an item
•  Ordered list: start each line with a digit, period, space 1. an item
•  Insert code block: start each line with four spaces
•  Insert blockquote: start each line with right-angle-bracket, space > Now is the time...

Name (required) Mail (will not be published) (required) Website Response Submit

Preview of response