

How to Make an HTML5 iPhone App - jggube
http://sixrevisions.com/web-development/html5-iphone-app/

======
mvermaat
I developed a small HTML5 app a couple of weeks ago, optimized for the iPhone
(in Dutch): <http://c.phanatics.nl/>

It converts between track and field performances and awarded points by the
Dutch athletics competition. The conversions can be stored. Intended usage is
on the field during competition day, or just for the curious.

Source: <http://svn.vermaat.name/competitie-rekending/>

Originally I also used a manifest file for caching, but decided I didn't need
it (and Firefox popups warnings with it). (The manifest is still used in SVN
rev 20.)

The biggest problem I encountered on the iPhone (and have not been able to
solve) is that whenever you switch apps and return, Mobile Safari reloads the
page (online, or from cache) and does so using the original url. There seems
to be no way to stop this.

For me that meant that stored conversions where lost (they were stored in the
DOM and url), so I had to store them explicitely using localStorage. And still
then, it is annoying you have to wait a few seconds for the page to reload
before you can do anything.

The only info I found on this problem suggested that it might be related to
Mobile Safari's memory management and as such wouldn't occur (as often) on
iPhones with more memory than the one I tested with.

~~~
voidfiles
Personally I would only use the cache manifest, when I planned on using it as
an app that is launched like normal. Also did you make sure all your files
were less then 15k that seems to be the limit at which iphone will cache
files.

------
ZeroGravitas
Full, free O'Reilly book on the subject:

<http://building-iphone-apps.labs.oreilly.com/>

~~~
voidfiles
Yea, this book was really helpful, and I can't belive I forgot to add the link
to the article. For some reason though people still didn't know they could
write apps like this. That was my biggest reason for writing this article.

------
jasongullickson
This is a great post and I'm glad to see someone do such a nice description of
"doing it from scratch", but I thought I'd mention that Dashcode (part of the
free developer tools for OSX -
<http://www.apple.com/macosx/developers/#dashcode> ) has built-in support for
developing iPhone Web Apps and includes some templates for the more common
types.

It's a cool way to get an app up-and-running quickly without having to
consider the App Store process and while it does abstract you a bit from the
straight coding, it's all still done with HTML, CSS and Javascript so if
you're already a web developer and not interested in learning Objective-C it's
a nice tool to build something quickly.

I've developed several "native" iPhone apps but went this way for one project
because we could do everything they wanted to do in a web app and it was
simply faster to get there than if we did a native app.

Definitely one of the most overlooked options out there.

------
richcollins
_but its C—or a form of it—and it’s really hard to learn_

I personally prefer Javascript to Objective-C, but HTML, CSS and Javascript
are not easier to learn than Cocoa and Objective-C. Objective-C and Cocoa are
very will designed, simple tools.

~~~
ube
True - they're not easier to learn but beyond the browser they are more
applicable across different mobile platforms (i.e. Android, Blackberry).
Objective-C and Cocoa will always be iPhone specific. I've been learning
Objective-C though I wonder if my time would be better spent on
javascript/html/css and usage of environments such as Titanium developer or
Phonegap.

~~~
mclin
Also, many many people already know JS/CSS/HTML, like me.

I picked up phonegap and had my first app on the store in a week of spare
time. But then I rewrote it with Titanium because it was kind of slow, which
took at most another day.

It felt like Christmas, and I found iPhone skillz under the tree.

But now I want in-app-purchase, so I'm learning Obj-C... so the above was all
for nothing.

~~~
voidfiles
Why can't you do in app purchase, with the titanium, or phonegap?

------
jamesbressi
Thanks for sharing.

If anyone else hasn't made an HTML5 iPhone app or any web app for that matter
before and got lost at this part:

"Then, next step is to server it from an actual webserver that can set the
proper settings on the cache.manifest"

then maybe I'm not alone? I'm assuming I just read it wrong and it means you
can use the same webserver you are using to host your blog, website, etc.?

And then, I was curious how you get the icon on the iPhone home screen which I
found the answer here after a quick goog search:
<http://italkmagazine.com/how-use-iphone-itouch-web-app>

(edit) I do have one more question to add for all you crazy iPhone app and
maybe Palm app developers out there: 1. Is there an straight-forward way to do
this method and then use iPhone developer apps to bring it in and export it to
then distribute via iTunes App Store? 2. Same question about Palm.

~~~
eob
The HTML5 Spec actually has a nice explanation of how to do the manifest. You
can find it here: <http://bit.ly/aLbKP0>

I wrote a blog post a while back that talks about how browsers handle the
manifest files. Forgive the shameless self-promotion, but it might be
interesting background reading: <http://bit.ly/9WhsO8>

Basically, the manifest file is just a special text file that stores a list of
the things you want the client to cache. This is the feature of HTML5 that
enables offline access to web resources. Think of it as sort of a robots.txt
for caching purposes.

~~~
joshfinnie
I am sorry, but please no URL shorteners.

[http://www.whatwg.org/specs/web-apps/current-
work/multipage/...](http://www.whatwg.org/specs/web-apps/current-
work/multipage/offline.html#a-sample-manifest)

[http://edwardbenson.com/how-safari-and-firefox-handle-
html-5...](http://edwardbenson.com/how-safari-and-firefox-handle-
html-5-manifest)

~~~
eob
Given your comment, what a smile it brought to my face when I read your HN
profile and learned you created a URL shortening service of sorts :)

Apologies if I breached HN Etiquette. I'll post full URLs in the future.

------
mclin
My opinion is mobile safari is still too slow for this. I did one and it was
fine in the simulator, but lagged on iPod touch. 3GS was mostly ok. Maybe in a
generation or 2.

Currently sucking it up and learning ObjC

~~~
wallflower
> Currently sucking it up and learning ObjC

Keep at it. I seriously dove into it about three months ago. Objective C/Cocoa
is no longer the problem, it's the solution. Don't worry if the code you write
sucks when you look back at it (e.g. no categories, protocols, NSNotification
use). Interface Builder has a thick skin; curse at it. Part of learning this
is learning the non-optimal way first. You'll grow into it. The best part of
Cocoa/Objective C is how well it was designed. Highly recommend "Cocoa Design
Patterns".

~~~
mclin
Currently going through this one. Seems pretty solid for people that already
know their way around UI. Haven't found anything obviously wrong like in some
other iPhone books I looked through.

[http://www.amazon.com/iPhone-SDK-Development-Pragmatic-
Progr...](http://www.amazon.com/iPhone-SDK-Development-Pragmatic-
Programmers/dp/1934356255/)

Will def check out Cocoa Design Patterns when I get a chance.

------
vishaldpatel
Anyone have a write-up on the limitations of html5 webapps vs. native apps?
eg. push-notification only available through native apps?

~~~
nirmal
I was just thinking about if a webapp could setup a protocol handler, similar
to the way Tweetie uses "tweetie://" in its Mobile Safari bookmarklet. I
wouldn't mind using something like Notifo to push notifications to my users
but it's unclear how my offline webapp could be launched from the
notification.

------
jasongullickson
The timing of this post complements nicely my upcoming iPad app discussed
elsewhere on HN:

<http://news.ycombinator.com/item?id=1220306>

Thank-you :)

------
metachor
Very interesting. Thanks for posting.

