Menu
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
643
Ionic, Cordova and PhoneGap are hybrid mobile apps. Cordova is a framework which runs a JavaScript app in a WebView that has additional native extensions, which is the definition of a hybrid app. Ionic is based on Cordova and comes with Angular or ReactJS. It has set of standard controls that mimic native controls.
An app is considered to be in the foreground if any of the following is true: It has a visible activity, whether the activity is started or paused. It has a foreground service. Another foreground app is connected to the app, either by binding to one of its services or by making use of one of its content providers.
Overview. Use foreground transitions to prepare your app's UI to appear onscreen. An app's transition to the foreground is usually in response to a user action. For example, when the user taps the app's icon, the system launches the app and brings it to the foreground.
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!
171
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; }); } }); }If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With