使用 cordova 在 Android/Ios 中显示徽章编号

Posted 2023-03-15

【中文标题】使用 cordova 在 Android/Ios 中显示徽章编号

【英文标题】：Display badge number in Android/Ios using cordova

【发布时间】：2016-10-18 15:33:34

【问题描述】：

我正在使用 cordova 开发一个混合应用程序。在收到来自 APNS/FCM 的通知后，我想在应用程序图标中显示通知计数，如下图所示。我正在使用 cordova-plugin-fcm 和 cordova-plugin-badge 插件。

代码：

onDeviceReady: function()      
cordova.plugins.notification.badge.hasPermission(function (granted) 
    );

    cordova.plugins.notification.badge.registerPermission(function (hasPermission) 
    );

    // switch on 'auto clear'
    cordova.plugins.notification.badge.configure(
    autoClear: true
    ); 
//FCMPlugin.getToken( successCallback(token), errorCallback(err) ); 
    //Keep in mind the function will return null if the token has not been established yet. 
    FCMPlugin.getToken(
    function(token)            
        console.log("token "+token);
    ,
    function(err)
        console.log('error retrieving token: ' + err);
    
    )

    //FCMPlugin.subscribeToTopic( topic, successCallback(msg), errorCallback(err) ); 
    //All devices are subscribed automatically to 'all' and 'ios' or 'android' topic respectively. 
    //Must match the following regular expression: "[a-zA-Z0-9-_.~%]1,900". 
    FCMPlugin.subscribeToTopic('all');

    //FCMPlugin.onNotification( onNotificationCallback(data), successCallback(msg), errorCallback(err) )
    //Here you define your application behaviour based on the notification data.

    FCMPlugin.onNotification(
    function(data)     
        //increase the badge        
        cordova.plugins.notification.badge.increase();
        if(data.wasTapped)
        //Notification was received on device tray and tapped by the user.              

        else
        //Notification was received in foreground. Maybe the user needs to be notified.             
        
    ,
    function(msg)
    console.log('onNotification callback successfully registered: ' + msg);         
    ,
    function(err)
        console.log('Error registering onNotification callback: ' + err);
    
    );

Image with badge !!

【参考方案1】：

解决方案是发送 2 条不同的 FCM 消息。

第一个没有通知，负载如下：

  "data":
    "badge":"true",
  ,
    "to":"/topics/all",
    "priority":"high"

这将触发 MyFirebaseMessagingService.java 中的 onMessageReceived，然后将有效负载推送到 FCMPlugin.onNotification() 回调。

FCMPlugin.onNotification(function(data)
    if(data.badge == "true")
        cordova.plugins.notification.badge.increase();
    
);

通过这样做，您将增加徽章数量。 然后，您使用这样的有效负载发送通知：

  "notification":
    "title":"Notification title",
    "body":"Notification body",
    "sound":"default",
    "click_action":"FCM_PLUGIN_ACTIVITY",
    "icon":"fcm_push_icon"
  ,
    "to":"/topics/all",
    "priority":"high"

这样您将在通知托盘中收到消息。我还建议设置cordova.plugins.notification.badge.set(0) onDeviceReady 和 onResume 事件，以便在应用程序进入前台后清除徽章编号。