如何在 ionic/cordova/phonegap 中检查应用程序运行在前台或后台

Question

有什么方法可以检查应用程序是运行在 ionic/cordova/phonegap 的前台还是后台，我需要在 android 和 ios 上使用它，谢谢很多

Answer 1

使用两个事件“Pause”和“Resume”。您可以在 Apache Cordova Events Documentation.

中找到所有活动

事件 - 暂停：

当本机平台将应用程序置于后台时，通常会在用户切换到其他应用程序时触发暂停事件。

事件 - 恢复

resume事件在原生平台拉取应用时触发从后台出来。

您可以在您的代码中为此添加一个事件监听器。对于这两个事件：

暂停 - 快速示例

document.addEventListener("pause", onPause, false);

function onPause() {
    // Handle the pause event
}

或完整示例像这样：

<!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>

简历 - 快速示例

document.addEventListener("resume", onResume, false);

function onResume() {
    // Handle the resume event
}

或完整示例像这样

<!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>

尝试一下，如果您需要进一步的帮助，请告诉我！

Answer 2

基于 Sithys 答案的 Ionic 小服务：

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;    
})

Answer 3

使用 angular 抽象 ionic.Platform

//The pause event fires when the native platform puts the application
// into the background, typically when the user switches to a different 
// application.
$ionicPlatform.on('pause', function () {
    // Handle event on pause
});
// The resume event fires when the native platform
//  pulls the application out from the background.
$ionicPlatform.on('resume', function () {
    // Handle event on resume
});

参考ionic v1 documentation for $ionicPlatform

Answer 4

"Is there any way to check whether the app is running in foreground or background?"

是的。

1) 当应用程序变为非活动状态（在后台运行）时，Cordova 会触发 pause 事件，而当应用程序再次处于活动状态（带到前台）时，Cordova 会触发 resume 事件.

2) 从这些事件中，可以使用变量将状态存储为 "foreground" 或 "background"。

document.addEventListener("deviceReady", function readyCallback() {


    var isAppInForeground = true;


    document.addEventListener("pause", function pauseCallback() {
      isAppInForeground = false;
    }, false);

    document.addEventListener("resume", function resumeCallback() {
      isAppInForeground = true;
    }, false);

});

Answer 5

对于 Ionic 2 和 Ionic 3，解决方案是：

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;
        });
       }
    });
}

Answer 6

您还可以使用：

import { Platform, Config, MenuController } from '@ionic/angular';

...

constructor( private platform: Platform)

...

this.platform.resume.subscribe(() => {
      // Handle event on resume
    });


this.platform.pause.subscribe(() => {
          // Handle event on pause
        });

Answer 7

17/09/2019

这对我来说在 Ionic 4 应用程序上运行良好。在 Android 和 iOS 设备上进行了测试。

app.componet.ts

async initializeApp() {
    await this.platform.ready();

    if (this.platform.is('cordova')) {
        this.setPlatformListener();
   }
 }


  setPlatformListener() {
    this.platform.pause.subscribe(() => {// background
      console.log('In Background');
    });

    this.platform.resume.subscribe(() => {// foreground
      console.log('In Foreground');
    });
  }

Answer 8

initializeApp() {
  //Subscribe on pause i.e. background or lock phone
       this.platform.pause.subscribe(() => {
          console.log('pause')
      });
  //Subscribe on pause i.e. background or unlock phone
      this.platform.resume.subscribe(() => {
          console.log('resume');
     });
}

如何在 ionic/cordova/phonegap 中检查应用程序运行在前台或后台

how to check app running in foreground or background in ionic/cordova/phonegap

javascript

cordova

ionic-framework

ionic3

ionic4

"Is there any way to check whether the app is running in foreground or background?"

如何在 ionic/cordova/phonegap 中检查应用程序 运行 在前台或后台

how to check app running in foreground or background in ionic/cordova/phonegap

javascript

cordova

ionic-framework

ionic3

ionic4

"Is there any way to check whether the app is running in foreground or background?"

如何在 ionic/cordova/phonegap 中检查应用程序运行在前台或后台