I know that I’ll probably catch some flack for this, but I’m not a Mac fan. Ok, I just plain can’t stand them. I can’t put my finger on why, but here’s a start: in order to develop an App for the illustrious iPhone, you must develop only on a Mac with Mac software—an investment well over $2,000. Nevertheless, the iPhone is a market-changer and a marketing medium to which businesses must cater.
So, you want the benefits of App-like access, but you don’t want the expense (nor the forced migration to the Mac platform), or you possibly don’t want to learn a whole new code language. You’ve done well at web application programming, enjoy all of the benefits of cloud hosting, so why build a client application now? Especially if you aren’t chiefly interested in the App Store exposure—people will find your application through your own marketing efforts, you just want to offer them the one-tap quick access behavior. You need a pseudo-app.
Good news. iPhones have built-in capability to support just that kind of function. No Mac needed. No second programming needed for a client-side application. All you need is:
- A website designed 320px wide, or with an optional theme as such.
- This zipped code snippet and images
- An apple-touch icon (png)
To see an example of an application using the above functionality, go to www.heretwo.com on your iPhone or iPod Touch. This is the program for which I originally designed this simple javascript.
First, what’s all this code doing in principal?
The code in the zipped file above is designed to instruct the user on the proper steps they need to take, intuitively teaching them the native iPhone functions that are already available to them which make your web page accessible like any other App. Second, it has measures built in so that this only displays on iPhones AND allows the user to close the prompt, never to see it again for a period of 6 months, at which point they’ll be reminded again.
Now, for the geeky part: how do I install it?
- Save your apple-touch-icon.png file in the root directory of your website and reference it with the appropriate >link> tag in the head.
- Place the images found in the zip file (above) into a directory pathed /images/
- Paste the code from the text file found in the zip file (above) just before the closing body tag on your web page(s)
That’s it. If you follow these steps, you should see a prompt appear on your iPhone that points the user to the shortcut icon in their Safari browser and instructs them to “Add to Home Screen” for one-tapp access like all their other apps. Now, your web application will be book-marked with an icon on the iPhone screen. In appearance and ease-of-access, it has all the benefits of a native App without the cost or hassle.
