1

I don't like web-apps for iPhone because they have to run inside the Safari instanace and have the Safari-toolbar at the bottom.

But today when I opened the web-app version of Facebook on my iPhone I got big eyes! This one opens in its own instance in the task manager and it fills the whole screen except the indicator bar on the top of the screen. THIS is the kind of web-app I like, and I'm really interested in how this works! But I've tried to search and I can't find any information about this feature.

To reconstruct the Facebook web-app I'm talking about:

  1. Go to facebook.com or more exactly http://touch.facebook.com/?w2m in Safari on iPhone.
  2. Click the middle button in the bottom bar in Safari and "Add to home screen"
  3. Open the new Facebook web-app from the home-screen.

Every other web-apps I've saved on the home screen this way (e.g. different Google tools) opens in a new tab in Safari. But Facebook opens as a "stand alone" application in a new instance and without the Safari "shell" around.

I know that it is possible to script the onload of the document to scroll down so the address-bar is "hidden", but that's not what Facebook does!

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
Knuto
  • 153
  • 10

1 Answers1

4

This is done using a specific meta tag.

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

There are a number of these that let you set the status bar style, splash screen, home screen icon, etc.

Do note - JavaScript performance is significantly worse in standalone web apps like this, and you have to be careful about the user experience considering there's no back button.

ceejayoz
  • 176,543
  • 40
  • 303
  • 368
  • Thank you! Maybe I was a little to quick posting the question, because I just found the answer here: http://www.luscarpa.com/development/make-your-website-an-iphone-web-application/ But why is JavaScript performance worse? That's not fair! – Knuto May 25 '11 at 18:56