/wp-content/uploads/2015/01/sap_logo_333927.png

Appendix L:  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.  See WebView for AndroidCrosswalk 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.  Note that on Android 5.x devices, Google released an update for the WebView component.  See Android System Webview Update.

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
Kapsel Plugins with Crosswalk
Notes

Standard Cordova WebView

  • Create the project.
    cordova -d create C:\Kapsel_Projects\WebViewDemo com.mycompany.webview WebViewDemo "{\"plugin_search_path\":\"C:/SAP/MobileSDK3/KapselSDK/plugins/\"}"
    cd C:\Kapsel_Projects\WebViewDemo
    cordova -d platform add android
  • Add the device plugin.
    cordova -d plugin add org.apache.cordova.device
    
  • Replace www\index.html with the contents of index.html.
  • Copy the files to the platform directory by running
    cordova -d prepare
  • Use the Android IDE to deploy and run the project on some different versions of Android.

    image1.PNGimage2.PNGimage3.PNG

    Here is the same app running in an Android 5.0.1 emulator.  Notice it has a much different score than the Android 4.1.2 emulator.
    image4.PNGimage4b.PNGimage4c.PNG

Cordova with Crosswalk

  • Download and unzip Cordova Android (ARM) 11.x and optionally x86 (crosswalk-cordova-11.40.277.7-arm.zip and crosswalk-cordova-11.40.277.7-x86.zip) to
    C:\Crosswalk

    Crosswalk 11.x supports Cordova 4.2 and uses Chromium 40.  See Release Notes

  • If needed download and install Python.  See also Set up the host for details of the Crosswalk dependencies.
  • Create the project.
    cd C:\Crosswalk\crosswalk-cordova-11.40.277.7-arm\bin
    create.bat C:\Kapsel_Projects\CrosswalkDemo com.mycompany.crosswalk CrosswalkDemo
    cd C:\Kapsel_Projects\CrosswalkDemo
    
  • To optionally add x86 support to the project copy the folder
    C:\Crosswalk\crosswalk-cordova-11.40.277.7-x86\framework\xwalk_core_library\libs\x86
    

    to

    C:\Kapsel_Projects\CrosswalkDemo\CordovaLib\xwalk_core_library\libs
    

    See also Multi-architecture packages.

  • Note Crosswalk uses plugmanto add plugins rather than the Cordova CLI so plugman should be installed if needed.
    npm install -g plugman

    Add the device plugin.

    plugman install --platform android --project . --plugin https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
    

    It is also possible to migrate a Cordova application and then continue to use the Cordova CLI.  See Migrate an application for further details.

  • Replace assets\www\index.html with the contents of index.html.
  • Run the project
    cd cordova
    run.bat
    
  • Use the Android IDE to deploy and run the project on some different versions of Android.

    image5.PNGimage6.PNGimage7.PNG

    Note the size of the app has is larger with Crosswalk.
    image9.PNGimage10.PNG

Kapsel Plugins with Crosswalk

The Kapsel Plugins can be added to a Crosswalk project.

  • Here is an example of adding the logon plugin.
    plugman install --platform android --project . --plugin c:\sap\MobileSDK3\KapselSDK\plugins\logon --searchpath C:\sap\MobileSDK3\KapselSDK\plugins
    

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" />
    
  • The Android logcat view appears empty in Eclipse.  The logcat can be viewed with the following commands.
    adb logcat
    or
    C:\adt-bundle-windows-x86_64-20140702\sdk\tools\monitor.bat
    
  • 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

  • When an alert dialog is shown in an emulator, the text of the alert is unreadable.
  • The cookie X-SMP-APPCID is not being sent automatically.  When making a read request, uncomment this line.
    //oHeaders['X-SMP-APPCID'] = applicationContext.applicationConnectionId;  //not needed as this will be sent by the logon plugin

Back to Getting Started With Kapsel

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. Ady D

    Thanks for the post. How can I load the endpoint url (it returns html content) in the webview?

    My url is registered in the SMP as application endpoint url. so can I access the html content in my webview?

    (0) 
    1. Daniel Van Leeuwen Post author

      Typically Cordova apps are prepackaged apps in that they contain all of the HTML/JavaScript, CSS, images etc in the app itself so that these files do not need to be loaded each time the application starts.  Another benefit of this is that the application can be opened when the device does not have network connectivity.

      It is possible however to load the content from a web server.  The following section may be of some help as it demonstrates the Kapsel online plugin which aids in this type of setup.

      http://scn.sap.com/docs/DOC-56009

      Regards,

      Dan van Leeuwen

      (0) 
        1. Daniel Van Leeuwen Post author

          Using Crosswalk is optional. 

          It is particularly useful if your app is going to be run on a range of Android devices as the browser component then will behave the same across all devices. 

          Regards,

          Dan van Leeuwen

          (0) 

Leave a Reply