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:

You’ll notice that the platform I’m adding is [email protected] 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.

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:

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.

Nic Raboy

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