If you want to know when the user leaves the application , you can use a simple event listener that reacts to the pause or resume events with Javascript:
document.addEventListener("resume", function(){
// Do something on resume
}, false);
document.addEventListener("pause", function(){
// Do something on pause
}, false);If the code that you're using looks like the previous example and it doesn't works (the callback functions are never triggered), then you need to know that you're doing something wrong. Yes, the error is not in cordova but in the way you're working, you're probably somehow passing by a crucial step which prevents the event from being executed.
In this article we are going to show the 3 steps that you're passing by and are probably causing your app to not run the events of pause and resume.
1. Add listener after the device ready event
Be sure that you're attaching the pause and resume event after or during the execution of the deviceready event. This event is essential to any application. It signals that Cordova's device APIs have loaded and are ready to access. Cordova consists of two code bases: native and JavaScript. While the native code loads, a custom loading image displays. However, JavaScript only loads once the DOM loads. This means the web app may potentially call a Cordova JavaScript function before the corresponding native code becomes available.
// Add the deviceready event
document.addEventListener("deviceready", function(){
// attach events
document.addEventListener("resume", onResume, false);
document.addEventListener("pause", onPause, false);
}, false);
function onPause() {
alert('paused');
}
function onResume() {
alert('resumed');
}If you run your app, and the function still being ignored, then proceed to check the step 2.
2. Add the KeepRunning preference to your config.xml
Be sure that your config.xml file has the KeepRunning preference set to true. This preference determines whether the application stays running in the background even after a pause event fires. Setting this to false does not kill the app after a pause event, but simply halts execution of code within the cordova webview while the app is in the background.
Add the following tag inside the <widget> tag in the config.xml file of your plugin:
<preference name="KeepRunning" value="true"/>If you build and run your app, and the callbacks still being ignored, proceed with the step 3.
3. Verify that cordova is being loaded
As last step and this is probably the reason that the listeners aren't being triggered. Be sure that you're including the cordova script in your main html document. Some developers comment the cordova script because they make tests directly in the browser, sometimes this can leads to this problem because they forget to include the script again.
Verify your document and in case that indeed the script isn't being loaded, use the following script tag to add it:
<script type="text/javascript" src="cordova.js"></script>That should solve the problem and your callbacks will be triggered without problems. Remember that this file is added when you add a new platform (e.g cordova platform add android and then cordova build android) the file (cordova.js) is automatically created in the assets/www folder.
Happy coding !
