Augmenting a webapp with native capabilities - Bridging PhoneGap's InAppBrowser with Rails web app application javascript

Question

I have written a simplistic chat application using Rails 3 and JQuery Mobile, you can have a look at the prototype here : http://budz.vdsites.com

It's usefelness however is pretty limited as a mere web app, and I'm looking to include some native mobile capabilities such as notifications, picture uploading ( through the gallery or the camera ), contacts fetching and maybe more to come after that. I am also planning to deploy a similar enhanced client for desktops, using the same front end for both.

One important requirement is to be able to write the minimal required code to enable those abilities, as I could support more than a platform set and then maintaining every code base will become tedious.

After some research it turns out my best bet would be a PhoneGap based chromeless native app, with just enough functionality in the phone-side to enable those extra functionalities. For this, the InAppBrowser widget seems to be perfectly adapted to the job.

However, looking into it's API further, it seems that there's next to no facility to enable a basic communication going between the native application and the web app, except the basic load related events which are useless to me unless I hack my application massively to trigger these events ( and it looks pretty bogus to do so ).

Ultimately, I would like to be able to listen to custom events on the PhoneGap side, and trigger them from the webapp.

I came up with some leads to achieve the required functionality :

I could create a DOM element to use it's properties as a medium between the native side and the web app - But there doesn't seem to be a way to access the DOM from outside it's container.
I can listen to some specific endpoints in my webapp from phoneGap, outside the inAppBrowser and trigger native functionality based on the server response - This definitely works, but it implies I have to write different listening code for other platforms and thus breaks slightly my minimal coding requirement.

So here's my questions :

Is there a way to achieve the behaviour I want ( Event dispatching ) using PhoneGap ?
What do you think about my two suggested approaches ?
Should I look for another platform ? What do you suggest ?
What's the community take on this ? How do you handle such cases ?

Thank you for any insights you can provide !

MBillau MBillau · Accepted Answer · 2013-05-01T15:17:48

I'm not sure if this is built in yet, however, you can pretty easily inject your own custom scripts inside the page that you open up with InAppBrowser, at least on Android (not sure about the other platforms at the moment.) This feature hasn't been documented yet, but there are tests for it in the mobile-spec test suite and it looks pretty easy: https://github.com/apache/cordova-mobile-spec/blob/master/inappbrowser/index.html#L165 They are just calling inAppBrowser.injectScript(). If you look on that page, you'll see that they are manipulating the external web pages' DOM pretty easily by injecting this code:
```
             var code = '(function(){\n' +
              ' var header = document.getElementById("header");\n' +
              ' header.innerHTML = "Script literal successfully injected";\n' +
              ' return "abc";\n' +
              '})()';
```
and injecting it with: iab.executeScript({code:code},callback. I suppose you could do this to write events into a queue in a hidden DOM element in the external page and pull the events off this queue from your inAppBrowser to process them. It seems a little janky though. I tried injecting global variables that you could access from either JavaScript page but was not having much luck...there's probably SOME way to do this though, if I come up with anything I'll be sure to edit this post.
The first approach is pretty much what I suggested above. I'd use a hidden in the external page and write events/commands into it that you then read and interpret in the Cordova code. For the second approach, I don't understand what you are suggesting or why you would have to write different code for different platforms.
Sorry I don't really have any other suggestions. I think Cordova/PhoneGap is the best choice for you since it will be easy to create an app on multiple platforms with the same native functionality using the same set of Cordova API's across all of the platforms.
I think what you are trying to do (intercept JavaScript events from the external page opened in the InAppBrowser) is probably a pretty useful concept and idea. I have seen other people asking for this too. I think that if it is not possible already (it might be, I'll keep messing around with it) that there might be plans for it in the pipleine. You could create a feature request against Cordova for this functionality and see how well it is received.

Augmenting a webapp with native capabilities - Bridging PhoneGap's InAppBrowser with Rails web app application javascript

2 Answers