Many times we need integration between native iPhone application and a web application. This could be due to several reasons. One possibility is that you already have a web application and you can build a native mobile app much quickly by leveraging some part of it. Second is that the web application has been built by a third party and you would like to use it in your application. Example of this is the twitter application, where you can view a link directly inside the twitter application.
Third very interesting case is when some third party just provides you a JavaScript API and no direct HTTP calls, for example routes between two places using Google Maps API. So the only way out is to call the JavaScript API from native application.
Open Browser from App
The simplest case is when you just want to open the browser from your application. You can do this by the function
// Create the URL string NSString* urlString = [NSString stringWithFormat:@"http://maps.google.com/ maps?q=%@", @"india"]; // Launch the browser! [[UIApplication sharedApplication] openURL:[NSURL URLWithString:urlText]];
This is a very simple approach, however with several disadvantages. One is that your application is no longer running in the foreground. Also your application does not have any control over the web application that has been opened.
Open link within app
The next way is opening a link within the application. It is easily achieved by using a UIWebView as follows:
// Create the web view UIWebView* webView = [[UIWebView alloc] initWithURL:@"http:// maps.google.com/maps?q=%@", @"india"];
This can be added to any view in your application. Now we can close the webview from our application when we need to. In addition, we get callbacks for page loading, link clicks and so on.
What if the integration is more complex? Imagine this scenario – the user clicks a button in the native application and you would like to call some JavaScript function in your web application. This is done by the following code:
[webView stringByEvaluatingJavaScriptFromString:
@"alert('javascript called')"];
Not only you can call any JavaScript functions available in the web page being displayed, but you can call any use any JavaScript string, or even submit forms. Now what if we need to get the result of some JavaScript called on the web page into our native application? If an alert is called in the JavaScript on the web page, and listening in the web view as follows.
// In JavaScript
alert('send event')
// In native application
- (void)webView:(UIWebView *)webView
runJavaScriptAlertPanelWithMessage:(NSString *)message
initiatedByFrame:(id)frame {
NSLog(message);
}
The above code would print Send Event.
You can use the same method to do a more generic version of interaction, if you need to do a call from the web view based on what you received from JavaScript.
// In JavaScript
alert('callback();');
// In native application
- (void)webView:(UIWebView *)webView
runJavaScriptAlertPanelWithMessage:(NSString *)message
initiatedByFrame:(id)frame {
[webView stringByEvaluatingJavaScriptFromString: message];
}
Since the message contains callback(), this function will be called on the JavaScript by the web view.
Using JavaScript API
Lastly we come to our interesting use case when there is only JavaScript APIs available from a third party. All you need to do is, create an HTML page which contains the functions and include it with your application. Open this HTML in web view as follows:
NSString * nsstrPath = [ [ NSBundle mainBundle ] pathForResource : @"MapsApi" ofType : @"html" ] ; NSURL * nsURL = [ NSURL fileURLWithPath : nsstrPath ] ; NSURLRequest * nsURLRequest = [ NSURLRequest requestWithURL : nsURL ] ; [ webView loadRequest : nsURLRequest ] ;
We hope this article shall help you creating mobile app using iOS and HTML5. We would love to hear your feedback so please feel free to add your comments. There are many frameworks which can help you creating mobile app. We prefer Sencha touch though.
