Inspired by Luke Carbis’ sweet post on doing a standalone browser version (chromeless, separate from the regular Safari app) of Google Latitude for iPhone, I thought I’d extend his concept with a few steps on how to make your own similarly fancy web clip for any service optimized for the iPhone. This stuff has surely been covered countless times before, but I thought I’d give my take on it. What’s cool to me is that the end result is pretty hard to distinguish from a native app, especially now that Mobile Safari can tap into the phone’s location services.
We’ll use Google Reader as an example. Here goes…
1. Create a new HTML file with the following contents:
<meta name=“apple-mobile-web-app-capable” content=“yes” />
<link rel=“apple-touch-icon” href=“apple-touch-icon.png” />
As for the apple-touch-icon.png, this is the icon that’ll appear when you choose (below) to bookmark the site to your phone’s home screen. You don’t have to worry about rounding the corners or doing any fancy glass effects, that’ll all be handled by the iPhone. Just create (or steal) a .png that’s 57×57.
2. Upload your HTML file somewhere, and place the apple-touch-icon.png in the same directory. For this example I’ve called the file index.html and placed it here:
UPDATE: No longer available, sorry!
3. Visit your new URL on the iPhone. You’ll be immediately redirected to the correct destination (in this case, Google Reader). Now click the back button in Mobile Safari and you’ll land back on your redirect URL (the page will be blank). Press the “+” button and choose the “Add to Home Screen” option. You’ll see a preview of your custom icon and an option to edit the web clip’s name. Once you’re set, click the “Add” button in the upper-right corner.
4. All done. You can close the Safari window and click the new custom home screen icon to visit your favorite iPhone-optimized website in a standalone browser.