在Cordova应用中读取FCM消息Payload及获取角标数的方法

环境信息 #

• Cordova版本：11.0.0
• 插件版本：
  • cordova-plugin-firebase-messaging 7.0.4 "FirebaseMessagingPlugin"
  • cordova-support-android-plugin 2.0.4 "cordova-support-android-plugin"

当前实现代码 #

已成功获取设备Token，但onMessage()、onBackgroundMessage()无法接收Payload，getBadge()无法获取消息中的角标数。当前index.js代码如下：

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
   cordova.plugins.firebase.messaging.getToken().then(function(token) { 
   alert(token);
   document.getElementById('txtGCMId').value = token;
   
   });

  cordova.plugins.firebase.messaging.onMessage(function(payload) {
     alert(payload);
  });
 
  cordova.plugins.firebase.messaging.onBackgroundMessage(function (payload) {
    alert(payload);
  });

  cordova.plugins.firebase.messaging.getBadge().then(function(value) {
   alert(value);
  });
}

发送的FCM消息内容 #

通过Postman调用https://fcm.googleapis.com/fcm/send发送的消息：

{
"to": "e3PGidrDSqKP-pOHJ0W_yC:APA91bEGmKlVzYatnJam1GJ2k55fFJlMfT2uIymZnLQoFvYYoxBXKOMvaN26l1flFwDMbrQoLxWqCQEc0wWxIHRjEfUn7t13kzXPsFDXECsRVUTR1CLxynzg270H22jHaaqzJugFcGhS",
"notification": {
    "body": "Testing from Sample",
    "title": "Testing",
    "icon": "myicon",
    "sound": "default",
    "badge": "10"
},
"data" : {
    "key_1" : "Data for key one",
    "key_2" : "Hellowww"
}
}

问题 #

如何接收Payload并获取角标数，同时在应用图标上显示角标数？

解决方案 #

1. 接收Payload的问题处理 #

FCM消息分为通知消息和数据消息，两者在前台/后台的接收逻辑不同：

• 前台状态：onMessage()会接收到完整的消息（包含notification和data字段），但不能直接alert(payload)（payload是对象），需要转为字符串查看：

  cordova.plugins.firebase.messaging.onMessage(function(payload) {
     console.log("前台收到消息：", payload);
     alert(JSON.stringify(payload)); // 转为字符串再展示
     // 提取data字段
     const data = payload.data;
     // 提取notification字段
     const notification = payload.notification;
  });
  

• 后台状态：Android平台下，默认notification消息会被系统托盘处理，onBackgroundMessage()仅接收data字段内容。要在后台获取完整消息，需修改发送格式：将notification嵌套进data中，同时设置消息优先级为高：

  {
  "to": "你的设备Token",
  "data" : {
      "key_1" : "Data for key one",
      "key_2" : "Hellowww",
      "notification": {
          "body": "Testing from Sample",
          "title": "Testing",
          "icon": "myicon",
          "sound": "default",
          "badge": "10"
      }
  },
  "priority": "high"
  }
  

  此时onBackgroundMessage()可获取data中所有内容，包括嵌套的notification信息。

2. 角标数的获取与显示 #

• 提取消息中的角标数：getBadge()获取的是当前应用图标上的角标值，而非消息携带的badge字段。需从Payload中提取对应值：

  // 前台接收时提取
  cordova.plugins.firebase.messaging.onMessage(function(payload) {
     const badgeCount = payload.notification?.badge || payload.data?.notification?.badge;
     console.log("消息携带的角标数：", badgeCount);
  });
  
  // 后台接收时提取
  cordova.plugins.firebase.messaging.onBackgroundMessage(function(payload) {
     const badgeCount = payload.data?.notification?.badge;
     console.log("后台消息携带的角标数：", badgeCount);
  });
  

• 设置应用图标角标：使用setBadge()方法将提取到的数值设置到图标上，注意转为数值类型：

  // 示例：提取后设置角标
  const badgeCount = parseInt(badgeCountStr);
  cordova.plugins.firebase.messaging.setBadge(badgeCount).then(function() {
      console.log("角标设置成功");
  }).catch(function(error) {
      console.error("角标设置失败：", error);
  });
  

• Android平台注意：Android默认不支持应用图标角标，需确保设备启动器支持该功能（如小米、华为等品牌），同时发送消息时badge字段建议用数值类型（"badge": 10而非字符串）。

3. 额外配置检查 #

• 确认AndroidManifest.xml中添加了必要权限：

  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="com.google.android.c2dm.permission.RECEIVE" />
  

• 确保Firebase配置文件google-services.json已正确放置在platforms/android/app目录下。

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