Custom icon & sound for FCM AIR Native Extension
FCM (Firebase Cloud Messaging) is one of the coolest features in the Firebase ANE collection because it gives you the power to reach out to your users easily to let them know about your app’s latest news. In our former blog we talked about how you can send FCM messages from your server by simulating that with a software which you could install on your computer and send FCM messages. In this post however, I am going to tell you how you can send notifications with customized icons and sounds using our Firebase FCM AIR Native Extension. I am going to presume that you have already read our other blog or you are familiar with how you can send FCM from your server.
Inject your resources into firebaseMessaging.ane
Download and install the ANELAB software then open the “Resource Manager” window. You will use this software to inject icons and sound files you’d like to use with the FCM ANE.
Drag the firebaseMessaging.ane into it.
Your custom icons must be inside the drawable folder. To do that, simply click on the (+) sign to create a new folder. Then right click on the newly created folder and rename it to “drawable”. Now select this folder and drag/drop all your custom icons into it.
When you are done with adding all your custom icons, create a new resource folder again but this time rename the folder to “raw”. Firebase expects sound files for FCM to be present inside the raw folder.
When you’re done, click the “Package New ANE” button and save your new ANE. From now on, you must use this new ANE in your project.
Send FCM while using your resources
Now, send an FCM message like below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
{ "notification": { "title": "FCM-MIX", "text": "Your Text", "icon": "myicon", "sound": "mysound", "badge": "5", "color": "#FF9900", "click_action": "MY_INTENT" }, "data": { "key": "value" }, "priority" : "high", "registration_ids" : [ "fEdNHsoBxrg:APA91bEXwfb5Z7JRjYNC_b", "dEZAP2CJVCI:APA91bF4rPPGPTlvHlF_wq" ] } |
Notice that we have included “icon”:”myicon” and “sound”:”mysound” without any file extension. When the FCM arrives to your device, you will see that your icon is shown with the tint color specified with “color”: “#FF9900”.
Managing the Sound
You may use .mp3 .ogg or .wav files for the Android side but you must address them without the file exception. On the iOS side however, the first thing you should know is that you need to convert your audio files to .caf format and then package the .caf files in your AIR app (NOT inside the ANE). You need to place the .caf files at the root of your project accessible from File.applicationDirectory . When you do that, you can easily send FCM messages, targeting your custom sound files. unlike the Android side, you must include the file extension in your FCM message: mysound.caf
Starting Android 8+ notifications won’t show unless you have created NotificationChannels in your app. Creating a notification channel is easy and we have sample codes for it in our FCM, OneSignal and LocalNotification ANEs. When you create NotificationChannels, you must pass the channel ID inside your FCM message.
To know how to convert audio files to caf format, you need a Mac device. Read here for more information: http://stackoverflow.com/a/255151/247658
Enjoy building AIR Apps 🙂
MyFlashLabs Team