即使在实施 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 平台未内置徽章,某些设备可能不受支持,但至少我希望它适用于某些设备(即三星、索尼)。我做了很多研究,最突出的是:
cordova-plugin-badge (https://github.com/katzer/cordova-plugin-badge) 文档中所述 supposed 同时适用于 iOS 和某些Android 台设备,但它对我来说根本无法在任何 Android 台设备上运行。 请注意,我一直在测试的 Android 设备是来自 Genymotion 的模拟器,我已经在其上设置了 Google Play Services 并且能够接收推送通知并且功能几乎与真实设备一样设备,这会成为问题吗?
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 来完成这个。
您可能需要查看以下链接以获得进一步的解释:
- How does Facebook add badge numbers on app icon in Android?
Does Samsung modifies it's Android ROMs to have badges on email and SMS icons?
- How to make application badge on android?
此致
如果有人能帮我解决这个困扰我好几天的问题,我将不胜感激。
我有一个使用 Ionic 框架创建的混合应用程序,我已经在其上实现了推送通知(通过 phonegap-plugin-push)。推送通知工作正常,但我想要的是推送通知(即 GCM 有效负载)将徽章 count/number 发送到应用程序,应用程序将接受该 count/number 并将其显示为应用程序图标旁边的徽章。考虑到徽章已经内置,我的代码非常适合 iOS 设备,但我很难在 Android 平台上实现相同的想法(徽章)。
我知道由于 Android 平台未内置徽章,某些设备可能不受支持,但至少我希望它适用于某些设备(即三星、索尼)。我做了很多研究,最突出的是:
cordova-plugin-badge (https://github.com/katzer/cordova-plugin-badge) 文档中所述 supposed 同时适用于 iOS 和某些Android 台设备,但它对我来说根本无法在任何 Android 台设备上运行。 请注意,我一直在测试的 Android 设备是来自 Genymotion 的模拟器,我已经在其上设置了 Google Play Services 并且能够接收推送通知并且功能几乎与真实设备一样设备,这会成为问题吗?
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 来完成这个。
您可能需要查看以下链接以获得进一步的解释:
- How does Facebook add badge numbers on app icon in Android?
Does Samsung modifies it's Android ROMs to have badges on email and SMS icons?- How to make application badge on android?
此致