I am sending a push notification using firebase endpoint. It is working successfully. I am using postman to send the request to FCM. My issue is I do not understand how to send a large icon with it.
FCM has two types of payloads you can send. Data payloads and notification payloads. See here. I'm focusing on notification payloads. How do I specify a local large icon to show ? I know I can specify a default notification icon in the manifest this way using metadata:
<meta-data
android:name="com.google.firebase.messaging.default_notification_icon"
android:resource="#drawable/mylogo" />
<meta-data
android:name="com.google.firebase.messaging.default_notification_color"
android:resource="#color/mycolor" />
But this is for a small icon. How do I specify LARGE icon I'd like to use ?
In the documentation I provided above for FCM, there is a example that looks like this:
{
"to" : "bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
"notification" : {
"body" : "great match!",
"title" : "Portugal vs. Denmark",
"icon" : "myicon"
}
}
but this is for small icon. how to do large icon?
A large icon looks like this:
FCM doesn't have an API to set a large-icon.
If you want to achieve that you can send a data-message with custom payload, and create your own local notification inside onMessageReceived()
Related
I am using PushNotifications Capacitor plugin and FCM to send the notifications, everything works fine until I want to send a Push Notification with both notification and data fields on Android.
What I want to do is to send a custom data with the notification and consume the notification on app resume. I am using PushNotifications.getDeliveredNotifications() method to get the notifications on resume, on iOS I get all the notifications with proper data, but on Android data property is replaced with the object below:
{
body: "My Body",
data: {
android.appInfo: "ApplicationInfo{809371c app}",
android.bigText: "My Body",
android.progress: 0,
android.progressIndeterminate: false,
android.progressMax: 0,
android.reduced.images: true,
android.showChronometer: false,
android.showWhen: true,
android.template: "android.app.Notification$BigTextStyle",
android.text: "My Body",
android.title: "My Title",
gameDndOn: false,
specialType: "",
topFullscreen: false,
groupSummary: false,
id: 0,
title: "My Title"
}
}
I see in the FCM docs for Android apps that if both notification and data fields are present and the app is in the background the notification lands in the system tray and data in extras of the intent.
I am getting proper data when I tap on the notification, but in my case I want to get that on resume, without tapping on the notification.
Is there any way to get to that data in that case?
You have to create the message in this format
{
"message":{
"token":"bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
"notification":{
"title":"Portugal vs. Denmark",
"body":"great match!"
},
"data" : {
"Nick" : "Mario",
"Room" : "PortugalVSDenmark"
}
}
}
Note : notification structure is critical for receiving a notification. You need to have title and body. This gets displayed in the notification drawer.
data can be customized as per your requirement. This will have the data that you need inside your app.
Suggestion, keep your payload small. Send data which is absolutely necessary and also safe to send over FCM.
Look at this part of the official documentation
For handling push notifications in capacitor, you should use the listeners. Here is the official docs way of doing it.
I am sending notification and handle notification FirebaseMessagingService.
But if app on background FirebaseMessagingService cannot handle notification and not show image.
How can I do this? (If the application is in the foreground, the picture is shown in the notification.)
And if I use onesignal image showing all times.
{
"to" :"4sQrChOF16uMYYEKeiRz6dzCnN3m9OCE9jwOyPBOD92IlzljWvQ_1quiYyluP",
"notification" : {
"body" : "great match!",
"title" : "Portugal vs. Denmark",
"icon" : "myicon"
},
"data": {
"body" : "great match!",
"title" : "Portugal vs. Denmark2222",
"img_url" : "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRYJ_0NZFg0htNXwmKkyTv76bw05EacXaXNnqd4ZrPB7wVTXNxR"
}
}
Here are 2 ways you can show an image in your notification consistently:
[Recommended approach] - Using the newer HTTP V1 API of FCM:
Here you can give an image URL as part of the notification payload and firebase will handle downloading and displaying the image for you. Here's the documentation link for the same.
Using the older legacy API of FCM:
Send a data-only payload(Don't send the notification object at all). Include image URL as part of the data payload. This will give you control in the onMessageReceived method(in both foreground and background cases). Here you can generate and display the notification however you like it. Retrieve the image URL here and download the image and create a notification with the image or however you want it to be rendered.
I'm using com.google.firebase:firebase-messaging:20.0.0 on Android. When I try sending a notification like the one below it always shows the normal title and body instead of title_loc_key and body_loc_key when they are presented in the app! The fun thing is that it's not the case in iOS. In iOS it will always try to first show the localized resources and if it couldn't find them, it will default to normal ones.
{
"to" : "f6_numko7IQ:APA91bFrTN0fmThFDeAFy2...",
"collapse_key" : "type_a",
"notification" : {
"title_loc_key": "resource_name_1",
"body_loc_key": "resource_name_2",
"title": "Default Title",
"body": "Default Body!"
}
}
Is this a known issue? Is there a get around for it?
The solution is to remove the "title" and "body" entries. I know it should work like on iOS but currently it's not.
{
"to" : "f6_numko7IQ:APA91bFrTN0fmThFDeAFy2...",
"collapse_key" : "type_a",
"notification" : {
"title_loc_key": "resource_name_1",
"body_loc_key": "resource_name_2",
}
}
For Android: Using the "v1" api from firebase remove "title" and "body" from root "notification: {....}" and add into the "android": {
"notification": {
"title_loc_key": "push_notification_title",
"body_loc_key": "push_notification_body"
}
},", should work.
But you need to keep in mind the following:
The push notification will be displayed by default by firebase SDK based on the com.google.firebase.MESSAGING_EVENT, when the app is in the background --> opened (the process is in the background) and Notification permission is allowed. Also, you need to be sure that your app has already a channel created with the default_channel_id you defined in the manifest file. For this case, you will not be notified of the onMessageReceived callback provided by "FirebaseMessagingService".
When the app is in the foreground you will not receive any firebase notification, visible on the screen. Based on the Channel you have created at point 1) you need to trigger the notification display if required, by creating a NotificationBuilder .... and displaying it. This catch must happen inside the: onMessageReceived callback provided by "FirebaseMessagingService"
When the app is closed and notification is allowed the push notification will be displayed by default by firebase SDK based on the com.google.firebase.MESSAGING_EVENT. However, if the notification received by the device contains some data: {} payload that can be handled into the onCreate lifecycle method from activity by accessing the this.intent.extras. You will not be notified of the onMessageReceived callback provided by "FirebaseMessagingService".
If notification is disabled you will not get any push notification displayed visually but when the app is in the foreground you will be notified into the onMessageReceived callback provided by "FirebaseMessagingService". When the app is closed or in the background, you will get nothing.
I'm using Firebase Cloud Messaging to send messages to my angular webapp. Sending and receiving messages works fine. The notification looks as follows:
I have the problem that I haven't found a way yet to display a larger icon and to set the text color to anything else than black. I would like to have it as in the row above.
I send the following json to firebase:
{
"notification":
{
"title": "POSTMAN",
"body": "Message from postman",
"icon": "https://placeimg.com/250/250/nature",
"click_action" : "https://angularfirebase.com"
},
"to" : "fMhxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxwZ9"
}
With the Urban airship's library, I was able to implement the push notification ok. Which will trigger the onReceive() method every time I send push a message from a server.
But when I switch to use PushRich notification, whenever I send out a rich message, it won't triiger the onReceive() method.
I want to be able to achieve the same way it dose with the push notification in here.
I tried the richpush simple code from the website, but it seems to be having the same problem.
The fact that I think its possible its because from the sample code onReceive() method has the following code in it.
// Ignore any non rich push notifications
if (!RichPushManager.isRichPushMessage(intent.getExtras())) {
return;
}
Would it mean, it should send intent when we send rich push from server ?
Problem has been solved. After more digging into the Urban airship library. The rich message that contains HTML is actually be put into part of the push message JSON object.
Looks like such in a simple push message
{
"audience" : { "tag" : [ "tag1", "tag2" ] },
"device_types" : [ "ios" ],
"notification" : { "alert" : "New message!" },
"message" : {
"title" : "Message title",
"body" : "<Your message here>",
"content_type" : "text/html"
}
}
The "message" object is actually the Rich message itself. So therefore, catching the intent for a simple push message can from then determine if a rich message exist in the intent.