Appendix K: Crosswalk
On Android, there are a range of OS versions that users are on. For details see Platform Versions. The WebView is the component of a Cordova app that renders the HTML page. The capabilities of this component vary depending on the version of Android the app is run on in Android versions prior to Android 5.0. As of Android 5.0, the WebView can be updated separate from the OS. See WebView for Android and Android System Webview Update.
Crosswalk with cordova-plugin-crosswalk-webview provides a replacement for the Android WebView that is consistent across Android devices. One other benefit is that an app running on an older Android device can be debugged. With the standard WebView, only devices running Android 4.4 or higher can be debugged.
The following sample attempts to illustrate the benefits of using Crosswalk. The following steps will create a project using the standard Android WebView and will demonstrate the result of it against a few test websites. A second project will be created using Crosswalk instead of the Android WebView.
Standard Cordova WebView
Cordova with Crosswalk
Notes
Standard Cordova WebView
- Create the project.
cordova create C:\Kapsel_Projects\WebViewDemo com.mycompany.webview WebViewDemo
cd C:\Kapsel_Projects\WebViewDemo
or
cordova create ~/Documents/Kapsel_Projects/WebViewDemo com.mycompany.webview WebViewDemo
cd ~/Documents/Kapsel_Projects/WebViewDemo
cordova platform add android
- Add the device plugin.
cordova plugin add cordova-plugin-device
- Replace www\index.html with the contents of index.html.
- Specify that the WebView can be navigated to additional URLs by adding the following to the config.xml file. See also Navigation Whitelist.
<allow-navigation href="http://html5test.com/*" />
<allow-navigation href="http://css3test.com/*" />
- Prepare, build and deploy the app with the following command.
Run the project on some different versions of Android.cordova run android
Here is the same app running on an Android 5.0.1 device. Notice it has a much different score than the Android 4.1.2 emulator.
Cordova with Crosswalk
- Create the project.
Add the android platform and the crosswalk and device plugins.cordova create C:\Kapsel_Projects\CrosswalkDemo com.mycompany.crosswalk CrosswalkDemo
cd C:\Kapsel_Projects\CrosswalkDemo
or
cordova create ~/Documents/Kapsel_Projects/CrosswalkDemo com.mycompany.crosswalk CrosswalkDemo
cd ~/Documents/Kapsel_Projects/CrosswalkDemo
cordova platform add android
cordova plugin add cordova-plugin-device
cordova plugin add cordova-plugin-crosswalk-webview
- Replace www\index.html with the contents of index.html.
- Specify that the WebView can be navigated to additional URLs by adding the following to the config.xml file. See also Navigation Whitelist.
<allow-navigation href="http://html5test.com/*" />
<allow-navigation href="http://css3test.com/*" />
- Prepare, build and deploy the app with the following command.
Run the project on some different versions of Android.cordova run android
Note the size of the app has is larger with Crosswalk.
Notes
When trying Crosswalk, I noticed the following things.
- An HTML page such as those used in this guide display very small if the following metatag is not present.
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
- When run in an Android emulator, the emulator must have the option checked
If this is not checked, the following fatal error prevents the application from starting.Use Host GPU
See also, http://stackoverflow.com/questions/29235649/cannot-get-crosswalk-helloworld-example-to-work[FATAL:gl_surface_android.cc(58)] Check failed: kGLImplementationNone != GetGLImplementation() (0 vs. 0)
- SAP Managed Tags:
