CODEWITHSUNDEEP
androidionic-frameworkpush-notificationionic2cordova-plugins
user1188867
user1188867

Reputation: 3978

Icon is not displaying in push notifications in ionic 2

I am trying to display app icon in notification. But it is displaying blank icon.

I have given pushoptions as below:

 const options: PushOptions = {
      android: {
        titleKey: 'App',
        sound: 'true',
        icon: 'res/drawable/notification_icon',
        topics: ['MyTopic']
      },
      ios: {
        alert: 'true',
        badge: false,
        sound: 'true'
      },
      windows: {}
    };

and copied the icon image as below which has resolution of 40*40px.

<resource-file src="resources/notification_icon.png" target="res/drawable/notification_icon.png" />

Is there anything that I am missing? enter image description here

Update:

I followed this link : https://github.com/ionic-team/ionic-cli/issues/608 and tried it by copying all the notification icon under resources/android/notification/drawable-XYZ/ic_stat_ac_unit.png to res/drawable-XYZ/ic_stat_ac_unit.png using the following statements:

<resource-file src="resources/android/notification/drawable-hdpi/ic_stat_ac_unit.png" target="res/drawable-hdpi/ic_stat_ac_unit.png" />
        <resource-file src="resources/android/notification/drawable-mdpi/ic_stat_ac_unit.png" target="res/drawable-mdpi/ic_stat_ac_unit.png" />
        <resource-file src="resources/android/notification/drawable-xhdpi/ic_stat_ac_unit.png" target="res/drawable-xhdpi/ic_stat_ac_unit.png" />
        <resource-file src="resources/android/notification/drawable-xxhdpi/ic_stat_ac_unit.png" target="res/drawable-xxhdpi/ic_stat_ac_unit.png" />
        <resource-file src="resources/android/notification/drawable-xxxhdpi/ic_stat_ac_unit.png" target="res/drawable-xxxhdpi/ic_stat_ac_unit.png" />

and modified PushOptions in app.component.ts to :

android: {
    titleKey: 'App',
    sound: true,
    vibrate:true,
    icon: 'ic_stat_ac_unit',
    iconColor:'#343434',
    topics: ['MyTopic']
  }

Even this did not worked - Same Issue.

Upvotes: 4

Views: 5055

Answers (3)

user1188867
user1188867

Reputation: 3978

I used the ionic fcm plugin to fix the issue. I just replaced cordova push plugin with Cordova fcm plugin icon displayed. I wasted a lot of time on push plugin.I hope this answer helps others.

Please refer to below links for more information :

https://ionicframework.com/docs/native/fcm/

https://github.com/fechanique/cordova-plugin-fcm

Upvotes: 1

Sejal Baraiya
Sejal Baraiya

Reputation: 238

I think you get your answer from below link:

https://stackoverflow.com/a/30795471/7329597

I hope it helps you.:)

Upvotes: 1

Tummala Krishna Kishore
Tummala Krishna Kishore

Reputation: 8271

it is probably of not setting the alpha channel on the icon in the shape you want to display. Android 5.0+ adds a white mask to all small notification icons. you can be using the Android Asset Studio to create the icon set as it will show you how it will look on the device to make sure you have it correct.

In Android 5.0+, push notification icon has to be two-color: transparent background + white foreground; otherwise the default app icon is taken, and anything non-transparent is displayed as white (so very likely, the user will see a white)

Upvotes: 2

Related Questions