Notes for a front-end developer, esyou.net

0%

如何让Cordova开发的APP保持后台运行不被kill

在使用cordova开发APP的时候会发现,在安卓上会出现部分问题,就比如我们想要保持当前Cordova APP的状态,然后去查看其他APP这种简单的APP间的切换(简单说就是当你从Cordova APP切换到微信或者其他程序的时候),就会导致Cordova APP直接被后台kill,在ios上好像没有这样的问题发生。
为了防止出现这种问题导致体验性差我们可能需要其他方式对此问题进行解决,经过查阅Cordova官方文档发现,其实Cordova提供了以下一些监听事件

deviceready,resume和pause三个事件就是我们这次的重点了,从字面意思对这三个事件进行理解,可以得知deviceready就是设备准备好了,resume是设备恢复(或者理解成APP恢复),pause就是暂停(APP暂停),在相应的页面中编写以下代码我们可以监听到APP目前的暂停与恢复状态,而由此来判断APP是否处于激活状态。

监听APP状态

1
document.addEventListener("deviceready", onDeviceReady, false);
2
function onDeviceReady() {
3
    // 设备初始化完成,进入APP监听状态
4
    document.addEventListener("resume", onResume, false);
5
    document.addEventListener("pause", onPause, false);
6
}
7
function onResume() {
8
    console.log('-----------APP恢复-----------')
9
}
10
function onPause() {
11
    console.log('-----------APP暂停-----------')
12
}

编写完成后,可以尝试启动APP,然后再将APP最小化或者切换成其他APP(如返回到桌面,接着再启动另一个APP),你就可以看到调试信息展示的是

1
-----------APP暂停-----------

后台运行插件

当你再次返回到APP的时候可能你的APP又重启动页开始了,APP并不保持在之前你离开的页面,这就是你的app被后台给kill了,因此我们需要在APP pause的时候让我们的APP进入后台运行,防止后台kill当前APP进程,因此我们需要安装一个叫cordova-plugin-background-mode的插件
插件github:https://github.com/katzer/cordova-plugin-background-mode
安装插件

1
cordova plugin add cordova-plugin-background-mode

安装完成后,把上面的代码修改下,修改成如下即可:

1
document.addEventListener("deviceready", onDeviceReady, false);
2
function onDeviceReady() {
3
    // 设备初始化完成,进入APP监听状态
4
    document.addEventListener("resume", onResume, false);
5
    document.addEventListener("pause", onPause, false);
6
}
7
function onResume() {
8
    console.log('-----------APP恢复-----------')
9
    // APP恢复的时候检查APP是否处于后台运行,如果处于后台则关闭后台运行
10
    if(cordova.plugins.backgroundMode.isEnabled()) {
11
        cordova.plugins.backgroundMode.disable()
12
    }
13
}
14
function onPause() {
15
    console.log('-----------APP暂停-----------')
16
    // 当APP暂停的时候,开启APP后台运行
17
    cordova.plugins.backgroundMode.enable()
18
}

现在你再切换APP看看,是不是Cordova APP 已经不会出现重启的问题了?

ionic中的应用

在ionic中,ionic通过platfrom封装了这些Cordova事件,如将deviceready封装成了platform.ready(),其他两个也一样大同小异platform.pause、platform.resume

安装backgroundMode插件

1
ionic cordova plugin add cordova-plugin-background-mode;npm install --save @ionic-native/background-mode@4

在入口文件中编写如下代码即可

1
platform.ready().then(() => {
2
    if (platform.is('android')) {
3
        // 监听APP状态
4
        platform.resume.subscribe(() => {
5
            // 当APP激活时,判断是否处于后台运行,如果是则关闭后台运行
6
            if (this.backgroundMode.isEnabled()) {
7
                backgroundMode.disable()
8
            }
9
            console.log('***********APP resume************')
10
        })
11
        platform.pause.subscribe(() => {
12
            console.log('***********APP pause*************')
13
            // 当APP未激活时,直接进入后台
14
            backgroundMode.enable()
15
        })
16
    }
17
})