Book Image

Hybrid Mobile Development with Ionic

By : Gaurav Saini
Book Image

Hybrid Mobile Development with Ionic

By: Gaurav Saini

Overview of this book

Ionic is an open source, front-end framework that allows you to develop hybrid mobile apps without any native-language hassle for each platform. It offers a library of mobile-optimized HTML, CSS, and JS components for building highly interactive mobile apps. This book will help you to develop a complete, professional and quality mobile application with Ionic Framework. You will start the journey by learning to configure, customize, and migrate Ionic 1x to 3x. Then, you will move on to Ionic 3 components and see how you can customize them according to your applications. You will also implement various native plugins and integrate them with Ionic and Ionic Cloud services to use them optimally in your application. By this time, you will be able to create a full-fledged e-commerce application. Next, you will master authorization, authentication, and security techniques in Ionic 3 to ensure that your application and data are secure. Further, you will integrate the backend services such as Firebase and the Cordova iBeacon plugin in your application. Lastly, you will be looking into Progressive Web Applications and its support with Ionic, with a demonstration of an offline-first application. By the end of the book, you will not only have built a professional, hybrid mobile application, but will also have ensured that your app is secure and performance driven.
Table of Contents (9 chapters)

Adding Crosswalk browser

Older Android versions (4.0 - 4.3) that stock web view have low performance and lack many of the latest HTML5, CSS3, and JS features. You will see a lot of difference when you deploy your application on the latest Android 7.0 and in older versions. Here is when Crosswalk comes into the frame; Crosswalk gives the latest web view aligned with Chrome on Android. This increases the performance of both HTML/CSS rendering and JavaScript performance ten times. It reduces fluctuations and fragmentation among devices. Another set of features that Crosswalk brings is access to webGL, WebRTC, CSS3 features, and various APIs. It provides improved performance and debugging applications become really easy. The Cordova Crosswalk plugin helps you easily add the Crosswalk browser in your application:

$ ionic cordova:plugin add cordova-plugin-crosswalk- 

Currently, supported browsers are Crosswalk and Crosswalk-lite for Android. You can use Crosswalk lite mode by passing a variable flag:

 $ ionic cordova:plugin add cordova-plugin-crosswalk-
webview --variable XWALK_MODE="lite"

Please take care that running these step will replace the default browser. Although you can anytime revert back by uninstalling the plugin and build again. The following are some advantages of using Crosswalk:

  • Gain in performance
  • Reduced fluctuations and fragmentation
  • Ease of debugging
  • HTML5 and CSS3 features
  • Access to webRTC, webGL, web Sockets, and so on

Another thing to note is that after you have added the Crosswalk browser you will see the size of your APK increase by around 15-20 MB and increased of size on disk when installed around 50 MB.