New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changing push notification icon - blank android icon issue in 2018 #764

Closed
madsheep opened this Issue Jul 6, 2018 · 6 comments

Comments

Projects
None yet
5 participants
@madsheep
Copy link

madsheep commented Jul 6, 2018

Hi everybody,

For people using this plugin with cordova 8+ you might find that changing your notification icon wont work and you hit the old 'notification icon is blank square' issue on android. This happens because android notification icons have to be simple 1 color shape on transparent background and if you haven't provided such icon android will use application icon instead. Those are most likely a full and colourful squares without any transparent background.

This is very annoying when setting new Ionic 3 project and trying to use this plugin.

Readme here atm does not describe process of changing your icon correctly. Here are the steps you need to take to change the icon:

  1. Stop googling around and pulling your hair out. Follow this instruction step by step and you will get it to work, trust me.
  2. Prepare version of your application icon that is only a 1 color shape on transparent background
  3. Go here: http://romannurik.github.io/AndroidAssetStudio/icons-notification.html#source.type=clipart&source.clipart=ac_unit&source.space.trim=1&source.space.pad=0&name=notification_icon press "image" on top left, upload your icon, trim it/add padding if need be
  4. If it looks good press arrow in top right to download the 'drawable' folders. It will give you a zip with res folder inside and 5 drawable-xxx folders each one with different size of your icon
  5. Copy those drawable folders somewhere into your project. For me I copied them next to icon and splash screen resources: project-root/resources/android/notification_icon
  6. Configure your config.xml file to copy those files inside your android app using <resource-file /> directive. Note that since crodova 8.x the correct target path is app/src/main/res. On cordova < 8 it was just res (as previously the resource files were kept in platforms/android/res directory and now they are in platforms/android/app/main/res). Most of the 'solved' issues online on blank android notification icon do not mention that.
<platform name="android">
(...) 
  <resource-file src="resources/android/notification_icon/drawable-mdpi/notification_icon.png" target="app/src/main/res/drawable-mdpi/notification_icon.png" />
  <resource-file src="resources/android/notification_icon/drawable-hdpi/notification_icon.png" target="app/src/main/res/drawable-hdpi/notification_icon.png" />
  <resource-file src="resources/android/notification_icon/drawable-xhdpi/notification_icon.png" target="app/src/main/res/drawable-xhdpi/notification_icon.png" />
  <resource-file src="resources/android/notification_icon/drawable-xxhdpi/notification_icon.png" target="app/src/main/res/drawable-xxhdpi/notification_icon.png" />
  <resource-file src="resources/android/notification_icon/drawable-xxxhdpi/notification_icon.png" target="app/src/main/res/drawable-xxxhdpi/notification_icon.png" />
</platform>
  1. Now that you have your icon in the application as drawable resource you need to force your application to use it. Regardless of what's written in readme here automatic discovery of drawable resource called 'notification_icon' did not work for me. I'm not exactly sure why because it seems to be in the codebase here: https://github.com/arnesson/cordova-plugin-firebase/blob/master/src/android/FirebasePluginMessagingService.java#L140 but I'm guessing there is something changed with resource discovery on latest versions of android.
  2. Because of that the only other solution I could use was sending icon parameter from the backend when sending push notification to firebase. Note that their api is probably undergoing some changes because it has issues with correctly merging the notification and android parts of the payload. For that reason you have to add the icon param to the notification part of the json. Using android specfic params wont work.

So notification payload that you send to firebase from your backend has to look somewhat like this: THIS IS THE ONLY VERSION THAT WORKS

{
  notification: {
    body: 'Imma push your notification if you know what i mean!',
    icon: 'notification_icon',
  },
  data: { someExtraData: 'goes_here' }
}

Let me reiterate - USING ANDROID SPECIFIC PARAMS DOES NOT WORK WITH FIREBASE AS OF July 2018 - BELOW WONT WORK AND YOUR NOTIFICATION ICON WONT CHANGE REGARDLESS OF WHAT THEIR DOCUMENTATION SAYS:

{
  notification: {
    body: 'Imma push your notification if you know what i mean!'
  },
  data: { someExtraData: 'goes_here_if_you_need_it' },
  android: { 
    icon: 'notification_icon'
  } 
}
  1. With all steps completed you are now ready to test your new icon. I strongly suggest testing it inside android emulator - some of the android skins take over the notification bar and use application icon regardless of what you set (i.e. MIUI from xiaomi). I've also found sometimes the icons get cached. For that reason testing it in simulator on freshly created AVD is your safest bet. Remove your app manually in between the test runs and restart the simluator / device to avoid caching issues.

I hope this long write up will help others in the future, as the amount of hurdle one has to go through to change small 10x10 icon is simply to damn high...

@madsheep madsheep changed the title Changing push notification icon - blank android icon issue Changing push notification icon - blank android icon issue in 2018 Jul 6, 2018

@guilhermehtk

This comment has been minimized.

Copy link

guilhermehtk commented Jul 13, 2018

Please test if this code added to config.xml <platform name="android"> tag will add the icon as default notification icon.

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

This works for me sending by Firebase Cloud Messaging panel or back-end with no icon on payload.
Please post here the feedback.
If it works, your tutorial added to this code will help a lot of people and should open a PR to add it to the README.

@devHamza

This comment has been minimized.

Copy link

devHamza commented Jul 23, 2018

Thank you @madsheep !! you saved my life !!

@davidavdav

This comment has been minimized.

Copy link

davidavdav commented Jul 30, 2018

Hi, thanks for the moral support, and giving me the feeling that I am not the only one who ended up in this mess. However, unfortunately, I gravitated back to pre-step 0, losing hair on the way.

When I try to send the notification through the http/post method, I get errors from the firebase api that the json is invalid. I've tried both ways:

This is what I get when including the icon asmessage: { notification: { icon: 'notification_icon', ... }, ... }

Error code=400, message=Invalid JSON payload received. Unknown name "icon" at 'message.notification': Cannot find field., status=INVALID_ARGUMENT, details=[@type=type.googleapis.com/google.rpc.BadRequest, fieldViolations=[field=message.notification, description=Invalid JSON payload received. Unknown name "icon" at 'message.notification': Cannot find field.]]

This is the message I get when including the icon asmessage: { android: { icon: 'notification_icon' }, ... }

Error code=400, message=Invalid JSON payload received. Unknown name "icon" at 'message.android': Cannot find field., status=INVALID_ARGUMENT, details=[@type=type.googleapis.com/google.rpc.BadRequest, fieldViolations=[field=message.android, description=Invalid JSON payload received. Unknown name "icon" at 'message.android': Cannot find field.]]

but maybe I am using this in the wrong context (our backend cloud code sending a notification to client apps using firebase cloud messaging).

@devHamza

This comment has been minimized.

Copy link

devHamza commented Jul 31, 2018

this worked fine for me (I send notifications using firebase functions) :
const payload = { notification: { title: ........, body: ........., icon: 'notification_icon' } };

@davidavdav

This comment has been minimized.

Copy link

davidavdav commented Jul 31, 2018

Thanks, that results in the first of the two errors for me. I am using the REST service via a javascript / request library, and send according to the format https://firebase.google.com/docs/cloud-messaging/js/first-message . I suppose the message/notification format is described in https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages#Notification .

In fact, when I read this, this suggest that the icon should be in message.android.notification.icon, i.e., one level deeper.

I just tried, and this actually works for me! So I suppose it depends on serverprotocol how the payload should be structured...

Thanks, everyone, for this discussion. It has finally resulted in me stopping pulling my hair out...

@soumak77

This comment has been minimized.

Copy link
Collaborator

soumak77 commented Aug 30, 2018

closing as resolved

@soumak77 soumak77 closed this Aug 30, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment