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:

Sportch Sportch Sportch Limited

<platform name="android">
    <!-- splash screen -->
    <resource-file src="res/screen/android/sportch_v12.xml" target="app/src/main/res/drawable/sportch_v12.xml" />
    <preference name="AndroidWindowSplashScreenAnimatedIcon" value="res/screen/android/sportch_v12.xml" />

    <!-- adaptive app launch icons -->
    <icon
        foreground="res/icon/android/white/foreground_medium.xml"
        background="res/icon/android/white/background.xml"
        density="ldpi"
        src="res/icon/android/white/fallback_ldpi.png"
        monochrome="res/icon/android/monochrome.xml"
    />
    <icon
        foreground="res/icon/android/white/foreground_medium.xml"
        background="res/icon/android/white/background.xml"
        density="mdpi"
        src="res/icon/android/white/fallback_mdpi.png"
        monochrome="res/icon/android/monochrome.xml"
    />
    <icon
        foreground="res/icon/android/white/foreground_medium.xml"
        background="res/icon/android/white/background.xml"
        density="hdpi"
        src="res/icon/android/white/fallback_hdpi.png"
        monochrome="res/icon/android/monochrome.xml"
    />
    <icon
        foreground="res/icon/android/white/foreground_medium.xml"
        background="res/icon/android/white/background.xml"
        density="xhdpi"
        src="res/icon/android/white/fallback_xhdpi.png"
        monochrome="res/icon/android/monochrome.xml"
    />
    <icon
        foreground="res/icon/android/white/foreground_medium.xml"
        background="res/icon/android/white/background.xml"
        density="xxhdpi"
        src="res/icon/android/white/fallback_xxhdpi.png"
        monochrome="res/icon/android/monochrome.xml"
    />
    <icon
        foreground="res/icon/android/white/foreground_medium.xml"
        background="res/icon/android/white/background.xml"
        density="xxxhdpi"
        src="res/icon/android/white/fallback_xxxhdpi.png"
        monochrome="res/icon/android/monochrome.xml"
    />

    <!-- push notification icons-->
    <resource-file src="res/icon/android/white/fallback_mdpi.png" target="app/src/main/res/drawable-mdpi/app_notify.png" />
    <resource-file src="res/icon/android/white/fallback_hdpi.png" target="app/src/main/res/drawable-hdpi/app_notify.png" />
    <resource-file src="res/icon/android/white/fallback_xhdpi.png" target="app/src/main/res/drawable-xhdpi/app_notify.png" />
    <resource-file src="res/icon/android/white/fallback_xxhdpi.png" target="app/src/main/res/drawable-xxhdpi/app_notify.png" />
    <resource-file src="res/icon/android/white/fallback_xxxhdpi.png" target="app/src/main/res/drawable-xxxhdpi/app_notify.png" />

    <!-- build config -->
    <resource-file src="google-services.json" target="/app/google-services.json" />
    <resource-file src="firebase-service-account-pvt-key.json" target="app/src/main/assets/firebase-service-account-pvt-key.json" />
    <preference name="android-targetSdkVersion" value="34" />
    <plugin name="@havesource/cordova-plugin-push" spec="3.0.0">
        <variable name="SENDER_ID" value="redacted" />
    </plugin>
    <preference name="AndroidInsecureFileModeEnabled" value="true" />

    <!-- allow app store access -->
    <allow-intent href="market:*" />

    <!-- enable debugging -->
    <preference name="EnableWebViewDebugging" value="true" />

</platform>

<!-- Rest of the config.xml content remains unchanged -->
<platform name="ios">
    <preference name="deployment-target" value="12.0" />
    <preference name="AllowInlineMediaPlayback" value="true" />
    <preference name="MediaTypesRequiringUserActionForPlayback" value="true" />
    <preference name="AllowInlineMediaPlayback" value="true" />
    <allow-navigation href="*://*.youtube.com/*" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="SplashShowOnlyFirstTime" value="true" />
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
    <feature name="CDVWKWebViewEngine">
        <param name="ios-package" value="CDVWKWebViewEngine" />
    </feature>
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
    <preference name="WKWebViewOnly" value="true" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarBackgroundColor" value="#000" />
    <preference name="StatusBarBackgroundColorByHexString" value="#000000" />
    <preference name="StatusBarStyle" value="lightcontent" />
</platform>
<universal-links>
    <ios-team-id value="SX2RZYWHFX" />
    <host name="dev.sportch.co.uk" scheme="https">
        <path url="/hook" />
        <path url="/hook/" />
        <path url="/hook/*" />
    </host>
    <host name="uat.sportch.co.uk" scheme="https">
        <path url="/hook" />
        <path url="/hook/" />
        <path url="/hook/*" />
    </host>
    <host name="app.sportch.co.uk" scheme="https">
        <path url="/hook" />
        <path url="/hook/" />
        <path url="/hook/*" />
    </host>
</universal-links>
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
    <application android:usesCleartextTraffic="true" />
</edit-config>
<engine name="browser" spec="^5.0.4" />

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?