Push notification icon - Onesignal

Question

I’m using Onesignal to send push notifications to an application in Cordova that I’m developing.

Notifications are sent correctly, but I’m unable to change the notification icon. There is only an icon of a "bell" that is standard of Onesignal.

I followed the official documentation to customize the icon (https://documentation.onesignal.com/docs/customize-notification-icons) and it still didn’t work, creating the icons in the folders:

project-root/platforms/android/res/drawable-mdpi/ic_stat_onesignal_default.png (24x24)
project-root/platforms/android/res/drawable-hdpi/ic_stat_onesignal_default.png (36x36)
project-root/platforms/android/res/drawable-xdpi/ic_stat_onesignal_default.png (48x48)
project-root/platforms/android/res/drawable-xxdpi/ic_stat_onesignal_default.png (72x72)
project-root/platforms/android/res/drawable-xxxdpi/ic_stat_onesignal_default.png (96x96)

Someone knows what I’m doing wrong?

Answer 1

After a very long week I managed to solve this ONESIGNAL pie

1º Forget the method of the IONIC site, the code te a hole in this IF

if (fs.existsSync(srcfile) && fs.existsSync(destdir))

Fs.existsSync(destdir) returns false, as the folder does not exist in the root folder (/). To see the error just insert some console.log into the code and analyze what is being done.

2nd Take as a basis the installation of IONIC Cloud Build within the Onesignal documentation for changing the default icon (link)

3º Understand how the config.xml RESOURCE-FILE works, which belongs to the APACHE CORDOVA architecture (https://cordova.apache.org/docs/en/latest/plugin_ref/spec.html#Resource-file)

fourth After you generate the icon folder with the correct names and save them within your project in some specific folder and understand all the previous steps, you can paste this code into your CONFIG.XML

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

Completion: from what I understand there has been a change in the architecture of res/ file generation within the IONIC platform, thus generating a disagreement between the documentations. And also, we can conclude that IONIC is partly to blame because the HOOK type code within the documentation does not work in version v1. (I do not know if also Buga in v1 and v3)

Answer 2

I also went through the same problem, watched and read various materials on the internet that seemed to get more and more complicated, and it’s not. Well, I used the program Paint 3D, but you can use others also since give to change the image. Is the following. Fill all white icon and leave with transparent background.

-Select the image you want to icon.

-Open with Paint 3D.

-Use the Magic Selection to cut the image, be cautious because and this hack will set the shape of your icon. -After the cut is done go to >Screen, and check the option "Transparent Screen".

-Select the crop and drag out of the image, then pass the eraser on the background of the image leaving all transparent.

-After leaving the background of the image completely transparent, drag your crop back inside the image, and fill it all in white.

-When you finish filling you will see that you have created your icon, now and just adjust.

*crop the image in square format, the ideal and 72px 72px.

*Make sure you didn’t get too big edges as this affects the size of the icon.

-Now save the image, JPG or PNG format.

Now test, create a test notification and place your icon in "Badge" (Badge).

See how your icon looks.

NOTE: Depending on the version of your Android and Chrome will not appear the icon, keep both updated.

So this, I hope I’ve helped.