boosting the performance of Ionic 2 apps with Crosswalk
Receive new Ionic 4 tutorials.
- What is Crosswalk?
- The downside of Crosswalk?
- How to use Crosswalk?
-
- Requirements
- Creating the project
1 - What is Crosswalk ?
If you have already developed or used hybrid apps i.e mobile apps built using modern web technologies instead of native mobile languages such as Java or Swift ,then you have for sure noticed the bad performance of these apps when running on Android devices even for small animations and also when scrolling lists of data .If you run the same html ,css and JavaScript on Android Chrome or any modern browser you'll notice that your app works much better .
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 ,
Cordova .
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" />
To
<uses-sdk android:minSdkVersion="20" android:targetSdkVersion="24" />
Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.
You can reach the author via Twitter:
Follow @ahmedbouchefraAbout the author
Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.
Online Courses (Affiliate)
If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)
Angular Crash Course for Busy Developers
Read our other tutorials
- Angular Tutorial
- Laravel 6 Tutorial
- React Tutorial
- React Hooks Tutorial
- React Native Tutorial
- Webpack Tutorial
- PHP Tutorial
- JavaScript Tutorial
- Django Tutorial
- Java Spring Tutorial
- Rails 6 Tutorial
- Ionic 4 Tutorial
- TypeScript Tutorial
- Bootstrap 4 Tutorial
- Electron Tutorial
- Cordova Tutorial
- HTML Tutorial
- GraphQL Tutorial
- CSS Grid Layout Tutorial
- PWA Tutorial
