iOS SQL Database access from Javascript

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;
}

• Manu Kanthan: This helps - although I'm not sure what it means to build my own bridge - and I don't mind doing that if I can get some level of customization out of it. Do you have a link for a tutorial or anything that better explains this? Also, do you know for sure that I can run a query and get that data into Javascript layer as called for BY the Javascript?