Question

This app already exists in the Apple App store and Android markets. It is an app that uses a lot of native code and is not a candidate to be fully html5ed.

Longwinded Description

I want to have a Web-based series of settings pages. Some of these pages will live locally on the mobile device, and some will be hosted on a remote server. The native app will need to communicate with the local web pages to get and set information in the webpage using javascript.

For instance, the first page shown in the WebView/UIWebview will be a local index page. If the remote website is down, the links on the index page to the remote pages will be greyed out. On loading the WebView, the native app will need to detect the reachability of that page and send javascript to the page to grey out the buttons. Likewise, some settings changes made in the local web pages need to be sent back to the Native app for processing.

Short and Sweet Requirements Summary

• Embed remote and local webpages in a webview
• Theses webpages will be the same for both Android and iOS
• Local pages use JavaScript to get data from and send data to the Native Mobile App

Potential Solution Pathways

A. PhoneGap

I realize that Phonegap would work well for this if my application was entirely a web app. From my reading it seems like Phonegap doesn’t really like to be embedded in a native app for part time work.

What? You say it’s really easy and I’ve been grossly misinformed? Enlighten me oh wise one.

B. Roll My Own

I’m open to rolling my own solution, however the methods for getting and setting information via Javascript from the Webviews to the Native Apps seems quite disparate. More-so the getting than the setting (bogus URLs for iOS, very nice AddJavaScriptInterface for Android). Also, it seems like this path could lead to a severe maintenance headache in the future.

Say what? Your genius programmer friend has made a website describing this process in excruciating detail? Tell me more.

C. 3rd Party Library

The perfect 3rd party library that does everything I want (and more!) exists? Save me from my ignorance.

---

Decision

In the future, it seems like PhoneGap’s ‘Cleaver’ project will be the best way to do this.

Since it’s not ready for Android yet, it seems that the current (Early June ’12) best solution for write-once-embedded-HTML is to use a fake URL scheme to communicate from the web page to the native app (both platforms can execute JS on the page directly when going from native app to web page).

Answer 1

For Android this is simpler to do. Take a look at WebView‘s addJavascriptInterface method. You can create your own object with methods that can be called directly in the HTML javascript.

iOS requires a bit of trickyness. Best solution for these types of problems is a couple things:

• For callbacks to iOS you will need to basically make up your own URL scheme like native://somehost.com/somepath When your javascript wants to inform the iOS code use window.location = 'native://somehost.com/somepath';

• Set the UIWebView delegate to an object that defines webView:shouldStartLoadWithRequest:navigationType: it will look something like this

  if ([request.URL.scheme isEqualToString:@"native"]){
      if([request.URL.host isEqualToString:@"somehost.com"]) {
          //Do the code you need to do here, branch off depending
          //on the path and/or host, you can parse parameters here too
          return NO; //This will keep UIWebView from trying to actually load 
                     //your made up scheme
      }
  }
  return YES; //If the request isn't one you want to intercept return YES/true
              //so UIWebView will load the page
  

• To have your iOS code send information or call functions in your javascript you can use WebView’s stringByEvaluatingJavaScriptFromString:. This will return the result of a javascript expression so you can also use it to get some information from the page itself. To call a function use something like this

  [webview stringByEvaluationgJavaScriptFromString:@"myJavaScriptFunction();"]
  

You can also handle the made up scheme in Android by creating a custom WebViewClient and overriding the shouldOverrideUrlLoading method similarly to the iOS code above except the return calls are backwards, you return true if you handled the URL and the WebView should do nothing more, and false if you want the WebView to handle loading. Be sure to create and assign the custom WebViewClient to the WebView using setWebViewClient. To call javascript functions on the actual WebView do something like webview.loadUrl("javascript:myJavaScriptFunction();");