Push notification icon in Cordova Android

Question

I'm using Phonegap Push Plugin and when a push notification is shown in the notification area, the icon is just a white square. I would like it to show star.png instead. I tried following the documentation as follows:

I put star.png in www/images, and added the following lines to config.xml

<platform name="android">
  <resource-file src="www/images/star.png" target="res/drawable-xhdpi/star.png" />
  <resource-file src="www/images/star.png" target="res/drawable-hdpi/star.png" />
  <resource-file src="www/images/star.png" target="res/drawable-mdpi/star.png" />
  <resource-file src="www/images/star.png" target="res/drawable-ldpi/star.png" />
</platform>

(I understand that I should use different resolutions, but I'm just trying to get it working now.)

Then when I initialize the plugin, I use:

let push = PushNotification.init({
    android: { senderID: globalData.firebaseSenderID, icon: 'star.png', iconColor: 'blue' },
    ios: {}
});

I also tried icon: 'star'. However the white square persists. How can I get this to work?

Using [email protected] & [email protected].

Answer 1

For Cordova 8, I've set my config.xml file as follow:

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

Then I placed the icons in resources/android/notification/ with these resolutions:

resources/android/notification/icon-mdpi.png     (24 × 24)
resources/android/notification/icon-hdpi.png     (36 × 36)
resources/android/notification/icon-xhdpi.png    (48 × 48)
resources/android/notification/icon-xxhdpi.png   (72 × 72)
resources/android/notification/icon-xxxhdpi.png  (96 × 96)

Afterwards just used when schedulelling the notifications as a property:

smallIcon: 'res://notification',

Answer 2

I've had the same problem with this plugin and the default notification icon (white square). It seems like that icon property in the init() function was only for GCM (Plugin version 1.x). I found a solution to set the icon in the push payload (sent from server). Unfortunately I was not able to change the payload, as it is not our service in this application.

But fortunately firebase has also its own push-icon setting (default: white square icon) which can be replaced with a metadata tag in the AndroidManifest.xml.

Solution

Try this solution by adding the following metadata tag in your AndroidManifest.xml File located at platforms/android/app/src/main/:

<application>
    <!-- ... -->
    <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/star"/>
    <!-- ... -->
</application>

Automation - hook

Run your android application and check if there appears your expected icon. If you're successful you could now extend your project by a cordova hook like we did. For example the following OSX bash script is always adding the above line to the AndroidManifest:

sed -i '' "s|</application>|<meta-data android:name=\"com.google.firebase.messaging.default_notification_icon\" android:resource=\"@drawable/star\"/></application>|1" platforms/android/app/src/main/AndroidManifest.xml