boosting the performance of Ionic 2 apps with Crosswalk
- What is Crosswalk?
- The downside of Crosswalk?
- How to use Crosswalk?
- Creating the project
1 - What is Crosswalk ?
So why there is such difference in performance when running your app on Android Chrome vs the embedded Cordova brower ?
In a perfect world , the web browser used by Cordova should be the same one installed on your Android device but unfortunately that's not the case .In fact until Android 4.4 the old internal webkit based browser is used by Cordova to render your apps so the older your Android device is ,the older the browser which results in bad performance .
Even if the the newer Android versions have newer browsers you can not be sure of the version your app user is using and if your app will run without performance issues .
Because of all these reasons ,some Intel developers have decided to create a nice tool that allows you to use a custom webview instead of the one used by Cordova (which is the default system webview ) which will give your app the same environment across all devices . The tool is the famous project Crosswalk .
2 - The downside of Crosswalk
The Crosswalk project has ons downside which is the size ,your app size will be increased by around 15 MB and even around 50 MB when installed so it may not be the prefect solution for everyone's needs .
3 - How to use Crosswalk ?
Now ,we are going to see how you can use Crosswalk with Ionic 2 framework so you can boost your app performance .
3.1 1. Requirements
So first of all you need to have all the required tools installed which includes
The Android SDK ,
Ionic 2 ,
Now lets create our project
3.2 2. Creating the project
Lets start by scaffolding a new Ionic 2 project .
Open your terminal or command prompt and enter
ionic start ionic2-crosswalk-example blank --v2 cd ionic2-crosswalk-example/
Now lets add the target platform we need to support .Crosswalk can be used with Android or iOS but it's more useful in case of Android .
ionic platform add android
Now it is time to add Crosswalk which can be done just like any other normal Cordova plugin
ionic plugin add cordova-plugin-crosswalk-webview
Crosswalk only supports only versions higher than 4.4 .In Ionic 2 apps the minimal SDK is 4.0 so we need to set the minSdkVersion to 20 .To do that just open the platforms / android / AndroidManifest.xml file and change the following line
<uses-sdk android:minSdkVersion="16" android:targetSdkVersion="24" />
<uses-sdk android:minSdkVersion="20" android:targetSdkVersion="24" />
RELATED TUTORIALSIonic 4 Forms Tutorial: Login & Register UI Example with Theming
Ionic 4 JWT Authentication Tutorial: Using Angular HttpClient with Node & Express.js Server
Ionic 4 Tutorial: Your First Ionic/Angular v4 Application
Ionic 3 Grid System Tutorial
Learn Ionic 3: Easy Steps Tutorial
Ionic 3 Routing and Navigation Tutorial & Examples
Ionic 2/3 - Create, Generate and Add Pages