Can't figure out how to set notification icons

[geoidesic]

Bug Report

There doesn't seem to be any documentation about how to set up Push Notification icons for this plugin, neither for iOS nor Android? Currently my push notifications are coming through with blank icons (not even default Cordova ones).

Expected Behaviour

Push Notification alerts should show a branded icon

Actual Behaviour

Shows blank

Reproduce Scenario (including but not limited to)

I don't know what to put into the config.xml to set the push notification icons.

Steps to Reproduce

Create an app with push notifications. Send and receive a push notification to the device. Note the push notification in the message centre has a blank icon

Platform and Version (eg. Android 5.0 or iOS 9.2.1)

Android build target is 34 iOS build target is 12

(Android) Device Vendor (e.g. Samsung, HTC, Sony...)

Motorola

cordova info Printout

Cordova Packages:

cli: 12.0.0
    common: 5.0.0
    create: 5.0.0
    lib: 12.0.1
        common: 5.0.0
        fetch: 4.0.0
        serve: 4.0.1

Project Installed Platforms:

android: 13.0.0
ios: 7.1.0

Project Installed Plugins:

@havesource/cordova-plugin-push: 4.0.0
cordova-plugin-androidx-adapter: 1.1.3
cordova-plugin-badge: 0.8.9
cordova-plugin-camera: 7.0.0
cordova-plugin-deeplinks: 1.1.1
cordova-plugin-device: 3.0.0
cordova-plugin-dialogs: 2.0.2
cordova-plugin-inappbrowser: 6.0.0
cordova-plugin-keyboard: 1.2.0
cordova-plugin-statusbar: 4.0.0
cordova-plugin-wkwebview-engine: 1.2.2
cordova-plugin-wkwebview-file-xhr: 3.1.1

Environment:

OS: macOS Sonoma 14.5 (23F79) (darwin 23.5.0) arm64
Node: v20.15.1
npm: 10.7.0

android Environment:

android:

[=======================================] 100% Fetch remote repository... Available Android targets:

id: 1 or "android-34" Name: Android API 34, extension level 7 Type: Platform API level: 34 Revision: 3

ios Environment:

xcodebuild:

Xcode 15.4 Build version 15F31d

Project Setting Files:

config.xml:

<?xml version='1.0' encoding='utf-8'?>

Sportch Sportch Sportch Limited

package.json:

--- Start of Cordova JSON Snippet --- { "platforms": [ "browser", "ios", "android" ], "plugins": { "cordova-plugin-wkwebview-file-xhr": {}, "cordova-plugin-badge": {}, "cordova-plugin-camera": {}, "cordova-plugin-deeplinks": {}, "cordova-plugin-device": {}, "cordova-plugin-dialogs": {}, "cordova-plugin-inappbrowser": {}, "cordova-plugin-keyboard": {}, "cordova-plugin-statusbar": {}, "@havesource/cordova-plugin-push": { "IOS_FIREBASE_MESSAGING_VERSION": "~> 8.1.1" }, "cordova-plugin-androidx-adapter": {} } } --- End of Cordova JSON Snippet ---

Sample Push Data Payload

Sample Code that illustrates the problem

Logs taken while reproducing problem

[faugusztin]

Icon configuration is a responsibility of your application, you need to edit the Android manifest. The Firebase documentation states:

<!-- Set custom default icon. This is used when no icon is set for incoming notification messages.
     See README(https://goo.gl/l4GJaQ) for more. -->
<meta-data
    android:name="com.google.firebase.messaging.default_notification_icon"
    android:resource="@drawable/ic_stat_ic_notification" />
<!-- Set color used with incoming notification messages. This is used when no color is set for the incoming
     notification message. See README(https://goo.gl/6BKBk7) for more. -->
<meta-data
    android:name="com.google.firebase.messaging.default_notification_color"
    android:resource="@color/colorAccent" />
<meta-data
    android:name="com.google.firebase.messaging.default_notification_channel_id"
    android:value="@string/default_notification_channel_id" />

So what you want to do is to modify your config.xml for it to modify your AndroidManifest.xml, for example like this:

<config-file parent="/manifest/application" target="app/src/main/AndroidManifest.xml">
  <!-- Set custom default icon. This is used when no icon is set for incoming notification messages.
     See README(https://goo.gl/l4GJaQ) for more. -->
  <meta-data
    android:name="com.google.firebase.messaging.default_notification_icon"
    android:resource="@drawable/ic_stat_ic_notification" />
  <!-- Set color used with incoming notification messages. This is used when no color is set for the incoming
     notification message. See README(https://goo.gl/6BKBk7) for more. -->
  <meta-data
    android:name="com.google.firebase.messaging.default_notification_color"
    android:resource="@color/colorAccent" />
  <meta-data
    android:name="com.google.firebase.messaging.default_notification_channel_id"
    android:value="@string/default_notification_channel_id" />
</config-file>

Of course you need to have those resources in drawable folder for the icon and color and string xml files in values folder.

The steps above set the default icon/color/channel.

Alternatively you can also send icon and color in the firebase message payload, if you send it in every message, you don't have to set the defaults. Just provide the icons in the drawable folder and use their name in the paylaod; colors in the FCM payload are in #rrggbb format, so no need to put them in colors.xml file.

[lordStrider]

The white square is because currently, starting with Android 12, icons need to have a completely transparent area. On IOS until today I couldn't even receive notifications, if you can, can you explain to me how because for me it doesn't even generate the firebase ID.

[igorsantos07]

I'm doing a late migration from GCM to FCM payloads on Pubnub, and to get the notification icon back, we had to add the drawable reference at the push payload here. Otherwise, Android was showing the app icon in the status bar - colored and all, at least in Android 14.

Also, this could be a dupe of #214?