Cordova events

To maximize the benefits of using Cordova, you should know about all the events available. They are called lifecycle events because they are a part of your application throughout its lifecycle. These events are available by default for all applications and it's up to the developer to use them to implement better design. Although there are several events, we will discuss the most important and commonly used events.

The deviceready event

The deviceready event is an important event of Cordova and you can't live without it in the Cordova world. This event is triggered when Cordova has fully loaded and the application is ready to be used. We should know when the application is ready to be used and so this event comes to our rescue. This event should be the gateway to all the application's functionality:

document.addEventListener("deviceready", function() {
    // Application starts here
});

To make the code easy to understand, we can define the function separately and bind it to the event, as shown here:

document.addEventListener("deviceready", onDeviceReady);

function onDeviceReady() {
        // Application starts here
}

The online event

The online event is triggered when the device goes online with Internet connectivity. With this event, you can determine whether your application is currently in the online state or not. If your application requires the user to be online, this can be helpful:

document.addEventListener("online", onOnline);

function onOnline() {
    console.log('device is now online');
}

The offline event

As you might have guessed, the offline event is the opposite of the online event. When the device goes offline, the application can capture it by using this event and necessary action can be taken by the developer:

document.addEventListener("offline", onOffline);

function onOffline() {
   console.log('device is now offline');
}

Note

There is no accurate way of finding whether the device is currently in the online or offline state. These events work on the connection state and it can sometimes be wrong. Note that even though the device is connected to 2G, 3G, or Wi-Fi, it doesn't mean the device is online.

The pause event

The pause event is triggered when the application is moved to the background, which is typically when the user switches to another application. You can use this event to notify users that they are being taken away from the application:

document.addEventListener("pause", onPause);

The resume event

When the application is again brought to the foreground, the resume event is triggered. This usually happens after the pause event as the app should be in the background before coming to the foreground of the mobile platform:

document.addEventListener("resume", onResume);

The backbutton event

The backbutton event is fired when the user presses the Back button on the mobile device. You can use this event to override the default actions that happen when the Back button is pressed:

document.addEventListener("backbutton", onBackbutton);

There are several other events that are supported by external plugins. There is an exhaustive list of such plugins, which can be used by adding the appropriate plugins to the project.

Note

Not all events are supported on all platforms. For example, the backbutton event is not supported on iOS devices. For the full list of supported platforms for each event, refer to the documentation at http://cordova.apache.org/docs/en/edge/cordova_events_events.md.html#Events.