即使在实施 ngCordova(cordova-plugin-badge)和 phonegap-plugin-push 之后,Android 的应用程序图标上的徽章也不会显示

Badge on app icon for Android doesn't show even after implementing ngCordova (cordova-plugin-badge) and phonegap-plugin-push

如果有人能帮我解决这个困扰我好几天的问题,我将不胜感激。

我有一个使用 Ionic 框架创建的混合应用程序,我已经在其上实现了推送通知(通过 phonegap-plugin-push)。推送通知工作正常,但我想要的是推送通知(即 GCM 有效负载)将徽章 count/number 发送到应用程序,应用程序将接受该 count/number 并将其显示为应用程序图标旁边的徽章。考虑到徽章已经内置,我的代码非常适合 iOS 设备,但我很难在 Android 平台上实现相同的想法(徽章)。

我知道由于 Android 平台未内置徽章,某些设备可能不受支持,但至少我希望它适用于某些设备(即三星、索尼)。我做了很多研究,最突出的是:

  1. cordova-plugin-badge (https://github.com/katzer/cordova-plugin-badge) 文档中所述 supposed 同时适用于 iOS 和某些Android 台设备,但它对我来说根本无法在任何 Android 台设备上运行。 请注意,我一直在测试的 Android 设备是来自 Genymotion 的模拟器,我已经在其上设置了 Google Play Services 并且能够接收推送通知并且功能几乎与真实设备一样设备,这会成为问题吗?

  2. ShortcutBadger (https://github.com/leolin310148/ShortcutBadger) 仅包含 native Android 实现的文档,据称被 cordova-plugin-badge 用作上面说要扩展对混合 Android 应用程序的支持,但这根本无法帮助我。

我的index.html:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="css/style.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>

    <script src="js/ng-cordova.js"></script>
    <script src="cordova.js"></script>

    <script src="js/app.js"></script>

  </head>
  <body ng-app="starter">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Trade Deals</h1>
      </ion-header-bar>
      <ion-content ng-controller="badgeController">
        <div>Number of deals pending now: </div>
        <div class="deals"></div>
        <button class="button" ng-click="setBadge(10)">Set badge 10</button>
        <button class="button" ng-click="hasPermission()">Show permission</button>
        <button class="button" ng-click="get()">Get badge count</button>
        <button class="button" ng-click="clear()">Clear badge count</button>
        <button class="button" ng-click="increase()">Increase by 1</button>
        <button class="button" ng-click="decrease()">Decrease by 1</button>
      </ion-content>
    </ion-pane>
  </body>
</html>

我的app.js:

angular.module('starter', ['ionic', 'ngCordova'])

/*
 * do a ionic.push register() every time the app launches for the first time
 * so that it is guaranteed that there is always a valid device token for GCM/APNS
 */
.run(function($ionicPlatform, $cordovaBadge) {
  $ionicPlatform.ready(function() {
    console.log("Device platform is "+device.platform);
    var push = new Ionic.Push({
      "debug": true,
      "onNotification": function(notification) {
        console.log("notification received!!!");
        var payload = notification.payload;
        var payloadStr = JSON.stringify(payload, null, 4);
        var notiStr = JSON.stringify(notification, null, 4);
        console.log("notification: "+notiStr);

        var countIndex = notiStr.indexOf("count");  // extracting badge count from the GCM payload
        var badgeIndex = countIndex + 9;
        var badgeNo;
        if (!isNaN(notiStr[badgeIndex+1])) {
          badgeNo = notiStr.substr(badgeIndex,badgeIndex+2);
        }
        else {
          badgeNo = notiStr[badgeIndex];
        }

        if (device.platform == "Android") {
          $cordovaBadge.set(badgeNo);
        }
      },
      "onRegister": function(data) {
        console.log(data.token);
      },
      "pluginConfig": {
        "android": {
          "sound": "true",
          "badge": "true",
          "icon": "icon",
          "iconColor": "lime"
        },
        "ios": {
          "alert": "true",
          "badge": "true",
          "sound": "true"
        },
      }
    });

    push.register(function(token) {
      console.log("My Device token:",token.token);
      //window.alert("The token is "+token.token);
      push.saveToken(token);  // persist the token in the Ionic Platform so that it doesn't change on multiple launches
    });

    $cordovaBadge.get().then(function(badge) {
      document.querySelector(".deals").innerHTML = badge;
    });
  });
})

.controller("badgeController", function($scope, $ionicPlatform, $cordovaBadge) {
    console.log("inside badgeController");

    $ionicPlatform.ready(function() {
        $ionicPlatform.on('resume', function() {
          $cordovaBadge.get().then(function(badge) {
            document.querySelector(".deals").innerHTML = badge;
          });
        });
        //$cordovaBadge.configure({autoClear: true});  // configure to clear all notifications whenever user opens the app
        $scope.setBadge = function(value) {
          console.log("inside setBadge");
          $cordovaBadge.hasPermission().then(function(result) {
              $cordovaBadge.set(value);
              window.alert("Badge count is "+value);
          }, function(error) {
              console.log(JSON.stringify(error));   // display error message
          });
        }

        $scope.hasPermission = function() {
          console.log("inside hasPermission");
          $cordovaBadge.hasPermission().then(function(result) {
              window.alert("User has permission: "+result);
              console.log("device has permission");
          }, function(error) {
              console.log(JSON.stringify(error));   // display error message
          });
        }

        $scope.get = function() {
          console.log("inside get");
          $cordovaBadge.hasPermission().then(function(result) {
              $cordovaBadge.get().then(function(badge) {
                if (badge>=0) {
                  document.querySelector(".deals").innerHTML = badge;
                }
              })
          }, function(error) {
              console.log(JSON.stringify(error));   // display error message
          });
        }

        $scope.clear = function() {
          console.log("inside clear");
          $cordovaBadge.hasPermission().then(function(result) {
              $cordovaBadge.clear();
              window.alert("Cleared badge count");
          }, function(error) {
              console.log(JSON.stringify(error));   // display error message
          });
        }

        $scope.increase = function() {
          console.log("inside increase");
          $cordovaBadge.hasPermission().then(function(result) {
              $cordovaBadge.increase();
              window.alert("Increased badge count");
          }, function(error) {
              console.log(JSON.stringify(error));   // display error message
          });
        }

        $scope.decrease = function() {
          console.log("inside decrease");
          $cordovaBadge.hasPermission().then(function(result) {
              $cordovaBadge.decrease();
              window.alert("Good job!");
              //window.alert("Decreased badge count");
          }, function(error) {
              console.log(JSON.stringify(error));   // display error message
          });
        }
    });
});

此外,问题是 app 图标 必须转换为 widget 才能使徽章起作用吗?我不确定 cordova-plugin-badge 是如何实现的,并且说明中没有说明 Android.

需要的小部件

谢谢您,任何 help/tips 不胜感激 :) 我已经解决这个问题好几天了,这很令人沮丧。

Stock Android 目前在标准启动器上不提供此功能。

某些制造商(尤其是三星)已将此功能包含在他们定制的 Android 启动器中。还有一些第 3 方启动器(例如 Nova Launcher)包含一个 API 来完成这个。

您可能需要查看以下链接以获得进一步的解释:

  1. How does Facebook add badge numbers on app icon in Android?
  2. Does Samsung modifies it's Android ROMs to have badges on email and SMS icons?
  3. How to make application badge on android?

此致