菜鸟教程小白 发表于 2022-12-11 17:52:48

android - 使用 cordova 在 Android/Ios 中显示角标(Badge)编号


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

<p>代码:</p>

<pre><code>onDeviceReady: function() {   
cordova.plugins.notification.badge.hasPermission(function (granted) {
    });

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

    // switch on &#39;auto clear&#39;
    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(&#34;token &#34;+token);
    },
    function(err){
      console.log(&#39;error retrieving token: &#39; + err);
    }
    )

    //FCMPlugin.subscribeToTopic( topic, successCallback(msg), errorCallback(err) );
    //All devices are subscribed automatically to &#39;all&#39; and &#39;ios&#39; or &#39;android&#39; topic respectively.
    //Must match the following regular expression: &#34;{1,900}&#34;.
    FCMPlugin.subscribeToTopic(&#39;all&#39;);

    //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(&#39;onNotification callback successfully registered: &#39; + msg);         
    },
    function(err){
      console.log(&#39;Error registering onNotification callback: &#39; + err);
    }
    );}
</code></pre>

<p> <a href="/image/jwfk2.png" rel="noreferrer noopener nofollow">Image with badge !!</a> </p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>解决方案是发送 2 条不同的 FCM 消息。</p>

<p>第一个没有通知,负载如下:</p>

<pre><code>{
&#34;data&#34;:{
    &#34;badge&#34;:&#34;true&#34;,
},
    &#34;to&#34;:&#34;/topics/all&#34;,
    &#34;priority&#34;:&#34;high&#34;
}
</code></pre>

<p>这将触发 MyFirebaseMessagingService.java 中的 onMessageReceived,然后将负载推送到 FCMPlugin.onNotification() 回调。</p>

<pre><code>FCMPlugin.onNotification(function(data){
    if(data.badge == &#34;true&#34;){
      cordova.plugins.notification.badge.increase();
    }
});
</code></pre>

<p>通过这样做,您将增加角标(Badge)数量。
然后,您使用这样的有效负载发送通知:</p>

<pre><code>{
&#34;notification&#34;:{
    &#34;title&#34;:&#34;Notification title&#34;,
    &#34;body&#34;:&#34;Notification body&#34;,
    &#34;sound&#34;:&#34;default&#34;,
    &#34;click_action&#34;:&#34;FCM_PLUGIN_ACTIVITY&#34;,
    &#34;icon&#34;:&#34;fcm_push_icon&#34;
},
    &#34;to&#34;:&#34;/topics/all&#34;,
    &#34;priority&#34;:&#34;high&#34;
}
</code></pre>

<p>这样您将在通知托盘中收到消息。我还建议设置 <code>cordova.plugins.notification.badge.set(0)</code> onDeviceReady 和 onResume 事件,以便在应用程序进入前台后清除角标(Badge)编号。</p></p>
                                   
                                                <p style="font-size: 20px;">关于android - 使用 cordova 在 Android/Ios 中显示角标(Badge)编号,我们在Stack Overflow上找到一个类似的问题:
                                                        <a href="https://stackoverflow.com/questions/40112391/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/40112391/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: android - 使用 cordova 在 Android/Ios 中显示角标(Badge)编号