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

【问题标题】：how to check app running in foreground or background in ionic/cordova/phonegap如何在 ionic/cordova/phonegap 中检查在前台或后台运行的应用程序
【发布时间】：2015-06-18 19:17:49
【问题描述】：

有什么方法可以在ionic/cordova/phonegap中检查应用是在前台还是后台运行，我需要在android和ios上使用，非常感谢

【问题讨论】：

...阅读文档。当用户关闭应用程序时，暂停事件监听器会告诉您。 resume 事件监听器会做相反的事情。
谢谢Sithys，在这种情况下，我需要在本地存储中存储一个变量（比如说A），它的值会被resume/pause eventlistener改变，然后根据A的值来确定应用程序的前景/背景，对吧？但是感觉不直接，有没有更直接的方法？提前致谢
Resume 和 Pause 事件将独立于变量或类似的东西触发。如果用户按下主页按钮，或者用户恢复应用程序，它们将被触发。
@Sithys - 仅仅监听触发的事件并不能回答@user1521398 提出的问题“有没有办法检查应用程序是在前台还是后台运行”...@user1521398 - 是的您需要使用带有变量的pause 和resume 事件来存储状态（请参阅@jurer 提供的答案）。

标签： javascript cordova ionic-framework ionic3 ionic4

【解决方案1】：

使用两个事件“Pause”和“Resume”。您可以在Apache Cordova Events Documentation 中找到所有活动。

事件 - 暂停：

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

事件 - 继续

本机平台拉取应用程序时会触发 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>

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

【讨论】：

感谢详细示例，Sithys
嗨，暂停/恢复事件不会在设备准备就绪后立即触发。我的应用程序应该在应用程序的另一个页面上检测到此事件，在此期间，我的应用程序可能处于后台。我怎样才能做到这一点？
我需要知道应用程序是否已在后台启动（例如在 VoIP 推送之后）。你知道我们该怎么做吗？

【解决方案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;    
})

【讨论】：

【解决方案3】：

使用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

【讨论】：

【解决方案4】：

“有什么方法可以检查应用是在前台运行还是后台运行？”

是的。

1) 当应用变为非活动状态（在后台运行）时，Cordova 触发 pause 事件，当应用再次变为活动状态（被带到前台）时，Cordova 触发 resume 事件。

2) 从这些事件中，可以使用变量将状态存储为“前景”或“背景”。

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


    var isAppInForeground = true;


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

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

});

【讨论】：

我可以在 Pause 事件中添加 $Interval 方法，它每 5 分钟执行一次位置获取任务。它会工作吗？
这其实是问题的正确答案
@tfmontague: 先生，我们可以在暂停事件中调用 watchPosition 函数吗？
@ManushVenkatesh - 这会监听“暂停”事件，并在应用暂停之前执行一些代码。一旦应用程序暂停，我不相信它会继续执行任何代码。您需要在后台线程中运行代码，例如“github.com/katzer/cordova-plugin-background-mode”。
@KapilSoni - 不，这会监听“暂停”事件，并在应用暂停之前执行一些代码。一旦应用程序暂停，我不相信它会继续执行任何代码。您需要在后台线程中运行代码，例如“github.com/katzer/cordova-plugin-background-mode”。

【解决方案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;
        });
       }
    });
}

【讨论】：

为什么要设置 window['paused'] = 0; ?检查应用程序是否在前台后？
是的，当应用程序进入前台模式时，我为我的情况设置了它。你不需要它。
好的，很酷，实际上在 iOS 中，当应用程序处于前台状态时，我没有收到 firebase 推送通知。所以我正在考虑通过检查平台和前景条件来创建自己的本地通知......并将数据传递给它。
你用什么插件来通知？
phonegap插件推送

【解决方案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
        });

【讨论】：

我尝试了你的代码，但我可以调用 watchPosition 函数在暂停事件中调用吗？
@Kapilsoni 你必须实现一个前台服务，比如ionicframework.com/docs/native/foreground-service 或后台模式ionicframework.com/docs/native/background-geolocation

【解决方案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');
    });
  }

【讨论】：

【解决方案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');
     });
}

【讨论】：