A blog by Devendra Tewari
This post discusses different options to embed the web browser into an app, on different platforms.
Most applications can benefit from using HTML for the User Interface (UI). HTML has evolved to a point where it is easier to make better UI using it, than using native UI toolkits. The UI is also much more portable, if you need to support different form factors and platforms.
Portability is achieved using JavaScript and CSS, but you have to take browser-specific nuances into account. Several open source JavaScript UI libraries have evolved over the past years, such as Bootstrap, Dojo Toolkit, Ext JS (GPL), and JQuery UI, that ease the pain of cross-browser UI development. There is also a plethora of open source and commercial cross-platform toolkits that leverage HTML5 such as Appcelerator Titanium, PhoneGap, Rhodes, and Sencha Touch (GPL).
The limitations of such an approach is performance, but even that is slowly ceasing to be a problem as browsers gain from hardware acceleration. Another drawback is lack of proper tools for editing, debugging and profiling. Fortunately, browsers such as Chrome and FireFox now have good built-in tools or extensions that can be of help. IDE support is also constantly evolving with features such as code completion, JavaScript debugging, refactoring, and static code analysis.
On the desktop, if you are a .NET programmer you can use the WebBrowser class. The benefit of that class is its ease of use, but the drawback is that the browser is essentially Internet Explorer (IE). IE is not known to have stellar support for evolving web standards. One particular problem I faced was the browser control not applying print media CSS correctly.
There is further effort from the open source community to provide browser controls based on Chromium that may have better standards support.
The advantage of using the WebBrowser class is that you can use its ObjectForScripting property to set an object that can be accessed from JavaScript using the window.external object. You can encapsulate this proprietary mechanism behind a JavaScript class/interface for better portability, and switch to another implementation on a different platform.
The Java platform has the javax.swing.JEditorPane component that can be used to show and edit HTML, but it is not a viable alternative for modern web user interface development. A more modern cross-platform alternative may be the javafx.scene.web.WebEngine component.
Some may find Eclipse SWT’s org.eclipse.swt.browser.Browser to be a better alternative as it embeds the default browser of the OS e.g. Internet Explorer on Windows.
Embedding the browser in Android and iOS is a breeze. If you are developing an Android app in Java, the WebView class in Android can be used to embed the browser. If you are a .NET programmer and have adopted Mono for Android, you can use a similar class from their .NET wrapper API for Android. It is possible for your JavaScript code to call Java or .NET code by injecting an object using the addJavascriptInterface method of WebView. Form submissions can also be intercepted by creating and setting a WebViewClient subclass.
The Android browser is not known to have good performance, especially for JavaScript. The plethora of Android devices with low-end specs also does not contribute to good performance from the browser.
You can embed the browser in an iOS app using the UIWebView class. JavaScript code can be called using the stringByEvaluatingJavaScriptFromString method, but JavaScript cannot call Objective C code. You can always embed a web server in your app, that the UI can call.