Appendix C: Crosswalk

Dan_vL · ‎2017 Jan 28

Previous Home Next

Note, Crosswalk is no longer being maintained by Intel. Please see https://crosswalk-project.org/blog/crosswalk-final-release.html.

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 versions prior to Android 5.0. As of Android 5.0, the WebView can be updated separate from the OS. See WebView for Android

Crosswalk can be helpful even if you are only deploying to Android 5.x devices and higher as the WebView used to render your application is included with your application. The following article mentions some reported problems for apps that used the system WebView after it was updated.
Android System Webview Update.
The version of the Android System WebView can be seen under Settings > Apps > Menu > Show System > Android System WebView.

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

<html>

    <head>

        <title>WebView Demo</title>

        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>

        <script>

            document.addEventListener("deviceready", init, false);

            var calendar = null;

            

            function init() {

                log("Cordova version: " + device.cordova);

                log("Device version: " + device.version);

                log("User agent: " + navigator.userAgent);

            }

        

            function log(line) {

                var results = document.getElementById("log_lines");

                results.innerHTML+= "<br>" + line;

            }

        </script>

    </head>

    <body>

        <h1>WebView Demo</h1>

        <button onclick="window.open('http://html5test.com/', '_self')">HTML5 Test</button>

        <button onclick="window.open('http://css3test.com/', '_self')">CSS3 Test</button>

        <div id="log_lines"></div>

    </body>

</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.
```
cordova run android
```
Run the project on some different versions of Android.

Here is the same app running on an Android 6.0.0 emulator. Notice it has a much different score than the Android 4.4 emulator.

Cordova with Crosswalk

Create the project.

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

Add the android platform and the crosswalk and device plugins.

cordova platform add android

cordova plugin add cordova-plugin-device

cordova plugin add cordova-plugin-crosswalk-webview

Replace www\index.html with the contents from the previous project. Modify the title of the page to be Crosswalk Demo instead of WebView Demo.

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.
```
cordova run android
```
Run the project on some different versions of Android.

Note the size of the app has is larger with Crosswalk.

Notes

When run in an Android emulator, the emulator must have the option checked
```
Use Host GPU
```
If this is not checked, the following fatal error prevents the application from starting.
```
[FATAL:gl_surface_android.cc(58)] Check failed: kGLImplementationNone != GetGLImplementation() (0 vs. 0)
```
See also, http://stackoverflow.com/questions/29235649/cannot-get-crosswalk-helloworld-example-to-work

Previous Home Next