Question

I am creating an iPhone/iPad app for the app store. What I’d like to do is create it using HTML5/Javascript through a UIWebView so I can later use the HTML5/Javascript code for a web version as well (this is a requirement). I would like to have an offline database (SQLite) that basically ships with the app – this would be the content for the app and the .sqlite file would exist in the /Supporting Files/ folder of my XCode Project.

My question is, how can I run queries and get data back from this database from Javascript? Is this possible?

Answer 1

You would have to build your own bridge or use one of the many HTML-based app frameworks available for iOS (PhoneGap, Appcelerator, etc).

If you want to go down the path of building your own bridge, you should check out UIWebView‘s -stringByEvaluatingJavaScriptFromString:, and the combination of UIWebView‘s -loadRequest and UIWebViewDelegate‘s webView:shouldStartLoadWithRequest:navigationType: using a custom protocol (e.g., com.mycompany.myapp.1.0://) that you check for in the delegate method.

EDIT:

Here’s some sample code:

Your HTML should have something like this:

<a href="myapp://doQuery?arg1=a&arg2=b">Do Query</a>

or:

<a href="#" onclick:"javascript:doQuery();">Do Query</a>
<script>
  function doQuery() {
    window.location = "myapp://doQuery";
  }
</script>

Then your webview delegate can capture a click there by:

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)req (UIWebViewNavigationType)navType {
  if ([[req URL] scheme] == @"myapp:") {
    if ([[req URL] host] == @"doQuery") {
      // Do the query here.
      [webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"latestResult = %@; queryReturned(latestResult);", queryResultAsJSON]];
    } else if ([[req URL] host] == @"doSomethingElse") {
      // Do something else.
    }
    return NO;
  }
  return YES;
}