A handy tip if your are developing Mobile web 'apps' using NetTalk6

[Devan]

We've done a few sites now with a combined desktop and mobile interface, which keeps our clients really happy.  But do you know what happens when your clients are happy?? That's right, they ask for MORE...

One of the things about NetTalk using the jQuery mobile library, is that the web apps tend to look like a normal iPhone app.  This leads to clients asking us whether they can have a 'shortcut' icon on the main screen of their iPhones so that they can launch straight into the web app, as they would a normal app.

Did you know that you CAN do this.  You can also opt to hide the actual mobile Safari header and footer so that your web app takes up ALL the iPhone screen space (excluding the status bar at the very top) - just like a 'real' app.

The process of creating a shortcut on the Springboard (i.e. main screen) of the iPhone is also quite trivial, however it takes a couple of steps, and is strangely difficult to try and explain to your users over phone/email.

Enter a useful little javascript app that I found, and which we incorporate into all our new apps.  It's called add2home, and the place to download it is: http://cubiq.org/add-to-home-screen

Basically, this app will cause a little floating window to pop up over your web app screen upon startup, and prompt your user to add the web app to their home screen Springboard.  It is quite unobtrusive, and quite SMART, in that it will recognise the version of iOS and change the position and icon of the instructions to suit the version of mobile Safari.  In addition, once you add the web app to your home screen, then it will never pop up a reminder again.

Just copy the downloaded 'add2Home.css' to your 'styles' folder, and the 'add2Home.js' to your 'scripts' folder.

Then, in the IndexPage (or whatever your main holding page is called) procedure, go to the XHTML properties, and add these lines at the very top, ('Before </HEAD>') and tick 'Mobile Only':

Code: [Select]

<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="styles/add2home.css">
<script type="application/javascript" src="scripts/add2home.js"></script>

The first line is what prompts your web app to start in full screen mode on iOS devices (and some Android devices too!) - but ONLY if it is started from the home screen, which is why you really want to get your users to start your apps from the home screen .

TIP: Create a 57 x 57 pixel PNG image that you would like to use as the icon on the home screen, call it 'apple-touch-icon.png' and save it into the 'web' folder.  Also, change the 'Title' property of the 'IndexPage' to whatever name you want to save the app as on the home screen.  This will save any further confusion on the part of your user, and means that can add your web app to the home screen with only two taps at the most.

That's it.  You be amazed at how much this reduces support calls, and increases user satisfaction that you app LOOKS like a real app...

Hope this helps,
Devan

[Bruce]

great tip Devan - Thanks!

[Skip Williams]

Thanks, Devan! That is indeed useful.

Skip

[Andjane]

Hi there

That is great. i will give it a try.

How do we get a shortcut on an android phone like the S2 and S3 ?