Is there any way to check whether the app is running in foreground or background in ionic/cordova/phonegap, I need to use it on android and ios, thanks a lot
Use the two Events "Pause" and "Resume". You will find all Events here in the Apache Cordova Events Documentation.
Event - Pause:
Event - Resume
You can add an Eventlistener for that into your code. For those two Events that would be:
Pause - Quick Example
document.addEventListener("pause", onPause, false);
function onPause() {
// Handle the pause event
}
Or Full Example like this:
<!DOCTYPE html>
<html>
<head>
<title>Pause Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
document.addEventListener("pause", onPause, false);
}
// Handle the pause event
//
function onPause() {
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
Resume - Quick Example
document.addEventListener("resume", onResume, false);
function onResume() {
// Handle the resume event
}
Or Full Example like this
<!DOCTYPE html>
<html>
<head>
<title>Resume Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
document.addEventListener("resume", onResume, false);
}
// Handle the resume event
//
function onResume() {
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
Try that out and let me know, if you need further help!
For Ionic 2 and Ionic 3 the solution is:
import { Platform } from 'ionic-angular';
@Component({
template: `OK`
})
constructor(public platform: Platform) {
platform.ready().then(() => {
if (platform.is('cordova')){
//Subscribe on pause i.e. background
this.platform.pause.subscribe(() => {
//Hello pause
});
//Subscribe on resume i.e. foreground
this.platform.resume.subscribe(() => {
window['paused'] = 0;
});
}
});
}A small service for Ionic based on Sithys answer:
factory('BackgroundCheck', function($ionicPlatform){
var service = {};
var inBackground = false;
$ionicPlatform.ready(function() {
document.addEventListener("resume", function(){inBackground = false;}, false);
document.addEventListener("pause", function(){inBackground = true;}, false);
});
service.isActive = function(){
return inBackground == false;
}
return service;
})