Platform-Independent JS->Native Bridge?

Question

I'm currently working on an app that aggressively uses webviews on both iOS and Android to render content, with native chrome surrounding it. I want to be able to control this chrome via javascript methods.

Android Webview has addJavascriptInterface which allows this to happen, but iOS does not have this facility. I've already checked out the SO answer at iOS JavaScript bridge, and this has usefuleinformation, but It's iOS-only; optimally the same underlying web code could power the callbacks on both Andorid and iOS devices.

I'm wondering if something like PhoneGap or Appcelerator provides a way to do this simply; however I don't need their core product (providing a native experience via underlying html/css/js) and I dont even know if what I need is included in their package.

Thanks for any info!

score 1 · Answer 1 · answered Oct 29 '12 at 21:41

I would say that the best way would be to do it yourself, combining those two examples:

function nativeDoStuff() {
  if (androidbridge != null {
    androidbridge.doStuff();
  }
  else {
    //construct url
    window.location = "myiphonescheme://dostuff";
  }

come to think of it, if you're feeling ambitious you could code up a quick javascript object to do it for you:

function NativeAppBridge () {
  function runMethod(methodName, params) {
    if (androidbridge != null {
      // If the android bridge and the method you're trying to call exists,
      // we'll just call the method directly:
      if (androidbridge[methodName] != null) {
        androidbridge[methodName].apply(this, params);
      }
    }
    else {
      // building the url is more complicated; best I can think
      // of is something like this:
      var url = "myiphonescheme://" + methodName;
      if (params.length > 0) {
        url += "?"
        var i = 0;
        for (param in params) {
          url += "param" + i + "=" + param;
          ++i;
          if (i < params.length) {
            url += "&";
          } 
        }
      }
    }
  }
}

Using it would then be as simple as:

var bridge = new NativeAppBridge();

function onClick() {
  bridge.runMethod("doStuff", null);
}

Be aware that I coded this off the top of my head and don't have time to test, at the moment - but I think it should work well enough, provided I didn't make any major mistakes

score 1 · Answer 2 · answered Apr 28 '15 at 15:01

1

You can try the XWebView project if you plan to use WKWebView

answered Apr 28 '15 at 15:01

soflare

751
5
16

score 0 · Answer 3 · answered Oct 29 '12 at 20:20

You can use phonegap plugins to do it. They provide an excelent way to communicate between their webview and your native layer.

Here you can see how to create one!

And my personal opinion on the subject: I've been using phonegap for a while and if you are on webviews, I strongly suggest you to rethink the way you're doing stuff and move to a mobile web platform. You probably can save a lot of time.

The way I see it, the great disadvantage on using this is you are creating a webpage instead of a mobile app. You cant use native components and your app gets less responsive. As you are already on webviews, I believe you can only find benefits on these platforms.

Platform-Independent JS->Native Bridge?

3 Answers3