Ionic 3集成FCM通知：徽章不显示及点击跳转指定页问题求助

嘿，针对你遇到的Ionic 3 + Firebase/FCM的两个问题，我给你整理了具体的解决方案，都是混合应用里常用的处理方式：

这个问题需要分平台处理，因为iOS和Android的徽章机制差异很大：

iOS端解决步骤 #

1. 配置Xcode权限：打开Xcode项目，确保在Signing & Capabilities里开启了Push Notifications，并且Info.plist中添加了UIBackgroundModes，包含remote-notification（允许应用在后台接收推送）。
2. FCM消息带badge字段：发送推送时，必须在APNs的payload里指定badge数值，示例请求体：

{
  "notification": {
    "title": "新消息提醒",
    "body": "你有1条未读消息"
  },
  "apns": {
    "payload": {
      "aps": {
        "badge": 1
      }
    }
  },
  "to": "你的设备令牌"
}

3. 本地维护徽章数：如果需要在用户查看消息后清零徽章，安装cordova-plugin-badge插件：

ionic cordova plugin add cordova-plugin-badge
npm install @ionic-native/badge

然后在代码中调用this.badge.set(0)来重置徽章。

Android端解决步骤 #

Android没有统一的系统级徽章标准，不同厂商（小米、华为、三星等）有自己的实现，所以需要借助插件适配：

1. 安装徽章插件：同样用上面的cordova-plugin-badge和对应的Ionic Native包。
2. 通过FCM数据字段传递徽章数：在推送的data字段里带上徽章数值，比如：

{
  "notification": {
    "title": "新消息提醒",
    "body": "你有1条未读消息"
  },
  "data": {
    "badgeCount": "1"
  },
  "to": "你的设备令牌"
}

3. 接收通知时设置徽章：在FCM的通知接收回调里，调用插件设置徽章：

this.fcm.onNotification().subscribe(data => {
  if (data.badgeCount) {
    this.badge.set(parseInt(data.badgeCount));
  }
});

4. 提醒用户开启权限：部分厂商需要用户手动在应用设置里开启“应用图标标记”权限，记得在应用内提示用户开启。

Ionic 3是混合应用，没有原生Activity，所以不能用click_action指向Activity。我们可以通过自定义数据+FCM点击事件监听来实现跳转：

步骤1：推送消息中携带目标页面信息 #

在FCM消息的data字段里添加目标页面的路由和必要参数，示例：

{
  "notification": {
    "title": "新订单通知",
    "body": "你有一笔订单待处理"
  },
  "data": {
    "targetPage": "/order-detail",
    "orderId": "10001"
  },
  "to": "你的设备令牌"
}

步骤2：在Ionic中监听通知点击事件 #

在app.component.ts中处理两种场景的通知点击：

1. 应用在后台或被杀死时点击通知：通过getInitialPushPayload()获取启动时的通知数据，然后跳转：

import { FCM } from '@ionic-native/fcm';
import { NavController } from 'ionic-angular';

constructor(private fcm: FCM, private navCtrl: NavController) {}

this.platform.ready().then(() => {
  // 处理应用被杀死后点击通知启动的情况
  this.fcm.getInitialPushPayload().then(payload => {
    if (payload?.data?.targetPage) {
      this.navCtrl.setRoot(payload.data.targetPage, { 
        orderId: payload.data.orderId 
      });
    }
  });

  // 处理应用在后台时点击通知的情况
  this.fcm.onNotification().subscribe(data => {
    if (data.wasTapped) {
      // 点击了通知
      this.navCtrl.setRoot(data.targetPage, { 
        orderId: data.orderId 
      });
    }
  });
});

2. 应用在前台时收到通知：如果需要点击前台通知也跳转，可以在onNotification()的else分支里处理：

else {
  // 应用在前台收到通知，点击通知栏的跳转逻辑
  this.navCtrl.push(data.targetPage, { orderId: data.orderId });
}

注意事项 #

• 确保targetPage是你应用中已配置的有效路由（比如在app.module.ts里注册的页面）。
• 如果使用懒加载，要确保目标页面的模块已经正确导入并设置好路由。

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