Augmenting A Webapp With Native Capabilities - Bridging PhoneGap's InAppBrowser With Rails Web App Application Javascript

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

Solution 1:

1. 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.

2. 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.

3. 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.

4. 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.

Solution 2:

There's another more server-centric approach to Hybrid Web apps called BridgeIt: http://bridgeit.mobi. You can add native support to any web app on Android, iOS or Windows Phone 8 very easily. It's a simple javascript api that allows you to access various native mobile features, such as camera, camcorder, contacts, etc. It has has a great web/native notification platform.