Boost your Cordova app performance on Android with Crosswalk
In this article, I will show you how much Crosswalk boosts your Cordova app running on Android and also how to install it.
In january, the Ionic team announced their official support of Crosswalk. That's terrific news, because Crosswalk provides Android developers a bundled Chrome webview for their projects, resulting in better performance and predictability!
In fact, if you installed your app architecture with the Ionic CLI, Crosswalk should already be installed by default. This tutorial is meant for people with old Ionic architectures or Cordova apps.
The problem with the Android Chrome webview.
In a word, the Javascript engine of Android versions anterior to 4.4 has really poor performance. It means that your Ionic app will just run very slowly on these Android versions. And on top of that, there were a lot of inconsistencies between devices when running an app. Developers had to do some specific css fixes for every Android version and it was a real pain in the neck.
How Crosswalk solves these problems?
Crosswalk is a bundled Chrome webview that replaces the default Chrome webview of your Android device. So every device running the app have the exact same webview. No more performance problems and no more css fixes for older Chrome versions! It actually also fixed a really annoying bug in my Ionic app where the keyboard was not always showing when I selected a text input.
How much Crosswalk boosts my Cordova app performances?
Crosswalk comes with a downside (nothing is perfect right?): your Android app size will see a substantial size increase (~15Mo)... At this moment you're probably screaming in front of your screen, calling me names you wouldn't dare repeat in public. That's OK, I did the same when I discovered this. 15Mo for an app that's supposed to be downloaded from a cellular network is a huge turn off. But let me explain you in images why it's worth the size.
I have created two simple ionic apps, one not using the default Chrome webview, the other one using the Crosswalk webview. I embedded in this apps the well know Octane test from the Google team to really measure the performance gap. The results were breathtaking:
Octane 2.0 test on Android 4.3 without Crosswalk
Octane 2.0 test on Android 4.3 with Crosswalk
I really think this performance gap and the fact that you can be sure that your app will render perfectly on every Android version really worth the size increase.
How to install Crosswalk with your Cordova app.
Well that's where the Ionic magic happens. The awesome Ionic team made it really simple to install Crosswalk. I mean, even my grandma could do it... Well, if she had a computer. So here it is:
ionic browser add crosswalk
Damn, that was easy!
Of course, if you don't have the Ionic CLI installed (yeah, me too, I used the Cordova CLI for a long time before discovering the Ionic CLI), you would need to install it first:
npm install ionic -g
That's it! Your Android app will now run in the awesome Crosswalk webview instead of the default Chrome webview. No more hassle, no more css fix nightmares!
Don't worry if your app is just a Cordova app and not an Ionic one. The Ionic CLI is just some cool functions wrapped up with the default Cordova CLI.
Note1: If your Cordova version and Android SDK versions are too old, when you'll try to build your android app, Cordova will ask you to update them in the process. So don't panic if it happens, it's normal, just do the update process and go grab several cups of coffee, as the Android SDK is pretty damn big!
Note2: As Crosswalk uses the newest Cordova, you'll see a pretty big change in your Android platform folder. That's because The Cordova Android team has decided to move away from Ant towards more of a Gradle-based build scenario. So you're going to look for the location of you generated APKs the first time around. Let me save you time: /platforms/android/build/output/apk. The other thing that you will discover, is that there's now two different APKs for the different architectures Android can run on, x86 and ARM. Just use the right one for the device you're testing on. If you use a virtual machine, you'll need to install the x86 version in any case.
Conclusion
Hybrid apps still always come with concerns about performance compared to native apps. This may be changing. Crosswalk is a great step in this direction.
I hope this article encouraged you to use Crosswalk to run your Ionic apps and let your user have a better experience on older Android devices. If you have any questions or comments, I would be happy to answer in the comments section below. If your heart stopped when you discovered the size increase of your apk, you should definitely call 911...
May Code be with you.
