My iPhone Web App Experience

So I submitted my grapher program to the apple web app directory the other day. Not expecting much of it, I decided to give it a little test run to make sure it all still worked. I had been making sure it functioned on the iPhone, feature by feature as I implemented them on the desktop, however I had never actually tried using it from an end-users point to view.

Needless to say, it was too buggy, with several crashes and annoyances. I wasn't happy! I frantically spent the night fixing bug after bug. The clock hit 4:30am and I had patched it up enough for it to be barely functional.

You couldn't scroll the charts, but at least you could just about click on some buttons without it reacting erratically and be able to rotate the phone, without it crashing.

I uploaded the new version, then checked my e-mail to find a welcome note from apple. So I figured I'd check their web directory...
Woah... Featured with a staff pick. I have no idea how!?

I was pretty sure, I'd get rejected with perhaps some useful advice on how to improve the app, but wow!

The worst problems faced when porting to the iPhone?
Viewport - Don't experiment with different width's and height's, when you do so, it randomly jumps from dimension to dimension when rotating.
I found it best for me to set the scale to be 1.0 for all the scale options..

content="minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0"

So I could always have the same dimension when rotating.

Multi-touch - It's strange this one, if you use a multi-touch gesture (very very fun to do so) and rotate the iPhone at the same time, it goes boom! I tried every permutation possible to get round this issue, but I found it crashes regular websites, and it doesn't just crash in a close down safari friendly way. It keeps Safari running, however the internet becomes unusable, it just hangs forever trying to connect to a website. The only way I found around it was to turn off the phone then turn it back on again. My coding solution was to override the gesturestart event, then fire off an alert if the user tried using multi-touch. I'm defiantly not happy with this, but it's the only way I could get round this issue. Maybe it's just my phone, I'll have to look more into this. Would be nice to hear if anyone else has experienced this?

OnResize - On a desktop PC, by default I had used the onresize event to inform me when I needed to resize my grapher to fit the screen. On the iPhone... BIG MISTAKE! It kept firing the onresize event randomly and relentlessly (probably because my viewport size wasn't set as advised above). However, once I found out that this was the cause of my app crashing, I simply switched over to orientationchange for the iPhone. That event would fire (as long as you never had two fingers on the screen) and you could get the viewport rotation from the window.orientation variable.

Adsense - A quick final tip for adsense users. I'm not a fan of irritating in your face adverts, so I specifically had only used a 468x15 text ad for the non-iPhone version. However, because of the viewport size limitation, I had to switch over to the next smallest thing for the iPhone.

To get a different advert on a different device for the same page, I had originally tried asking google for what to do. However, no one ever got back to me, so I came to the realisation that php was my friend.

[?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if( strpos( $ua, 'iPhone' ) == false )
{
echo '
DESKTOP CODE
';
}
else
{
echo '
iPHONE CODE
';
}
php?]

Simple huh?

We'll anyway, I'll try coming back here to post some more tips later, but it's 6am here and my alarm clocks going off.

Thanks for reading.

iGrapher