Communication with embedded (UI)Webviews in existing iOS and Android Apps

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). android ios phonegap uiwebview webview share|improve this question edited Jun 4 '12 at 20:26 asked May 18 '12 at 17:23 Dan Carlson 516413

What about GAJavaScript. This allows you to intercede much like AddJavaScriptInterface for Android. –  Christopher Mar 17 at 3:25 add comment

2 Answers

active oldest votes

up vote 7 down vote accepted

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();"); share|improve this answer edited May 18 '12 at 18:29 kabuko 19.7k31942 answered May 18 '12 at 18:20 Russ 824312

Just now read point B on your question. Yes its a pain, but its the only way. Honestly I'm disappointed in how little of an interface Apple gives to UIWebView. I'm currently doing something similar for a project where it needs to load special webpages locally for Android and iOS, this is the route I've taken. If you do find a 3rd party library to do all of this I would love to see it. –  Russ May 18 '12 at 18:23 +1 for the suggestion of extending WebViewClient to handle the same bogus URLs in Android. I'm not as familiar with Android and didn't know that was an option. That will likely be the first path I try if no one has 3rd party library suggestions. Thanks for your input! –  Dan Carlson May 18 '12 at 19:27 add comment

up vote 0 down vote	PhoneGap iOS has a concept called Cleaver where you can embed the web view into a native iOS app. Randy McMillian has a good example here. On the Android side work is being done to bring the same functionality. So we are not there yet but we will get there. share|improve this answer answered May 18 '12 at 19:44 Simon MacDonald 17.4k32840
	This looks really interesting Simon. If it was available for Android this would definitely be the first thing we try. –  Dan Carlson May 22 '12 at 15:03 It's coming. A long shot for end of May but looks really good for end of June. –  Simon MacDonald May 22 '12 at 18:54