Ionic Angular安卓应用FCM通知角标无法清除问题求助

问题概述 #

开发基于Ionic Angular的应用时，使用Firebase FCM推送通知，通过Capacitor Badge插件在用户进出应用时清除角标，遇到以下问题：

• Android端：FCM通过AndroidNotification.notificationCount设置的角标，无法用Badge.clear()清除；但插件自身Badge.set()设置的角标可正常清除。
• iOS端：FCM设置的角标可被插件正常清除。

复现步骤 #

• 发送2条FCM推送，应用角标计数变为2
• 打开应用触发Badge.clear()，角标仍显示2
• 再次打开应用，用Badge.set(20)设置角标
• 退出应用，角标显示20
• 打开应用触发Badge.clear()后退出，角标回到2，仅清除了插件设置的20

环境信息 #

Ionic:
   Ionic CLI                     : 7.1.1 (/Users/<username>/.nvm/versions/node/v20.2.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.7.5
   @angular-devkit/build-angular : 16.2.12
   @angular-devkit/schematics    : 16.2.12
   @angular/cli                  : 16.2.12
   @ionic/angular-toolkit        : 6.1.0

Capacitor:
   Capacitor CLI      : 5.7.0
   @capacitor/android : 5.7.0
   @capacitor/core    : 5.7.0
   @capacitor/ios     : 5.7.0

Cordova:
   Cordova CLI       : 12.0.0 (cordova-lib@12.0.1)
   Cordova Platforms : android 9.1.0, browser 6.0.0, ios 6.2.0
   Cordova Plugins   : cordova-plugin-ionic-webview 4.2.1, (and 3 other plugins)

Utility:
   cordova-res : 0.15.4
   native-run  : 2.0.1

System:
   ios-sim : 8.0.2
   NodeJS  : v20.2.0 (/Users/<username>/.nvm/versions/node/v20.2.0/bin/node)
   npm     : 9.6.6
   OS      : macOS Unknown
   Xcode   : Xcode 15.4 Build version 15F31d

调试思路 #

1. 确认FCM使用的通知通道 #

未指定channelId时，FCM会自动创建默认通道（通常名为fcm_fallback_notification_channel）：

• 进入Android系统设置→应用→你的应用→通知，查看所有通知通道，确认FCM推送所属通道。
• 检查该通道的「显示角标」开关是否开启，以及角标计数是否与未读通知数量绑定。

2. 验证角标计数来源差异 #

Android上两种角标设置逻辑不同：

• FCM的notificationCount通过通知对象的number字段设置，角标通常与通知中心未读通知数量关联。
• Capacitor Badge插件（底层依赖ShortcutBadger）直接操作应用快捷方式角标，部分厂商会将这两个计数分开管理。
• 手动清除通知中心的所有FCM推送，观察角标是否归零，判断角标是否与未读通知绑定。

3. 排查通道配置对清除操作的影响 #

若FCM使用默认通道，尝试创建自定义通知通道并统一推送与插件操作的通道上下文，验证是否解决清除问题。

解决方案 #

1. 创建统一的自定义通知通道 #

在Android原生代码（如MainActivity）中添加通道创建逻辑，应用启动时调用：

import android.app.NotificationChannel;
import android.app.NotificationManager;
import android.os.Build;
import androidx.core.app.NotificationManagerCompat;

public void createCustomNotificationChannel() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        String channelId = "app_notification_channel";
        String channelName = "App Notifications";
        String channelDesc = "Unified channel for all app notifications";
        int importance = NotificationManager.IMPORTANCE_DEFAULT;
        
        NotificationChannel channel = new NotificationChannel(channelId, channelName, importance);
        channel.setDescription(channelDesc);
        channel.setShowBadge(true); // 强制开启角标显示

        NotificationManager notificationManager = getSystemService(NotificationManager.class);
        notificationManager.createNotificationChannel(channel);
    }
}

2. 发送FCM时指定自定义通道ID #

在FCM推送payload中添加android.channel_id字段，指定为自定义通道ID：

{
  "notification": {
    "title": "New Message",
    "body": "You have a new notification"
  },
  "android": {
    "notification": {
      "channel_id": "app_notification_channel",
      "notificationCount": 2
    }
  },
  "token": "TARGET_DEVICE_TOKEN"
}

3. 结合通知管理器清除角标与未读通知 #

若角标与未读通知绑定，调用Badge.clear()的同时，清除对应通道的所有通知：
在原生代码中添加清除方法，通过Capacitor桥接供Ionic调用：

import androidx.core.app.NotificationManagerCompat;

public void clearChannelNotifications(String channelId) {
    NotificationManagerCompat notificationManager = NotificationManagerCompat.from(this);
    // 清除指定通道下的所有通知
    notificationManager.cancelAll();
    // 或针对特定通道清除（Android 8.0+）
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        notificationManager.deleteNotificationChannel(channelId);
        // 重新创建通道以保留配置
        createCustomNotificationChannel();
    }
}

4. 直接使用ShortcutBadger操作角标 #

若Capacitor Badge插件的clear()未覆盖FCM设置的角标，可直接引入ShortcutBadger依赖，调用原生清除方法：

import me.leolin.shortcutbadger.ShortcutBadger;

public void forceClearBadge() {
    ShortcutBadger.removeCount(this);
}

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