如何使用 Ionic 2 在 Android 应用程序图标中增加徽章计数通知？

Question

我使用 Ionic 2 为 Android 开发了一个应用程序。 该应用程序运行良好，并且通知已正确发送到该应用程序。 但是，我总是会收到推送通知，但不会出现计数通知的图标徽章。

我尝试了很多，我在互联网上搜索了很多，但没有一个解决方案有效。

信息：

1. 我安装了cordova-plugin-badge。
2. 在我的app.component.ts 我已经导入了徽章插件：import { Badge } from 'ionic-native';
3. 为了测试，我将徽章计数设置为 10，使用以下代码：Badge.set(10); - 我将此代码放入 constructor 中的 app.components.ts 中。

我跟随Ionic tutorial使用徽章。

我尝试使用plugin tutorial 进行开发，但它不是 Ionic 特有的。然后，我不知道这有什么帮助。

我使用了Ionic 2 tutorial to do the push notifications，正如我所说的，效果很好。

好吧，关于徽章的 Ionic 文档告诉我必须使用 Badge.increase(x)。我不知道把这段代码放在哪里。我想我必须指定：当通知到达设备时，然后Badge.increase(x)。但是，我不知道该怎么做。

我的推送通知代码是：

this.push.register().then((t: PushToken) => {
  return this.push.saveToken(t);
}).then((t: PushToken) => {
  console.log('Token saved:', t.token);
});

this.push.rx.notification()
.subscribe((msg) => {
  alert(msg.title + ': ' + msg.text);
  Badge.clear();
});

但此代码仅在应用打开的情况下运行。 当我收到后台通知时，如何增加徽章？

另一个重要信息：

我使用 Android Studio 提供的 Android Emulator 模拟 Android。 device specs。

在 Android 设备监视器中，我看到此错误：

01-25 21:26:54.558: W/PackageManager(6769): Unknown permission com.sec.android.provider.badge.permission.READ in package com.ionicframework.myapp343731
01-25 21:26:54.558: W/PackageManager(6769): Unknown permission com.sec.android.provider.badge.permission.WRITE in package com.ionicframework.myapp343731

错误列表continues here。

尝试在 Google 中搜索此错误。结果很少。 Ionic 的零结果细节。厉害吧？

而且...我在 Android 中看到徽章计数通知。 有可能做到这一点。但是，怎么做？

对不起，我的英文和长文本。

谢谢！

编辑 1 --------

我的环境：

OS: Ubuntu 16.04.1 LTS
node -v: v5.12.0
npm -v: 3.8.6
ionic -v: 2.2.1
cordova -v: 6.4.0
cordova-plugin-badge version: 0.7.4

编辑 2 --------

我的 PHP 代码通过 CURL 向 Ionic 发送通知：

$yourApiSecret = "myApiSecret"; // Available in Ionic Dashboard
$androidAppId = "myAndroidAppId"; // Available in Ionic Dashboard
$api_token = "my.api.token"; // Created in Ionic Dashboard

$data = array(
    "tokens" => "send_to_all",
    "profile" => "my_created_profile", //Created in Ionic Dashboard
    "send_to_all" => true,
    "notification" => array(
        'title'     => $title,
        'message'   => $message,
        )
    );

$data_string = json_encode($data);
$ch = curl_init('https://api.ionic.io/push/notifications');
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($ch, CURLOPT_POSTFIELDS, $data_string);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, 
    array(
        'Content-Type: application/json',
        'X-Ionic-Application-Id: '.$androidAppId,
        'Content-Length: ' . strlen($data_string),
        'Authorization: Bearer '.$api_token
        )
    );

$result = curl_exec($ch);

Answer 1

我最近遇到了同样的问题。默认情况下，Android 不支持推送通知上的徽章。但这是可以做到的：要完成这项工作，您需要将ionic-native/badge 与推送通知结合使用。

通过在payload中设置content_available: 1，可以将推送通知作为后台通知发送，参考：http://docs.ionic.io/services/push/#ios-background-notifications

虽然该链接特别提到了 iOS，但您可以通过 Ionic Push 通知使用以下有效负载使其在 Android 上运行：

"notification": {
    "android": {
        "content_available": 1,
        "payload": {
            "badge": 5,
            "title": "Alert",
            "text": "Notifications"
        },
        "data": {
            "badge": 5
        }
    }
}

这是什么意思：

content_available:1 在收到推送通知时告诉设备这是一个不应提醒用户的后台通知。因此，您的应用将能够在不打扰用户的情况下处理通知。

payload 这是一个偏好，但这就是我有这个的原因：对我来说，这些后台推送通知有一个神奇的组合。我不希望在应用程序关闭时提醒用户，但我想在应用程序打开时处理它。您不能将title 和message 放在后台推送通知上，并且仍然在后台静默传递（至少在Android 上），所以我将这些信息放在有效负载上，然后手动访问它。

data 这是允许 Android 处理此后台通知的魔法酱。使用 ionic 提供的推送插件，有效负载结构与应用程序如何处理通知非常相关。这是一个很好的参考：https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/PAYLOAD.md#notification-vs-data-payloads

现在，在应用中处理消息。

首先，确保您已正确遵循 ionic-native/push 文档来设置插件并将其注入您的应用程序。

在app.module中定义提供者

import { Badge } from '@ionic-native/badge';

providers: [
    Badge
]

导入所有你需要的东西：

import { Push, PushToken, IPushMessage } from '@ionic/cloud-angular';
import { Platform, Events } from 'ionic-angular';
import { Badge } from '@ionic-native/badge';

注入它：

constructor(
    private badge: Badge
) {}

用它来处理负载：

this.push.rx.notification()
    .subscribe((message: IPushMessage) => {
        console.log(message);
        if (message.title && message.text) {
            let notification: AppNotification = {
                title: message.title,
                message: message.text
            };
            // Handle the push notification in app.
        }

        let payload: any = message.payload;
        // Get the badge number off the payload.
        if(payload && payload.badge) {
            // Using the badge plugin, set the badge number.
            this.badge.set(Number(payload.badge));
        }

        if(payload && payload.title && payload.text) {
            let notification: AppNotification = {
                title: payload.title,
                message: payload.text
            };
            // Do something with the background notification if the app is open.
        }
    });

按照 badge 插件的 ionic 文档，当您收到推送通知时，您可以获取有效负载数据，然后使用它来设置徽章编号。此外，如果您愿意，还可以在应用中处理推送通知。

希望这会有所帮助。

Answer 2

你需要发送这样的东西来将徽章设置为 5：

{ "data": {
"badge": "5"},"to" : "your push token"}

请注意，要使这项工作适用于 android，您不应使用它发送通知对象。只有数据。这样安卓应用就会被唤醒。在 IOS 上，您可以获得当前徽章并使用插件增加它。我通常会在后端计算徽章并发送新徽章