The default Cordova InAppBrowser (WebView in iOS terminology) is pretty ugly (different kinds of ugly on iOS and Android) and, besides, we needed to add a Jibebuy toolbar icon so users can save their favorite houses, cars, etc., in Jibebuy. So I decided to figure out how to customize the Cordova InAppBrowser. This required a significant dive into Objective C and Java native code.
My favorite InAppBrowser is the one included with Twitter. It is small, simple and allows you to change orientation (take that Facebook!). The Cordova InAppBrowser is implemented as a plugin. Like many plugins that offer native functionality to Cordova apps, it has different implementations for various platforms. Not all the platforms are supported, but typically, iOS and Android. The Cordova InAppBrowser plugin supports both. As with other native plugins I’ve used the customization capabilities are limited and different on different platforms. I decided that the “quick and dirty” approach was to copy and modify the plugin source code. Fortunately, I had already setup a system to apply patches to Cordova plugins, so, though changing the code is a hack, at least it is repeatable and easy to use.
As you can see in the images above, I was able to add the Jibebuy icon and popup to the browser’s toolbar. The popup is another WebView that runs the same HTML, CSS and JavaScript as our Chrome Browser Extension!
One quirk about my design is that, because the address bar is editable, Jibebuy allows “unrestricted web access” and is tagged with “You must be at least 17 years old to download this app” on the iOS App Store. Other apps like Facebook and Twitter avoid this designation by only allowing you to open URLs input into other parts of their app – the URL in their InAppBrowser’s toolbar is read only. Personally, I think this is a silly distinction, but Apple is the gatekeeper for their walled garden! If we get questions or complaints, I can change the control to be read only (as was the default for the stock Cordova InAppBrowser).
Great article. Do you have your patch open source, or at least a tutorial to reproduce your work?
Basically, I customized the InAppBrowser source code. I can answer specific questions.
I just discovered this plugin : https://github.com/Wizcorp/phonegap-plugin-wizViewManager/ . Instead of customizing InAppBrowser (and possibly open-source it), you can have 2 WebView’s at the same time, so 1 for Cordova hybrid HTML (in your case, Jibebuy toolbar), and one for external HTTP page.
I had not seen wizViewManager before. It seems like a good idea and could potentially replace the code I wrote to create the popup.
Without taking a deeper look, I’m not sure if wizViewManager could could replace a customized InAppBrowser, however. Getting the toolbar + browser window layout perfect on all devices and orientations was difficult enough in native code. And InAppBrowser is more than just a WebView.