Comment augmenter le nombre de notifications sur le badge de l'icône de l'application Android en utilisant Ionic 2 ?

Question

J'ai développé une application pour Android en utilisant Ionic 2. L'application fonctionne bien et les notifications sont correctement envoyées à l'application. Cependant, chaque fois que je reçois une notification push, le badge d'icône qui compte les notifications ne s'affiche pas.

J'ai essayé beaucoup de choses, j'ai beaucoup cherché sur internet et aucune solution ne fonctionne.

Informations :

1. J'ai installé le cordova-plugin-badge.
2. Dans mon fichier app.component.ts, j'ai déjà importé le plugin Badge : import { Badge } from 'ionic-native';
3. Pour tester, j'ai défini le nombre de badges à 10, avec ce code : Badge.set(10); - J'ai mis ce code à l'intérieur du constructor dans app.components.ts.

J'ai suivi le tutoriel Ionic pour utiliser le badge.

J'ai essayé de développer en utilisant le tutoriel du plugin, mais il n'est pas spécifique à Ionic. Alors, je ne sais pas en quoi cela pourrait aider.

J'ai utilisé le tutoriel Ionic 2 pour les notifications push et, comme je l'ai dit, cela fonctionne bien.

Eh bien, la documentation d'Ionic sur le Badge indique que je dois utiliser Badge.increase(x). Je ne sais pas où mettre ce code. Je pensais devoir spécifier : quand la notification arrive sur l'appareil, alors Badge.increase(x). Mais, je ne sais pas comment faire cela.

Mon code de notification push est :

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();
});

Mais ce code ne fonctionne que lorsque l'application est ouverte. Quand je reçois une notification en arrière-plan, comment augmenter le badge ?

Autre information importante :

J'émule Android en utilisant l'émulateur Android, fourni par Android Studio. Les spécifications de l'appareil.

Dans le Moniteur d'appareils Android, je vois cette erreur :

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

La liste des erreurs continue ici.

Essayez de rechercher cette erreur sur Google. Il y a peu de résultats. Aucun résultat spécifique à Ionic. Génial, hein ?

Et... je vois des notifications de comptage de badge sur Android. Est-il possible de le faire. Mais, comment ?

Désolé pour mon anglais et le texte long.

Merci !

MODIFICATION 1 --------------------

Mon environnement :

Système d'exploitation : 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
Version du plugin cordova-badge : 0.7.4

MODIFICATION 2 --------------------

Mon code PHP qui envoie la notification à Ionic via CURL:

$yourApiSecret = "myApiSecret"; // Disponible dans le tableau de bord d'Ionic
$androidAppId = "myAndroidAppId"; // Disponible dans le tableau de bord d'Ionic
$api_token = "mon.token.api"; // Créé dans le tableau de bord d'Ionic

$data = array(
    "tokens" => "send_to_all",
    "profile" => "my_created_profile", //Créé dans le tableau de bord d'Ionic
    "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

Vous devez envoyer quelque chose comme ceci pour définir le badge sur 5:

{ "data": {
"badge": "5"},"to" : "votre jeton push"}

remarque pour que cela fonctionne sur Android, vous ne devez pas envoyer d'objet de notification avec. Seulement les données. De cette façon, l'application Android se réveillera. Sur IOS, vous pouvez obtenir le badge actuel et l'incrémenter en utilisant un plugin. Ce que je fais habituellement, c'est de calculer le badge sur le backend et d'envoyer un nouveau badge

Answer 2

Je suis récemment tombé sur le même problème. Android ne prend pas en charge les badges sur les notifications push par défaut. Mais c'est possible : Pour que cela fonctionne, vous avez besoin d'une combinaison de ionic-native/badge avec des notifications push.

Les notifications push peuvent être envoyées en arrière-plan en définissant content_available: 1 dans la charge utile, référence : http://docs.ionic.io/services/push/#ios-background-notifications

Bien que le lien mentionne spécifiquement iOS, vous pouvez le faire fonctionner sur Android en utilisant la charge utile suivante via les notifications push Ionic :

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

Ce que cela signifie :

content_available: 1 indique au dispositif lors de la réception de la notification push qu'il s'agit d'une notification en arrière-plan qui ne doit pas alerter l'utilisateur. Ainsi, votre application pourra traiter la notification sans déranger l'utilisateur.

payload C'est une préférence, mais voici pourquoi je l'ai : il y a une combinaison magique, pour moi, avec ces notifications push en arrière-plan. Je ne veux pas que l'utilisateur soit alerté lorsque l'application est fermée, mais je veux le gérer lorsque l'application est ouverte. Vous ne pouvez pas mettre de titre et de message sur une notification push en arrière-plan et la recevoir silencieusement en arrière-plan (du moins sur Android), donc je mets ces informations dans la charge utile et y accède manuellement.

data C'est la sauce magique qui permet à Android de traiter cette notification en arrière-plan. En utilisant le plugin push fourni par Ionic, la structure de la charge utile est extrêmement pertinente pour la façon dont l'application traite la notification. Voici une bonne référence : https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/PAYLOAD.md#notification-vs-data-payloads

Maintenant, pour gérer le message dans l'application.

Tout d'abord, assurez-vous d'avoir correctement suivi la documentation de ionic-native/push pour configurer le plugin et l'injecter dans votre application.

Définissez le fournisseur dans app.module

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

fournisseurs : [
    Badge
]

Importez tout ce dont vous aurez besoin :

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

Injectez-le :

constructeur(
    badge privé: Badge
) {}

Utilisez-le pour gérer une charge utile :

this.push.rx.notification()
    .subscribe((message: IPushMessage) => {
        console.log(message);
        if (message.title && message.text) {
            laissez la notification: AppNotification = {
                titre: message.title,
                message: message.text
            };
            // Gérer la notification push dans l'application.
        }

        laissez la charge utile: tout = message.payload;
        // Récupérez le nombre de badge de la charge utile.
        if(payload && payload.badge) {
            // Utiliser le plugin badge, définir le nombre de badge.
            this.badge.set(Number(payload.badge));
        }

        if(payload && payload.title && payload.text) {
            laissez la notification: AppNotification = {
                titre: payload.title,
                message: payload.text
            };
            // Faites quelque chose avec la notification en arrière-plan si l'application est ouverte.
        }
    });

En suivant la documentation ionic pour le plugin badge, lorsque vous recevez une notification push, vous pouvez prendre les données de la charge utile et les utiliser pour définir le numéro de badge. De plus, si vous le souhaitez, vous pouvez également gérer la notification push dans l'application.

J'espère que cela vous aidera.