Use Crosswalk With Ionic Framework Android Apps

It is no secret, that many Android devices handle web pages poorly. Unless you have Android 4.4, your device is using whatever proprietary browser your manufacturer has decided to give you. The lucky ones who are running Android 4.4 tend to have higher end Nexus or Motorola devices.

This isn’t the end of the road for your hybrid development journeys. Using Crosswalk in your application replaces the default web runtime with the runtime 4.4 users are already enjoying. The best part is that this will work with Apache Cordova, Phonegap, and Ionic Framework. For the sake of this article I’m going to aim it towards Cordova and Ionic Framework, but Phonegap should be pretty similar.

There are some things you need to note before going into this tutorial:

• As of writing this article, Crosswalk does not work with Apache Cordova higher than 3.5. We are on 3.6.3 as of right now. This won’t stop us from using Crosswalk though.
• The Crosswalk installation process is not automated. It isn’t a long or difficult process, but it is still something that must be done manually.
• Your final APK file will be large. Around 40MB large.

If you are alright with all of the above, then continue these steps for creating an Ionic Framework Android app with maximum performance.

Let’s go ahead and start by downloading the stable Cordova Crosswalk packages. If you plan on supporting both x86 and ARM architectures, then download both. If you choose only one, you’ll get a smaller APK binary, but your app will not work with every device out there.

Now we can create our blank Ionic Framework project with Android support:

ionic start IonicProject blank
cd IonicProject
cordova platform add android@3.5

You’ll notice that the platform I’m adding is android@3.5 because like I said earlier, the current Crosswalk build doesn’t work with the latest Apache Cordova. I’m sure this will be resolved in the future, but for now we need to stick with 3.5.

Navigate to IonicProject/platforms/android/CordovaLib and wipe out all files and directories in there. We are going to replace the content of CordovaLib with all the Crosswalk files.

Extract both the x86 and ARM Crosswalk archives and do the following:

cp -a <path_to_unpacked_x86_bundle>/framework/* platforms/android/CordovaLib/

If you prefer not to copy with the command prompt, just copy all files in the framework directory to your CordovaLib directory. Note, that we only did this for the x86 architecture directory.

If we plan to add both architectures, we only need to add one directory from the second architecture. Run the following from the command prompt or do it manually:

cp -a <path_to_unpacked_arm_bundle>/framework/xwalk_core_library/libs/armeabi-v7a platforms/android/CordovaLib/xwalk_core_library/libs/

We are just copying the armeabi-v7a directory to sit side-by-side with the x86 directory.

There is one more file we need to copy for everything to work. You need to copy one of the VERSION files from the Cordova Crosswalk root directory into your IonicProject/platforms/android directory.

Once this is done, using your terminal, navigate to IonicProject/platforms/android/CordovaLib/ and run the following commands:

android update project --subprojects --path . --target "android-19"
ant debug

Now for the home stretch, we are almost done.

Your project needs to sport two permissions in order to use Crosswalk. There is a good probability that your application is already using them, but if it isn’t, add the following two lines to your AndroidManifest.xml file found in your IonicProject/platforms/android directory:

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Navigate to the root of your Ionic project and run a standard Android build command:

ionic build android

If everything went as it should, you should find a ~40MB IonicProject-debug.apk file in your build directory. It will use Chromium as the web view, something not found before Android 4.4. Most, if not all of your performance issues should be eliminated with Crosswalk.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.