1

如果有人能幫我解決這個一直困擾我好幾天的問題,我將非常感激。即使在執行ngCordova(cordova-plugin-badge)和phonegap-plugin-push後,也不會顯示Android上的應用圖標徽章

我有一個使用Ionic框架創建的混合應用程序,我已經通過phonegap-plugin-push實現了推送通知。推送通知工作正常,但我想要的是推送通知(即GCM有效內容)將徽章計數/編號發送到應用程序,應用程序將採用該計數/編號並將其顯示爲應用程序旁邊的徽章圖標。我的代碼適用於iOS設備,因爲徽章已經內置,但我在Android平臺上實現相同的想法(徽章)時遇到困難。

我知道,由於沒有內置到Android平臺的徽章,某些設備可能不被支持,但至少我希望它可以用於某些設備(即三星,索尼)。我已經做了很多的研究,最顯着的:

  1. 科爾多瓦 - 插件徽章(https://github.com/katzer/cordova-plugin-badge)該文檔應該爲iOS和Android的某些設備的工作中陳述,但它不在我所有的Android設備上工作。 請注意,我一直在測試的Android設備是來自Genymotion的模擬器,我已經設置了Google Play服務,並且能夠像接收真實設備一樣接收推送通知和功能,這是否會成爲問題?

  2. ShortcutBadger(https://github.com/leolin310148/ShortcutBadger),其中只有文檔本地 Android的實施,通過與上述延伸到混合動力的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 
      }); 
     } 
    }); 
}); 

另外,就是應用程序圖標必須被轉換爲插件的問題爲了徽章工作?我不確定cordova-plugin-badge是如何實現的,並且說明中沒有提到Android需要的任何widget。

謝謝你和任何幫助/技巧是讚賞:)我一直在解決這個問題的日子,這是相當令人沮喪。

回答

3

股票Android目前在標準啓動器上不提供此功能。

某些製造商(例如Samsung)已將此功能納入其定製的Android發射器。另外一些第三方啓動器(例如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?

問候

+1

感謝,謝謝! :) –

+0

@SYTan請讓我知道...你解決了這個問題嗎?你已經應用了哪種解決方案來實現它。我從最近幾天就陷入了這個問題。 –

+0

@ Anjana-Systematix對於遲到的回覆感到抱歉。爲了大家訪問這篇文章的好處,這就是我所做的。由於除了使用定製的第三方啓動器(即Nova Launcher)之外,沒有官方對Android徽章圖標的官方支持,我必須求助於安卓手機的推送通知纔會出現在(滑下)通知欄中。這是假設Android用戶習慣於在通知欄中顯示他們的通知,而不是將徽章計數作爲應用程序圖標上的徽章表示。 –

相關問題