Boost your Ionic app performance with Crosswalk

Hybrid mobile applications are essentially web applications rendered in the native browser. The native browser for iOS applications is UIWebView whereas for android applications is WebView. Especially on Android, WebView is a system component powered by Chrome that allows apps to display web content. Hybrid applications are developed using HTML, CSS and Javascript and, by using platforms such as Cordova, they can be wrapped in a native application. As a result, hybrid applications depend on the native browser they are rendered in.

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.

Install Crosswalk

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 crosswalk@12.41.296.5

Instead, if you hit the command:

$ ionic browser add crosswalk

the default Chromium browser will be installed which is Chromium 37 (Crosswalk 8.37.189.12 version).

Uninstall Crosswalk

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.

Downsides

Although in older Android Devices (4.0–4.3), you’ll see about a 10x improvement of both HTML/CSS rendering and JavaScript performance and CSS correctness, an app built with Crosswalk will increase significantly in size. The runtime itself consumes about 15–20 MB in your APK which means that your app will be 15–20 MB larger. However, bear in mind that if you choose to install Crosswalk lite, it is approximately half the size of the regular Crosswalk.

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?

Check out our Ionic and Ionic 2 Starter Kits and Application Templates.

Enjoyed this Post?

Follow us on Twitter, or Google+ or even check our CodeCanyon Profile. You may also take a look at our website www.appseed.io

References

Intel for Crosswalk, Ionic’s blog post for Crosswalk, Crosswalk project lite wiki, Submitting multiple Crosswalk APKs to the Google Play Store, Dave Wilson for the cover photo

Happy coding,
The AppSeed team

/Stavros Kounis, skounis.github.io