How to Improve the speed of Ionic App using Crosswalk : Part 3

Web Apps are really useful when you don’t depend much on Native Features . The best feature is its portability and simplicity. But yes it does, have some drawbacks. The main issues being Lag and Size.

[wpi_designer_button text=’Download’ link=’https://github.com/arjunsk/ionic-firebase-shopping-cart’ style_id=’48’ icon=’github’ target=’_blank’]

You can really make out the difference in performance, when using native apps and hybrid apps. So what could be done to improve this.

Crosswalk :

Crosswalk provides Android developers a bundled Chrome webview for their projects, resulting in better performance. When i used it on Foodkart v0.3, it definitely paid off.

Crosswalk comes with a downside . Your Android app size will increase substantially.  (~15Mb) :0

The performance of crosswalk on android can be measured using the Octane Score.

So let me just walk you through the process of integrating it :

cordova plugin add cordova-plugin-crosswalk-webview

cordova clean

cordova build --release -- --minSdkVersion=21

cordova run android --device

When installing the new app, make sure to uninstall the older version of the app.

You can also see there detailed instructions here.

Login Register Tab Position :

In order to get the Login, Register tabs at the bottom of the page, we use the $ionicConfigProvider.

In the app.js add the following config.

angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives','firebase'])
 
 //Add this section
.config(function($ionicConfigProvider) {
    //$ionicConfigProvider.views.maxCache(5);
    $ionicConfigProvider.scrolling.jsScrolling(false);
    $ionicConfigProvider.tabs.position('bottom'); // other values: top
})

.run(function($ionicPlatform,$rootScope) {

    $rootScope.extras = false;

  $ionicPlatform.ready(function() {

Coming Soon:

1. Ionic Native Transition : https://github.com/shprink/ionic-native-transitions