WebApp Hints


Making WebApps behave like native apps

As it turns out, most of the capabilities I wanted to give WebApp developers with my "CloudApp" iPhone applications are actually possible with standard HTML. For a very in-depth examination of all the known techniques, I recommend the website iPhone Webapps 101: Getting Safari out of the way. However, in the words of Steve Jobs himself "great artists steal" so here's my take on how to make your own WebApp masquerading as a native application.

Getting rid of the address & tool bars
This was the original idea behind "CloudApp". Make a web page (i.e. Web Application or "WebApp") appear like a native application by running it in a browser without the address & tool bars. This can be done in a web page by adding the following code to the HEAD section of your webpage:

< meta name="apple-mobile-web-app-capable" content="yes" >
Disabling pinch/zoom
A later revision of "CloudApp" added the ability to disable the pinch-zoom effect. Real applications can't have their interface zoomed, so WebApps should also remove that ability. Add the following code to the HEAD section of your webpage:

< meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no;" >
EXTRA: Home screen icon
When you make a WebClip on the iPhone, it creates a small icon on your home screen thats looks like a miniturized picture of that website. Touching that icon goes directly to the website you selected.

As it turns out, you (the WebApp developer) can create your own custom icon that will be used whenever someone makes a WebClip of your site. Simply include a PNG image file (57x57 pixels for the iPhone) and link to it by using this code in your HEAD section of your webpage:

< link rel="apple-touch-icon" href="index.png" >

Due to the fundamental design of native applications, this is not (and probably won't ever be) possible using CloudApp.
EXTRA: Disable the callout popup
When the user holds thier finger down on a link for a few seconds, a callout popup comes up (usually asking if they want to save the image, open the link, etc.). This can be disabled by adding the following code almost anywhere in your webpage:

< style type="text/css" >
    * { -webkit-touch-callout: none; }
< /style >
This is not possible (right now) using CloudApp.
EXTRA: Remove link highlight color
When you have a link that's already been visited in your webapp, WebKit (the basis of all browsers on the iPhone includeing Safarri) adds a highlight color to the link. This can also be disabled: 
< style type="text/css" >
    * { -webkit-tap-highlight-color: rgba(0,0,0,0); }
< /style >
This is not possible (right now) using CloudApp.
EXTRA: Disable copy & paste
You probably don't want users able to select the text right out of your WebApp and copy it (though maybe you do). If you want to disable this ability, add this almost anywhere on your webpage: 
< style type="text/css" >
    * { -webkit-user-select: none; }
< /style >
This is not possible (right now) using CloudApp.
EXTRA: Creating a splash screen
To add a splash screen during loading, create a 320x460 .png file and then link to it in the header. The file must be exactly 320x460 or the iPhone will ignore it (iPad requires 1004x768). 
< link rel="apple-touch-startup-image" href="startup.png" >
This is not possible (right now) using CloudApp.
EXTRA: Preventing elastic banding when scrolling
If you a flick a web app past the bottom or top of the page, the page itself gets elastically tugged away from the bottom or top of the screen. This behavior is another sign that the app isn't a native app, but it can be avoided with some clever JavaScript.

To stop this behavior, capture touchmove events on the document in JavaScript and cancel them. You can do this by adding a handler to the body tag, and invoking the preventDefault method on the event object. 
< script >
function BlockMove(event) { event.preventDefault(); }
< /script >

< body ontouchmove="BlockMove(event);" >
< body >
EXTRA: Detecting rotation events
If you want your app to be aware of rotation, you can setup a routine to trap rotation events: 
< script >
function updateOrientation() { alert(window.orientation); }
< /script >

< body onorientationchange="updateOrientation();" >
< body >
OPEN ISSUE: Disable network status / time / battery display
Yes, this is still an open issue. There currently exists no way to disable the top status bar (with the network status & time) from the top of the screen using just a web application. It's a small item, but may be important to some people. For that, CloudApp is really your only answer.

On the other hand, it is possible to change the color of the status bar from the default gray to black, if that suites your application a bit more. Add the following code to the < HEAD > section of your webpage:

< meta name="apple-mobile-web-app-status-bar-style" content="black" >
OPEN ISSUE: A browser for local content
It's a little known fact, but you can store files locally on your iPhone/iPod/iPad. Under some circustances (such as when using iPhone Explorer in windows) you can store files on your iPhone. You could store the files for a complete web application locally. However, Mobile Safarri blocks you from accessing these files. With CloudApp, you can access them by changing the URL in the Setting menu to something like:

file:///var/mobile/Media/DCIM/test.html



Contact: Russ Caslis
Last updated: 11-09-2010 at 21:23