I’ll 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: 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 marketing medium businesses must cater to.
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, and 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, and you want to offer them the one-tap quick access behavior. It would be best if you had a pseudo-app.
Add to Home Screen
Good news. iPhones have built-in capability to support just that kind of function. No Mac is needed. No second programming is needed for a client-side application. All you need is the following:
- A website designed or responsive to 320px wide.
- This code snippet and images
<head>
<title>Add To Home</title>
<link rel="stylesheet" type="text/css" href="../../style/addtohomescreen.css">
<script src="../../src/addtohomescreen.js"></script>
<script>
addToHomescreen();
</script>
</head>- An apple-touch icon using the png format
First, what’s all this code doing in principle?
The code in the zipped file above is designed to instruct users on the steps they need to take. It intuitively teaches them the native iPhone functions already available, making 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 icon as a png file (eg. apple-touch-icon.png) and upload it to the root directory of your website and reference it with the appropriate > link > tag in the head. While you can rename and refer to a specific location elsewhere, Safari will automatically look for this file name at the root of your website.
<link rel="apple-touch-icon" href="apple-touch-icon.png">- Place the images found in the zip file into a directory pathed
/images/. - Paste the code from the text file found in the zip file just before the closing body tag on your web page(s).
That’s it. If you follow these steps, you should see a prompt 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-tap access like all their other apps.
Now, your web application will be bookmarked 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.
