Ionic3中应用从堆栈移除时执行函数的解决方案咨询

我之前做Ionic3项目时也碰到过这个棘手的问题——pause和resume事件只能处理应用退到后台或回到前台的场景，完全覆盖不了用户把应用从最近列表划掉（也就是从堆栈移除）的情况。下面分平台给你说下可行的解决方案：

一、跨平台基础方案：使用cordova-plugin-app-event插件 #

这个插件能帮我们捕获到应用终止的核心事件，不管是iOS还是Android，当应用被从堆栈移除时大概率能触发。

步骤1：安装插件 #

在项目根目录执行命令：

cordova plugin add cordova-plugin-app-event

步骤2：在Ionic代码中监听事件 #

打开src/app/app.component.ts，在平台就绪后添加事件监听：

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  constructor(private platform: Platform) {
    this.platform.ready().then(() => {
      // 监听应用终止事件
      document.addEventListener('appTerminate', () => {
        console.log('应用即将被从堆栈移除/终止');
        this.runYourFunction(); // 调用你的自定义函数
      }, false);
    });
  }

  // 你的自定义业务函数
  private runYourFunction() {
    // 这里写你需要执行的逻辑，比如保存用户数据、清理临时文件等
    // 注意：尽量做轻量同步操作，避免异步耗时任务，因为进程可能很快被系统终止
  }
}

二、Android平台额外优化：监听Activity销毁事件 #

有些Android设备在用户划掉应用时，可能不会立刻触发appTerminate，这时候我们可以通过修改原生代码来确保触发：

步骤1：修改Android原生代码 #

找到项目中platforms/android/app/src/main/java/[你的包名]/MainActivity.java文件，重写onDestroy方法：

@Override
protected void onDestroy() {
    super.onDestroy();
    // 向JS层发送自定义事件
    if (this.webView != null) {
        this.webView.loadUrl("javascript:window.dispatchEvent(new Event('appDestroyed'));");
    }
}

步骤2：在Ionic中监听自定义事件 #

回到app.component.ts，在Android平台下添加监听：

this.platform.ready().then(() => {
  // ... 之前的appTerminate监听

  if (this.platform.is('android')) {
    document.addEventListener('appDestroyed', () => {
      console.log('Android应用已从堆栈移除并销毁');
      this.runYourFunction();
    }, false);
  }
});

三、iOS平台注意事项 #

iOS系统对后台应用的管控比较严格，当用户从最近列表划掉应用时，系统会调用applicationWillTerminate方法，cordova-plugin-app-event的appTerminate事件已经封装了这个逻辑，所以只要监听这个事件基本就能覆盖场景。不过要注意：如果你的应用在后台有持续的任务（比如音频播放），可能不会立刻触发终止事件，需要先停止后台任务。

重要提醒 #

不管是Android还是iOS，当应用被从堆栈移除时，系统留给我们的执行时间非常有限，所以不要在自定义函数里做异步耗时操作（比如网络请求），尽量只做轻量的同步任务，比如保存本地数据、清理缓存等。

内容的提问来源于stack exchange，提问作者Wasim