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" />
- Django 2 Ajax CRUD with Python 3.7 and jQuery
- PHP 7 Tutorial with MySQL: CRUD REST API & JWT
- Django 2 CRUD Tutorial: Generic Class-Based Views
- Angular 6|7 Tutorial — CRUD & Python REST API
- Python 3.7 Matplotlib — Data Visualization Tutorial
- Python 3.7 Data Classes — Tutorial by Example
- Ember 3 Tutorial: Building your First Application
- Django Authentication — Login, Logout and Password Change/Reset
- Ubuntu 18.04: Install Python 3.7 | 3.6, pip and venv
- Vertical Center in Bootstrap 4
- Angular 6|7 ngIf by Example
- Angular 6|7 ngFor Example
- JWT Auth with Vue, Vuex and Vue Router — Axios & Guards
- Node Express JWT Authentication — jsonwebtoken and bcryptjs
- Python Django JWT — djangorestframework-jwt Example
- Adonis Tutorial — CRUD REST API and JWT Authentication
- Adonis Tutorial — JWT Authentication
- Installing PostgreSQL on Ubuntu 18.04
- PostgreSQL & PostGIS Tutorial — Creating a Spatial Database
- Installing GDAL 2+ on Windows 7 & Windows 10
- Swift Vapor Tutorial — Creating a REST API
- es6 template strings or literals
- Django Form Example—Bootstrap 4 UI via django-crispy-forms
- Django TemplateView GET|POST Example — URLs, as_view and get_context_data
- CSS Grid Layout Tutorial—Styling a Django Template
- Vuex Tutorial
- Redux Tutorial
- Angular 7|6 with PHP and MySQL Example & Tutorial
- Ethereum Dapps with Truffle,Ganache, Metamask, OppenZippelin and React
- Angular 7|6 In-Memory Web API Tutorial | CRUD Example
- Using Vue.js in WordPress
- Learn Sails.js Tutorial 
- Using Vue.js in PHP Tutorial
- Angular 7|6 Material Data-Table Tutorial & Example