Boost your Ionic app performance with Crosswalk
What’s more, device fragmentation is also a challenge with an overwhelming number of devices making it impossible to test your app on all of them and provide a uniform user experience through a single hybrid mobile application. Mainly on Android, WebViews are significantly different from device to device as well as the accompanied features and capabilities across the various webView versions.
This could lead to poor performance which may be related to the run speed of the app, styling issues or even bugs. A more specific example of poor performance could be the fact that the appearance of your app may vary amongst the different devices requiring specific css fixes for every android version. Also, there are cases when the keyboard does not always show when user selects a text input.
What is Crosswalk
Crosswalk is based on Google Chromium with Cordova API support and has better HTML5 feature support compared to the default webview available in Android(1). It provides a bundled Chrome webview and replaces the default Chrome webview of an Android device with a single version of Chrome browser helping your apps be more performant and predictable.
How to install/uninstall Crosswalk
Crosswalk can be used on every Ionic app with minimum effort during development time. There is no need for the development process to be adapted as adding Crosswalk project to your app is as simple as adding one more easy step. This step can be taken at any time during the development process even a little before building your app. Also, adding Crosswalk is not really a commitment since it can be removed without affecting the development process at all. Of course, it can be added again without any limitation or caution.
As Ionic builds on top of Cordova you can use either Cordova CLI or Ionic CLI to add Crosswalk in your project.
Using Cordova CLI
Using Cordova 4.0 and higher, first make sure that you have added the Android platform. Though, you could even add iOS platform. Crosswalk provides more benefits for Android but it can work perfectly with both platforms.
Then, you simply run Cordova’s command for adding Crosswalk plugin:
$ cordova plugin add cordova-plugin-crosswalk-webview
Using Ionic CLI
As Ionic relies heavily on the browser used to view the app, Crosswalk did not go unnoticed by the Ionic community. Therefore, Ionic CLI does provide an easy way to include Crosswalk in your project.
First, make sure your Ionic CLI is at least version 1.3.2. In case you need a more recent version run the command:
$ npm update -g ionic
You can find the Crosswalk version you want by viewing a list of the available browsers with the command:
$ ionic browser list
Thus, in case you want to install a specific version (e.g. 12.41.296.5) run the command:
$ ionic browser add email@example.com
Instead, if you hit the command:
$ ionic browser add crosswalk
the default Chromium browser will be installed which is Chromium 37 (Crosswalk 184.108.40.206 version).
Using Cordova CLI
To uninstall Crosswalk using Cordova, run the command:
$ cordova plugin rm cordova-plugin-crosswalk-webview
Using Ionic CLI
To uninstall Crosswalk using Ionic, run the command:
$ ionic browser rm crosswalk
or the command:
$ ionic browser revert android
Build your app
You can build as normal either by using Cordova’s command:
$ cordova build android
or using Ionic’s command:
$ ionic build android
Either way, there will be produced two different APKs for x86 and ARM architectures. This means that you will need an x86-compatible Crosswalk on x86 Android devices or an ARM-compatible Crosswalk on ARM Android devices.
A very useful note is that Ionic facilitates you in recognising what architecture type you need for a particular device since if you have a device connected and run:
$ ionic run android
Ionic will auto detect that architecture type and only build and run for that device.
Also, adding Crosswalk in your app will result in building two different APKs both of which you should submit to Google Play Store. Fortunately, Google Play Store has support for uploading multiple Crosswalk APKs.
Interesting in Ionic?
Enjoyed this Post?
The AppSeed team
/Stavros Kounis, skounis.github.io