Open House: Archives

If you're an iPhone (or iDevice) user you probably have a lot of applications on your phone. In fact, if you're a typical iPhone user, you probably have way too many applications on your phone. Happy to encourage your app addiction, many popular websites like Facebook and Wolfram Alpha offer native applications through the iPhone App Store. However, others like Gmail and Google Voice are only available as web applications. For full featured web applications like these, Apple offers the option to run in "App Mode" through the use of a few tags added to the html head.

<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-startup-image" href="startup-image.png" />

These tags tell your iPhone to save the webpage as a special type of home screen bookmark. The site will launch with a specified startup image and without the Safari UI, much like a native application. When the iPhone first came out, I assumed it was only a matter of time before sites like Gmail started using these tags to run like native apps when launched from the home screen.

However, websites running in app mode don't remember their state on close (Even with the introduction of multitasking in 4.0). That by itself isn't so bad, but in addition, links external to the website will launch in Safari. This means if a user clicks any external link they will have to start over at the home page when returning from Safari. That's a pretty bad user experience, so websites don't tend to utilize app mode unless they are truly self contained. This is why Apple leaves the choice of whether to run a website in app mode up to the site owner.

I, on the other hand, like to live dangerously. I also don't tend to add websites to my home screen unless I want to run them like applications. If I wanted to bookmark a site I would have just bookmarked it. If I want to load up Gmail as if it were a native application, I should be able to; risks be damned. Therefore...

Activate App Mode

Simply add the above bookmarket to Safari's bookmarks, attach your iPhone to your computer, and sync your bookmarks with your phone. The bookmarklet should then be available on your phone and ready to use. At least, this is the way I've been told to do it on every single site I've seen which offers an iPhone bookmarklet.

Personally, I have neither the time nor the inclination for a method which requires me to use Safari, set up bookmark syncing, and dig my iPhone cable out from under my bed. If the syncing method works for you, great, but I have an alternative method in case you'd like to forgo any mattress excavation.

1. Load this blog post in Safari on your iPhone.
2. Press and hold on the following code box to select all the text inside.

3. javascript:(function(){var a=document.getElementsByTagName('head').item(0);if(document.querySelectorAll('meta[name=apple-mobile-web-app-capable]').length==0){var c=document.createElement('meta');c.name='apple-mobile-web-app-capable';c.content='yes';a.appendChild(c)}if(document.querySelectorAll('link[rel=apple-touch-startup-image]').length==0){var b=document.createElement('link');b.rel='apple-touch-startup-image';b.href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAHMCAMAAACTPIE7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRF////AAAAQEBAv7+/7+/vMDAwf39/z8/PICAgEBAQYGBgn5+fcHBw39/fr6+vUFBQj4+PrSHCGwAAAoNJREFUeNrs2G1vmzAUBlCueYdA8v9/7YwhaTKt21JpmjbO+YDAtVP1qe2LU1UAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPyDlq57b8DcLduoWXS7OuK9ASnqbVQSnQD/YoAI8A8FuExDRNs15aHp2ohIR72YU8TQNSXAPl32S5e7X+uP3u1afnTaAOcxB5ZzGPotkXyTUk6o1Okpt+aHtn3sgfkyRZvykProvT1MJ9seXwLsI6Y8+ZY2hmaLbHuouhj36xbTLeIpwL1timtZ2m1+v2lyzicO8Hr88c0Yt6oaYylPpUdpKUE+B1gW77J1yNnvvYczBxix7jeXElB9n5al27EvPgc4VI+Eu3tu3YkDfKRUrXtrU3eXXDpKPu3R6WUP/AgwRXf/kFMH+Hy3XHN2MUwvE+zpRVqAP5+BeSNs5/6xQn85A4+3l9keeOyBc4zNI58f74HpeQ88Ep5U4aMK31ftelThfYnePgmwP0pyf8LXmPru9T1wjtgWcD2WAHNwc1mgnwSYZ96YO6zjWFrT/n/Z06wjuv85wIfXk0izHery2SMXkbZ/nESGT/bAqiklJ6d4sgD79OG7s/Ay5Tiv63YI2abiup2Fp+aS+qez8F6Y9yDrKaVbs5bMLntbKl3y7/D962+7xEUIX5nJx7Ek1x+z7Uva2Nb22t7Pd7w7Bdu9EpVvwviKOVeOyfoFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4IS+CTAAha8LCL79mWsAAAAASUVORK5CYII=';a.appendChild(b)}alert('App Mode Activated')})();

4. Press the "Copy" bubble that pops up.
5. Press the "+" icon on the bottom toolbar of Safari and choose "Add Bookmark" (Yes, it will bookmark this page).
6. Name the bookmark "Activate App Mode" and save it.
7. Open your bookmarks using the book icon on the bottom toolbar of Safari.
8. Click the "Edit" button at the bottom of the bookmarks screen and choose the bookmark you just created.
9. Tap the url field and delete the current url.
10. Tap and paste the bookmarklet text into the url field.
11. Save your new bookmarklet.

Voila! Much less painful than syncing with Safari, and it doesn't require me to hunker down under the bed. Now, when you want to save a website to your home screen that will launch in app mode, simply follow this procedure:

1. Open up your bookmarks and choose the "Activate App Mode" bookmarklet.
2. After a slight pause, a dialogue will pop up informing you app mode has been activated.
3. Press the "+" button at the bottom of Safari and choose "Add to Home Screen."

And that's it! Your newly created web app will open faster than if you were loading it in Safari and comes with a basic loading screen. Keep in mind that external links will still open in Safari, closing your application, so app mode may not be appropriate for all sites. In fact, it's probably not appropriate for most sites, but it's nice to have as an option.

How Does It Work?

If you're the technical type, here's the skinny on the guts of the bookmarklet.

It turns out Safari only checks for the existence of the afore mentioned meta and link tags when the home screen application is created, not every time the site is loaded. The bookmarklet adds these tags if necessary so the website will be saved with the instructions to run in app mode on launch. A base64 encoded image is used for the startup image instead of an external href in order to keep the bookmarklet completely self contained.

If you'd like, you can replace BASE64DATAGOESHERE in the code below with your own custom image data and create your own custom bookmarklet. Your startup image must be 320x460 pixels, as specified in the Safari Reference Library, but that seems to be the only restriction. Unfortunately animated images are not supported, so loading spinners are out (believe me, I tried). Once you've created your image, use this online converter to turn it into a base64 string.

javascript:(function(){

  var head = document.getElementsByTagName('head').item(0);

  if(document.querySelectorAll('meta[name=apple-mobile-web-app-capable]').length == 0){
    var meta = document.createElement('meta');
    meta.name = 'apple-mobile-web-app-capable';
    meta.content = 'yes';
    head.appendChild(meta);
  }

  if(document.querySelectorAll('link[rel=apple-touch-startup-image]').length == 0){
    var link = document.createElement('link');
    link.rel = 'apple-touch-startup-image';
    link.href = 'data:image/png;base64,BASE64DATAGOESHERE';
    head.appendChild(link);
  }

  alert('App Mode Activated');

})();