Chromeless Web Apps on iPhone

One thing I was really looking forward to in iPhone OS 2.0 was the advent of chromeless web apps. The promise was, as a web developer, you’d be able to add a line of code to your site, and it would unlock a fancy new feature: in addition to just adding an icon to your home screen, you could now make it a standalone “app.” No URL bar, no navigation chrome, all screen real estate. Here’s the code, situated in the head tag:

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

And the result is a nice, clean, chromeless browsing experience:

Hahlo Chromeless — Landscape

 

The problem is, it’s not perfect, so a lot of web app developers haven’t been using it. Take Hahlo, for example. It would be a spectacular standalone Twitter client. However, the site’s developer, Dean Robinson, found very quickly that external links simply don’t work properly from within this chromeless wrapper. You tap on a link, and, if it’s supposed to spawn a new window, it simply doesn’t work. Or, if it’s a normal “go there right within this current window” type of link, it’ll pop you out to MobileSafari. No good.

Also, as Craig Hockenberry has pointed out, all chromeless web apps must load a fresh new WebKit instance every single time you load the app. Compare that with Safari.app, which is almost always running in the background, ready for action. It’s not a huge wait time when you launch the “app,” but it’s enough to be a little annoying.

So, in answer to these flaws, developers like Dean, Shaun Inman of Mint fame, and the Flickr Mobile team have all decided not to include that one magical line of code. No chromeless web apps for you!

iPhone shortcuts with fancy iconsThankfully, there’s a way around it. It’s roughly the same method we used to use for assigning our own preferred apple-touch-icons for WebClips, back when they were the hot new item. Anyway, it’s pretty simple to just make your own “bounce page” with all your favorite web apps, and enable them as chrome-less web apps without the developer’s consent. Now, of course, you’re not really messing with their code…but do keep in mind, you’re messing with their intended user experience. If you use this method, and you get all bummed out about your links not working, don’t blame Dean or Shaun or Flickr. It’s not their fault, they’ve all written some amazing code. You’re circumventing their delivery decisions, so you have to kinda own that. If you’re cool with that, have fun.

If you want to leech off my shortcut page, I guess, go right ahead. I’m not likely to add any suggested items to it, unless they blow my mind. And my Mint bookmark ain’t gonna do you much good, but it’s a good example of how to get it done for your own installation. View source, and go to town.

Tags: , , , , ,

3 Responses to “Chromeless Web Apps on iPhone”

  1. Bart says:

    I remember Gmail used to open chromeless after I added it to my homescreen and then it stopped, which was annoying cause they have a bunch of stuff at the top taking up vertical space. I guess this is why. Has this problem with links not working been fixed in iPhone OS 3.0?

    • jim says:

      Sorry for the late response: as far as I’ve seen, 3.0 still has the problem with links in chromeless web apps. But developers (like Shaun Inman and Dean Robinson) have done some fancy footwork to make lemonade. For instance, Fever° captures all external links in a “DiggBar-like” wrapper, to keep you in the chromeless web app, and at the top of the screen there’s a button to exit to MobileSafari. Again, it’s making lemons into lemonade, so it’ll be nice to have that problem disappear.

Leave a Reply