Ionic push notification with icon

ionic-v1
1

Hi,

I try to send a push notification with ionic.io :

http://docs.ionic.io/docs/push-sending-push

I use this code :
var req = {
method: ‘POST’,
url: ‘https://api.ionic.io/push/notifications’,
headers: {
‘Content-Type’: ‘application/json’,
‘Authorization’: 'Bearer ’ + jwt
},
data: {
“tokens”: tokens,
“profile”: ‘profile’,
“notification”: {
“title”: titlePush,
“message”: messagePush,
“android”: {
“title”: titlePush,
“message”: messagePush,
“icon”: “img/logo.png”,
“data”: {
“image”: “img/logo.png”
}
},
“ios”: {
“title”: titlePush,
“message”: messagePush
}
}
}
};

                // Make the API call
                $http(req).success(function (resp) {
                    // Handle success
                    console.log("Ionic Push: Push success", resp);
                }).error(function (error) {
                    // Handle error 
                    console.log("Ionic Push: Push error", error);
                });
            }

And I receive this notification:

image
notif.png1065×333 27.4 KB

So, how I do to send my logo in notification?

2

Hi,

In my case I use the phonegap-plugin-push, and in the doc you have plenty informations about the payload : https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/PAYLOAD.md

You have to know since Android Lollipop the icons are white and Google suggests you to choose the background color. In your case, if “img/logo.png” is a plain image (no transparency) then the result will be a white square.
You can have more information here : https://developer.android.com/about/versions/android-5.0-changes.html#BehaviorNotifications

I hope this can help you.

3

Thanks you.

I use this image:

image

And it has a background trasparency. I am wrong?

I can’t configure no image in my icon…

too, I try with this image:

image

4

Maybe your image is not at the location you say it is.

The location of the image may one of three types.
The first is the drawables folder in your app.
example : 'twitter’
The second is the assets folder in your app.
example : 'www/img/logo.png’
The third is the remote URL :
example : https://pbs.twimg.com/profile_images/617058765167329280/9BkeDJlV.png

5

Thanks!

it’s work.

I use a drawable folder to integrate my image with this code:

        var messagePush = val.content;
        var titlePush = val .toName+ " send a message";
        var req = {
            method: 'POST',
            url: 'https://api.ionic.io/push/notifications',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + jwt
            },
            data: {
                "tokens": val.token,
                "profile": 'profile',
                "notification": {
                    "title": titlePush,
                    "message": messagePush,
                    "android": {
                        "icon": "ic_logo",
                        "iconColor": "#ee9425",
                        "style": "inbox",
                        "summaryText": 'There are %n% notifications',
                        "title": titlePush,
                        "message": messagePush
                    },
                    "ios": {
                        "title": titlePush,
                        "message": messagePush
                    }
                }
            }
        };

        // Make the API call
        $http(req).success(function (resp) {
            // Handle success
            console.log("Ionic Push: Push success", resp);
            var refmypush = ref.child('push').child(snapshot.key());
            refmypush.remove();
        }).error(function (error) {
            // Handle error 
            console.log("Ionic Push: Push error", error);
        });

But, I want use a inbox style to stack my notifications. And with this code, I see only the last notification. I made a mistake?

I want to do like this example:

6

Hi,

Depending on what is present in the link in my first reply and the documentation on ionic push notification, it looks like you are doing it well.

Have you found the right way to do it ? If yes, what was your mistake ?

Sorry, I cannot help you any further about this.

7

No, I don’t find… I don’t know how I resolve it.

anyone can help me?

8

I found something very recently that says using “fcm_push_icon” would help. You have to do some manual copying of resources though to make this work…

9

FCM payload how to insert in icon in ionic 4 please help me