6 ms·

How to Make an HTML5 iPhone App

152 points by jggube 17y ago

jamesbressi 17y ago
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 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 17y ago
  The HTML5 Spec actually has a nice explanation of how to do the manifest. You can find it here: http://bit.ly/aLbKP0 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 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 17y ago
    I am sorry, but please no URL shorteners. http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#a-sample-manifest http://www.whatwg.org/specs/web-apps/current-work/multipage/... http://edwardbenson.com/how-safari-and-firefox-handle-html-5-manifest http://edwardbenson.com/how-safari-and-firefox-handle-html-5...
    - eob 17y ago
      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.
- Terretta 17y ago
  Needs to be a web server you have enough control of to set caching headers for the files in question. If you have enough control of the web server hosting your site, blog, etc., that's fine. For iPhone it's dead simple to turn an HTML5 app into a native app to get into the app store (see Bank of America's banking app which is HTML versus Citibank's app which is native). There are even kits to help with that: http://www.tuaw.com/2009/05/27/nimblekit-native-iphone-apps-with-html-and-javascript/ http://www.tuaw.com/2009/05/27/nimblekit-native-iphone-apps-... The point of an HTML5 app is that (a) you can use DHTML+JS to develop it, and (b) you can bypass the app store to deliver it.
mclin 17y ago
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 17y ago
  > 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 17y ago
    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-Programmers/dp/1934356255/ http://www.amazon.com/iPhone-SDK-Development-Pragmatic-Progr... Will def check out Cocoa Design Patterns when I get a chance.
metachor 17y ago
Very interesting. Thanks for posting.
ZeroGravitas 17y ago
Full, free O'Reilly book on the subject: http://building-iphone-apps.labs.oreilly.com/ http://building-iphone-apps.labs.oreilly.com/
- iseff 17y ago
  Sweet, thanks. I've been doing some beginner tutorials as well: http://www.mobilehtml5.com http://www.mobilehtml5.com Also, my startup (http://www.appstorehq.com http://www.appstorehq.com) provides search+discovery for mobile apps, including mobile web apps. We're trying to push the boundaries with mobile web apps (e.g. easy, App Store style payments) and are looking for alpha testers.. If anyone is interested, email me: iseff@appstorehq.com
- voidfiles 17y ago
  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 17y ago
The timing of this post complements nicely my upcoming iPad app discussed elsewhere on HN: http://news.ycombinator.com/item?id=1220306 http://news.ycombinator.com/item?id=1220306 Thank-you :)
mvermaat 17y ago
I developed a small HTML5 app a couple of weeks ago, optimized for the iPhone (in Dutch): http://c.phanatics.nl/ 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/ 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 17y ago
  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.
jasongullickson 17y ago
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 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 17y ago
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 17y ago
  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 17y ago
    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 17y ago
      Why can't you do in app purchase, with the titanium, or phonegap?
  - _delirium 17y ago
    Although it's not particularly common, there's no real barrier to using Objective-C on any platform that has a gcc port, since it's one of the supported front-ends. If you liked it, you could use it to make native Linux apps, in lieu of C or C++ or whatever else you might use.
- voidfiles 17y ago
  I guess its different for different people, I just can't wrap my head around Obj-C, not sure why not.
vishaldpatel 17y ago
Anyone have a write-up on the limitations of html5 webapps vs. native apps? eg. push-notification only available through native apps?
- nirmal 17y ago
  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.

152 points by jggube 17y ago

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 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 17y ago
The HTML5 Spec actually has a nice explanation of how to do the manifest. You can find it here: http://bit.ly/aLbKP0 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 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 17y ago
  I am sorry, but please no URL shorteners. http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#a-sample-manifest http://www.whatwg.org/specs/web-apps/current-work/multipage/... http://edwardbenson.com/how-safari-and-firefox-handle-html-5-manifest http://edwardbenson.com/how-safari-and-firefox-handle-html-5...
  - eob 17y ago
    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.
Terretta 17y ago
Needs to be a web server you have enough control of to set caching headers for the files in question. If you have enough control of the web server hosting your site, blog, etc., that's fine. For iPhone it's dead simple to turn an HTML5 app into a native app to get into the app store (see Bank of America's banking app which is HTML versus Citibank's app which is native). There are even kits to help with that: http://www.tuaw.com/2009/05/27/nimblekit-native-iphone-apps-with-html-and-javascript/ http://www.tuaw.com/2009/05/27/nimblekit-native-iphone-apps-... The point of an HTML5 app is that (a) you can use DHTML+JS to develop it, and (b) you can bypass the app store to deliver it.

mclin 17y ago

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 17y ago
> 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 17y ago
  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-Programmers/dp/1934356255/ http://www.amazon.com/iPhone-SDK-Development-Pragmatic-Progr... Will def check out Cocoa Design Patterns when I get a chance.

metachor 17y ago

Very interesting. Thanks for posting.

ZeroGravitas 17y ago

Full, free O'Reilly book on the subject: http://building-iphone-apps.labs.oreilly.com/ http://building-iphone-apps.labs.oreilly.com/

iseff 17y ago
Sweet, thanks. I've been doing some beginner tutorials as well: http://www.mobilehtml5.com http://www.mobilehtml5.com Also, my startup (http://www.appstorehq.com http://www.appstorehq.com) provides search+discovery for mobile apps, including mobile web apps. We're trying to push the boundaries with mobile web apps (e.g. easy, App Store style payments) and are looking for alpha testers.. If anyone is interested, email me: iseff@appstorehq.com
voidfiles 17y ago
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 17y ago

The timing of this post complements nicely my upcoming iPad app discussed elsewhere on HN: http://news.ycombinator.com/item?id=1220306 http://news.ycombinator.com/item?id=1220306 Thank-you :)

mvermaat 17y ago

I developed a small HTML5 app a couple of weeks ago, optimized for the iPhone (in Dutch): http://c.phanatics.nl/ 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/ 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 17y ago
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.

jasongullickson 17y ago

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 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 17y ago

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 17y ago
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 17y ago
  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 17y ago
    Why can't you do in app purchase, with the titanium, or phonegap?
- _delirium 17y ago
  Although it's not particularly common, there's no real barrier to using Objective-C on any platform that has a gcc port, since it's one of the supported front-ends. If you liked it, you could use it to make native Linux apps, in lieu of C or C++ or whatever else you might use.
voidfiles 17y ago
I guess its different for different people, I just can't wrap my head around Obj-C, not sure why not.

vishaldpatel 17y ago

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

nirmal 17y ago
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.