How can I write an iPhone app entirely in JavaScript without making it just a web app?

I found the answer after searching around. Here's what I have done:

  1. Create a new project in XCode. I think I used the view-based app.

  2. Drag a WebView object onto your interface and resize.

  3. Inside of your WebViewController.m (or similarly named file, depending on the name of your view), in the viewDidLoad method:

    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];  
    NSData *htmlData = [NSData dataWithContentsOfFile:filePath];  
    if (htmlData) {  
      NSBundle *bundle = [NSBundle mainBundle]; 
      NSString *path = [bundle bundlePath];
      NSString *fullPath = [NSBundle pathForResource:@"index" ofType:@"html" inDirectory:path];
      [webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:fullPath]]];
    }
  4. Now any files you have added as resources to the project are available for use in your web app. I've got an index.html file including javascript and css and image files with no problems. The only limitation I've found so far is that I can't create new folders so all the files clutter up the resources folder.

  5. Trick: make sure you've added the file as a resource in XCode or the file won't be available. I've been adding an empty file in XCode, then dragging my file on top in the finder. That's been working for me.

Note: I realize that Obj-C must not be that hard to learn. But since I already have this app existing in JS and I know it works in Safari this is a much faster dev cycle for me. Some day I'm sure I'll have to break down and learn Obj-C.

A few other resources I found helpful:

Calling Obj-C from javascript: calling objective-c from javascript

Calling javascript from Obj-C: iphone app development for web hackers

Reading files from application bundle: uiwebview


Check out PhoneGap at http://www.phonegap.com they claim it allows you to embed JavaScript, HTML and CSS into a native iPhone app.


For those doing this on iPhone 2.1 (maybe 2.0), you do NOT need to create any special services for local data storage. MobileSafari appears to support the HTML5/WHATWG SQL database API. This is the same API supported by recent versions of desktop Safari and Firefox.

If you're using a toolkit like Dojo or ExtJS that offers a storage abstraction, your code should work on just about any modern browser, including MobileSafari.

To test, open http://robertsanders.name/dev/stackoverflow/html5.html on your iPhone.

If you open that page then look on the filesystem of a Jailbroken iPhone, you should see a database somewhere in /private/var/mobile/Library/WebKit/Databases/. There's even a directory of web-opened DBs there.

root# sqlite3 /private/var/mobile/Library/WebKit/Databases/Databases.db SQLite version 3.5.9 Enter ".help" for instructions

sqlite> .databases seq name file


0 main /private/var/mobile/Library/WebKit/Databases/Databases.db

sqlite> .tables

Databases Origins

sqlite> select * from Databases;

1|http_robertsanders.name_0|NoteTest|Database|API example|20000|0000000000000001.db

sqlite> select * from Origins;

http_robertsanders.name_0|5242880


You can create an application without knowing any obj-C. The QuickConnectiPhone framework allows you to do this. Check out http://tetontech.wordpress.com for how to use it as well as other ways of doing what you have asked.