Ionic 3 App 通知跳转异常：前台正常后台仅启动应用

我之前在做Ionic 3项目时也碰到过一模一样的问题！其实核心原因很好理解：App在前台/后台运行时，能实时监听推送通知的接收事件，但当App完全关闭（冷启动）时，点击通知启动App的那一刻，通知数据是作为启动参数传递过来的，这时候常规的监听事件根本还没触发，自然没法跳转。下面是我当时解决这个问题的完整步骤，亲测有效：

1. 先确认推送插件的基础配置（以常用的cordova-plugin-fcm为例） #

首先确保你已经正确安装了cordova-plugin-fcm和对应的Ionic Native包装器，并且配置好了推送服务（比如Firebase的FCM后台）。这一步是基础，要是插件没装好，后面的逻辑都白搭。

2. 完善前台/后台运行时的通知跳转逻辑（你已经实现了一部分，这里补充完整） #

在app.component.ts里，我们需要监听推送通知的接收事件，处理前台收到通知或者后台点击通知的跳转：

import { Component } from '@angular/core';
import { Platform, NavController } from 'ionic-angular';
import { FCM } from '@ionic-native/fcm';
// 导入你需要跳转的页面组件，比如DetailPage
import { DetailPage } from '../pages/detail/detail';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(
    private platform: Platform,
    private fcm: FCM,
    private navCtrl: NavController
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // 监听前台/后台的通知事件
      this.fcm.onNotification().subscribe(data => {
        if (data.wasTapped) {
          // 后台状态下点击通知进入App
          this.navigateToTargetPage(data);
        } else {
          // 前台收到通知，这里可以先弹提示再跳转，或者直接跳转
          alert(`收到通知：${data.body}`);
          this.navigateToTargetPage(data);
        }
      });
    });
  }

  // 封装统一的页面跳转逻辑
  private navigateToTargetPage(notificationData: any) {
    // 假设你的通知data里带有page字段，指定要跳转的页面名称
    // 也可以用判断逻辑匹配不同页面
    if (notificationData.page === 'DetailPage') {
      this.navCtrl.setRoot(DetailPage, {
        itemId: notificationData.itemId // 传递页面需要的参数
      });
    }
  }
}

3. 关键：处理冷启动（App关闭状态）时的跳转 #

这一步是解决问题的核心！当App完全关闭，点击通知启动时，onNotification事件不会触发，因为此时插件还没完成初始化。我们需要在App启动时主动获取启动参数里的通知数据：
在刚才的initializeApp()方法里，添加getInitialNotification()的逻辑：

initializeApp() {
  this.platform.ready().then(() => {
    // 先获取设备token（可选，但建议保留）
    this.fcm.getToken().then(token => {
      console.log('设备Token:', token);
    });

    // 处理冷启动时的通知数据
    this.fcm.getInitialNotification().subscribe(data => {
      if (data && data.page) {
        // 这里的data就是点击通知带过来的完整数据
        // 注意：冷启动时需要稍微延迟一下再跳转，确保页面导航组件已经初始化完成
        setTimeout(() => {
          this.navigateToTargetPage(data);
        }, 1000);
      }
    });

    // 之前的前台/后台监听代码...
    this.fcm.onNotification().subscribe(data => {
      // ...原有逻辑
    });
  });
}

4. 几个必须注意的细节 #

• 通知数据格式要正确：后台发送推送时，必须把跳转相关的参数放在data字段里（FCM的要求），比如后台发送的Payload示例：

{
  "to": "设备的FCM Token",
  "notification": {
    "title": "新订单提醒",
    "body": "您有一笔新订单待处理"
  },
  "data": {
    "page": "DetailPage",
    "itemId": "1001"
  }
}

这里notification是系统通知栏显示的内容，data才是会传递给App的业务参数，一定要分清楚！

• 页面要正确注册：确保你要跳转的页面已经在app.module.ts的declarations和entryComponents数组里声明了，否则导航会失败。
• 真机测试：模拟器的推送功能有时候会有异常，一定要用真机测试冷启动的场景，测试前要完全关闭App（从后台进程里划掉），再点击通知启动。
• 如果用其他推送插件：比如phonegap-plugin-push，逻辑类似，只是API不同——你需要监听notification事件时判断additionalData.coldstart字段是否为true，以此区分冷启动场景。

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