Ionic应用后台（应用杀死状态）下网络状态检测问题

Hey Adam, let's figure out how to get your Ionic 3 app to detect network status even when it's in the background (or even killed off). Based on your environment details, here's a practical, step-by-step solution:

1. 安装必备的Cordova插件 #

First up, you'll need two core plugins to make this work. If you haven't already, install them via the CLI:

网络信息插件 #

This is the base plugin for detecting network changes:

ionic cordova plugin add cordova-plugin-network-information
npm install --save @ionic-native/network@4

(Note: We're using version 4 of @ionic-native/network because your Ionic Framework is 3.9.2 — newer versions won't be compatible.)

后台模式插件 #

To keep your app running in the background (and maintain network listeners after the app is minimized/killed):

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

2. 配置Android平台（关键步骤） #

Android has strict background restrictions, so we need to tweak the config to grant necessary permissions and enable background behavior. Update your config.xml with these settings inside the <platform name="android"> block:

<platform name="android">
    <!-- 必要权限 -->
    <config-file parent="/manifest" target="AndroidManifest.xml">
        <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
        <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
        <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    </config-file>

    <!-- 后台模式配置 -->
    <preference name="BackgroundModeEnabled" value="true" />
    <preference name="BackgroundModeLaunch" value="true" />
    <preference name="AndroidPersistentFileLocation" value="Compatibility" />
</platform>

3. Ionic代码实现 #

Add the logic to your app's root component (like app.component.ts) to initialize background mode and register network listeners. This way, the listeners stay active even when the app is in the background:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Network } from '@ionic-native/network';
import { BackgroundMode } from '@ionic-native/background-mode';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  constructor(
    private platform: Platform,
    private network: Network,
    private backgroundMode: BackgroundMode
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // 启用后台模式
      this.backgroundMode.enable();
      
      // 配置后台模式的前台通知（Android 8.0+要求）
      this.backgroundMode.setDefaults({
        title: '你的应用名称',
        text: '后台监听网络状态中',
        icon: 'res/icon/android/icon-72x72.png',
        color: '#488aff',
        resume: true,
        bigText: true
      });

      // 注册初始网络监听
      this.setupNetworkListeners();

      // 当后台模式激活时，重新注册监听（防止丢失）
      this.backgroundMode.on('activate').subscribe(() => {
        console.log('应用进入后台模式');
        this.setupNetworkListeners();
      });
    });
  }

  setupNetworkListeners() {
    // 监听网络连接
    this.network.onConnect().subscribe(() => {
      console.log('网络已连接');
      this.showNetworkAlert('网络已恢复');
    });

    // 监听网络断开
    this.network.onDisconnect().subscribe(() => {
      console.log('网络已断开');
      this.showNetworkAlert('网络已断开，请检查');
    });
  }

  showNetworkAlert(message: string) {
    // 这里可以用本地通知插件显示提示（推荐）
    // 比如安装cordova-plugin-local-notification后，添加如下逻辑：
    // this.localNotifications.schedule({
    //   title: '网络状态通知',
    //   text: message,
    //   foreground: true
    // });
    
    // 先打印日志测试
    console.log(`通知: ${message}`);
  }
}

4. 重要注意事项 #

• Android 8.0+限制: The background mode plugin uses a foreground service (required by Android 8.0+) to keep the app running in the background — that's why we set up the notification in the code.
• 完全杀死后的可靠性: If you need 100% detection even when the app is fully killed, you'll need to add a native Android BroadcastReceiver that listens for CONNECTIVITY_ACTION changes. This requires writing a bit of native Java code, but it's the most reliable way to trigger actions when the app isn't running.
• 测试建议: Always test on a real Android device, not just an emulator — emulators often don't replicate real background/kill behavior accurately.

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