Phonegap Build , using Firebase, notification icon is just white/grey square

Question

Lots of people have been asking about this issue but all the solutions now seem to be outdated. I tried all the solutions but it's still not working for me using Phongap Build CLI9.0.0, Firebase Cloud for push notifications and phonegap-plugin-push 2.1.3.

I can add icons to my app with no problem. The correct logo is shown as expected when installing and loading the app up. However when I receive a push notification the icon in the tray area is just a white/grey square.

So far here's what I've tried:

My icon is a white circle with a transparent background. It is called notification_icon.png. I have made 6 different sized versions to meet the ldpi, hdpi etc requirements. I have added the icon name to the push notification init like so...

    var push = PushNotification.init({
        android: {
          senderID: senderId,  
          iconColor: "#e73439",
          alert: true,
          badge: true,
          icon: 'notification_icon',
          sound: true,
          vibrate: true,
        },
        ios: {
          senderID: senderId,  
          iconColor: '#e73439',
          alert: true,
          badge: true,
          icon: 'notification_icon',
          sound: true,
          vibration: true,
        },
        windows: {}
      });

I have added all variants of the icon to my config.xml like so (the first 6 are my logo icons, not the notification icon)...

<platform name="android">           
    <icon density="ldpi" src="icons/android/icon36x36.png" />
    <icon density="mdpi" src="icons/android/icon48x48.png" />
    <icon density="hdpi" src="icons/android/icon72x72.png" />
    <icon density="xhdpi" src="icons/android/icon96x96.png" />
    <icon density="xxhdpi" src="icons/android/icon144x144.png" />
    <icon density="xxxhdpi" src="icons/android/icon192x192.png" />
    <icon src="icons/notification_icon96x96.png" target="res/drawable/notification_icon.png" />
    <icon density="ldpi" src="icons/notification_icon36x36.png" target="res/drawable-ldpi/notification_icon.png" />
    <icon density="mdpi" src="icons/notification_icon48x48.png" target="res/drawable-mdpi/notification_icon.png" />
    <icon density="hdpi" src="icons/notification_icon72x72.png" target="res/drawable-hdpi/notification_icon.png" />
    <icon density="xhdpi" src="icons/notification_icon96x96.png" target="res/drawable-xhdpi/notification_icon.png" />
    <icon density="xxhdpi" src="icons/notification_icon144x144.png" target="res/drawable-xxhdpi/notification_icon.png" />
    <icon density="xxxhdpi" src="icons/notification_icon192x192.png" target="res/drawable-xxxhdpi/notification_icon.png" />
</platform>   

I even tried adding the icon to the FCM payload like so...

        $notification = array
            (
                'body'   => $message,
                'title'     => $titlenotification,
                "icon" =>  'notification_icon',
                "content_available" => "1",         
                "image"            => "push_notification"  ,
                "icon"            => "push_notification"  ,
                "color"            => "#e73439"  ,

            );
        $data = array
            (
                "title"             => $titlenotification,  
                "message"           => $message, 
                "content_available" => "1",
            );
        $fields = array
            (
                'registration_ids'  => $registrationtokens,
                'notification'      => $notification,            
                'data'                => $data,                         
                "priority"            => "high",
                "content_available"   => true,
            );
        ....etc

I am using Phponegap build to compile so I can't edit any other xml parts, just config.xml.

the only way I have had it work so far is if I removed my other logo icons and just use the notification icon - but then the notification icon is displayed as the main icon too.

I thought that perhaps just the smaller icons would be used as the notification icons so I tried using the notification icon for the ldpi, mdpi and hdpi and the main logo for the xhdpi, xxhdpi and xxxhdpi but no matter what I try the result is either the notification_icon works but it is also used as the logo when loading up the App, or the notification icon is ignored, the logo is used as the loading up icon and the white/grey square is used for the notification icon.

Can anyone help?

Answer 1

I've figured it out. The solution took far too long to find, but in essence it is really simple. To help anybody else with the same issue (it's 2019, Android target SDK is 28), using Phonegap Build 2, Phonegap cli-9.0.0, and using Firebase (FCM) push notification:

1) Remove your custom notification icon from the PushNotification.init javascript. You should only be adding your senderID there. The rest is now handled by your push payload

2) In your payload (I'm using my own PHP notification sender, following the Firebase API info), under the "notification" parameter add your custom icon name:

            $notification = array
            (
                'body'   => $message,
                'title'     => $titlenotification,
                "icon"              =>  'notification_icon',
                "content_available" => "1",         
                "iconColor"        => "#e73439",
            );

3) Ensure your icon is a white shape with a transparent background. Save as png. Make sure the name exactly matches your "icon" value. In this case: notification_icon.png

4) Create all density versions of your icon. You can do this by going here: https://romannurik.github.io/AndroidAssetStudio/index.html ....this will create all necessary sizes.

5) Save your icons in their respective folders (eg. /drawable-mdpi/notification_icon.png). Put these folders in the following place locally:

/your-project-folder/www/locales

6) in your config.xml add the following lines (assuming notification_icon.png is the name of your image)

  <platform name="android">          

    <resource-file src="locales/android/notification_icon.png" target="app/src/main/res/drawable/notification_icon.png" />
    <resource-file src="locales/android/drawable-mdpi/notification_icon.png" target="app/src/main/res/drawable-mdpi/notification_icon.png" />
    <resource-file src="locales/android/drawable-hdpi/notification_icon.png" target="app/src/main/res/drawable-hdpi/notification_icon.png" />
    <resource-file src="locales/android/drawable-xhdpi/notification_icon.png" target="app/src/main/res/drawable-xhdpi/notification_icon.png" />
    <resource-file src="locales/android/drawable-xxhdpi/notification_icon.png" target="app/src/main/res/drawable-xxhdpi/notification_icon.png" />


    <!-- Configure Firebase -->
    <config-file parent="/manifest/application" target="AndroidManifest.xml">
        <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/notification_icon" />
    </config-file>

</platform>   

...note the target values, and the extra config-file bit at the end. Very important parts.

This works for me on Android 6,7,8 and 9. Ios notifcation icons are a mystery to me, I don't think Phonegap currently supports this but, whatever, it works on Android.

More info can be found here: https://arnesson.github.io/cordova-plugin-firebase/docs/NOTIFICATIONS.html