What's the difference between Cordova and Ionic ready state

I’m writing this article in a hope I can better clarify this topic, especially because some people still don’t understand the difference. I will also show you how to delay AngularJS/Ionic bootstrapping before Cordova device ready can trigger.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!

[spoiler title=” Click here if you want to see other tutorials, or articles about the Ionic framework (themes, templates, plugins, tutorials)”]

Tutorials

Other Resources (themes, templates, plugins, Cordova plugins, starter apps)

Cordova Plugin Tutorials

[/spoiler]

Introduction

Before we proceed any further let us discuss the nature of Cordova and Ionic ready event.

Cordova deviceready is an event that fires when Cordova is fully loaded. This is also the most important event for any Cordova based application. At this point, because everything is fully loaded, we can trigger various API related plugins, like a camera or GPS access.

Without it, our application may potentially call a Cordova function before the corresponding native code is available.

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    // It's safe to execute device APIs
}

On the other hand, Ionic ready state serves the same purpose but in a much broader way.

Many of us, including me, are accustomed to development on our desktop machines. I will always start developing my application inside a classic desktop web browser. No point in using emulators when I can test my initial page design inside a much faster desktop environment.

Unfortunately, if not properly handled, I will not be able to use Cordova onDeviceReady event in this case. Remember we’re working with a desktop browser. This is one of the reasons why the Ionic framework uses a little bit different Ionic ready state event.

When executed on a touch-based device, Ionic ready state will trigger once Cordova is ready. Primarily, it will trigger a moment after Cordova deviceready event. On the other hand, if we execute Ionic ready state inside a desktop environment it will execute after window.onload event. This way we can easily shift between different development environments/stages without needing to change our underlying code.

Additionally, if Cordova onDeviceReady status is already set, then the Ionic ready state callback will immediately fire off.

angular.module('myModule', ['ionic'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // It's safe to execute device APIs
  });
});

The problem

Now comes the funny part. What if we need to access Cordova plugin features during the initialization of our first view, how can we handle that easily?

In some way, we’re racing against the time, no matter what, Angular is going to display your initial view, with or without ionicPlatform ready state.

Solution 1

The first solution is an old jQuery Mobile trick. We can initialize a dummy view before we load the right one. This way we can be sure Ionic ready state is active before we initialize any Cordova API.

This could be our dummy view:

.state('home', {
	url:"/dummy",
	templateUrl:'dummy.html',
	controller:'DummyCtrl'
})

On the Ionic ready state, we change the page to our real primary view:

app.run(function($ionicPlatform,$location,$rootScope) {
  $ionicPlatform.ready(function() {
	  $location.path('/tab/about');
	  $rootScope.$apply();
  });
});

Working example:

Demo

Solution 2

I prefer this solution because it’s less hacky.

Instead of using dummy pages we will delay app initialization until Ionic ready state is set.

For this solution to work, remove the ng-app attribute from the html/body tag then use this code example:

document.addEventListener('deviceready', function() { 
    angular.bootstrap(document, ['myApp']);
}, false);
  
var app = angular.module('myApp', ['ionic']);
// Here comes the rest of your AngularJS/Ionic code....

As you can see, we’re using Cordova deviceready event to trigger our Ionic application bootstrapping. We can’t use Ionic ready state because our application is not initialized in the first place.

If you want to use this solution in your desktop environment don’t forget to include cordova.js.

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

What’s the difference between Cordova and Ionic ready state

Table of Contents