iphone web app development, from the trenches.

Dear reader,

I joined the iOS web developers for adventure and a chance to see the world but instead I am working in a mud hole, freezing my arse off, with a constant fear of death. I am writing this note in hope that it makes it out of the trenches. In case I do not.

It's bloody here in the iOS trenches and I feel my days are numbered. With these thoughts on my mind, I hope to share this with you.

Some of this stuff is not documented in the standard issue manual, or disseminated via the standard propaganda channels. I feel it ought be of use to you.

Unfortunately it has been very hectic here, so the words will likely be rushed and detail will be lacking. I apologise for this, but I still think it will be useful (no brain rockets, just some Damn Useful Information).

In case I don't make it,
Your friend from the trenches,
René Dudfield.


ps. if you find this note, please consider commenting on the back with any other useful information your fellow iOS trench mates might find useful.


-------------- -------------- --------------


Going full screen requires a cache manifest on the iphone. Otherwise the files do not save. The cache manifest is a horrible beast, that has quite a few gotchas. It will only go fullscreen when run as a web app, not when run through safari.

You can detect with javascript if your app is running through safari, or as a web app. This is most useful for asking the user if they want to put your app on their home screen.

Changing css opacity quickly is really slow on the iphone. This makes some jquery things slow - like show/hide.

Use the css animations, and transitions if you can. Just like animating opacity is slow with javascript on iphone, so is animating other css attributes.

There is a 5MB limit on the overall app cache size. Big files will not cache (like music and videos).

If you are using cache busting urls, it stuffs up the cache manifest. eg, mystyles.css?v=234 in your html, will make the cache not work correctly. I guess since the cache has just mystyles.css not mystyles.css?v=234.

For cache manifest to work on iphone you need a html 5 doctype, and a html 5 tag without a xmlns attribute.

Google chrome can be a good debugging tool for the cache manifest file. Since it shows you problems in the console.

Restarting the iphone can help clear the safari cache.

Safari 4, and iOS 4 have the audio tag - not earlier. Calling play on an Audio object after calling load does not really work. However if you set the autoplay attribute to true then it plays as soon as it can.

The audio can stutter a little bit if you are doing many other things at the time, or if the network slows, and it's not all loaded yet.

iphone can not play video inline on a webpage. It can only play fullscreen. iPad can play the video inline.

SVG on iphone is pretty quick. Canvas is not so quick... but you can still do basic things ok.

CSS media queries let you supply a different CSS if you are on an iphone/ipad/android etc.

Mouse events are a bit slow to react. You can use mouse events, but learning how to use the touch events will allow you to develop a much better experience. The touch start event, and the touch end event both come before a mouse event arrives. This means that it will always respond faster by using the touch events.

Make touchable things(buttons) big, and make them a similar size. If you have a really small button next to a really big button it might be impossible for the person to press on the really small button. They can zoom in and out, and if the buttons are all a similar size, then they will be zoomed in at the right level to be able to press on the buttons.