Has anyone actually used FCM - FireBase Cloud Messaging to create device push notifications with interactive action buttons that runs when the app is is background/closed?
The goal is for the user to be able to react to the notification like WhatsApp, Messenger...
The app is cordova so anyone with experience on that would be great.
I have all the FCM setup already done and the backend working.
I already can trigger a simple notification "title+body+icon/message"
According to FCM, the payload can contain the notification section, where the OS will handle the notifications, but nothing is said about it being able to contain buttons. (So it is not that interesting).
However it's possible to use the "data" section with the values key pairs that are sent to the app to generate a local notification with the buttons, on the onMessage callback.
[UPDATE]
The push service with data does not trigger the app to create the local notification if the app was swiped (some brands kill the app when swiped from recent apps - stopping javascript execution). Conclusion: For the FCM data payload message to work, must capture the push broadcast message event (native side) with a service, and then create the notification generation (native way) with buttons based on that data payload. FCM does not support push notifications with buttons.
import { getMessaging, getToken, onMessage } from "firebase/messaging";
import { getDevice } from "framework7/lite-bundle";
function setupPushNotification(getTokenCallBack,onMessageCallBack) {
const device = getDevice();
if (device.cordova) {
FirebasePlugin.getToken((token) => getTokenCallBack(token));
FirebasePlugin.onMessageReceived((message) => {
if (message) {
onMessageCallBack && onMessageCallBack(message);
}
},function(error){
console.error(error);
});
}
}
And then to setup the whole process, creating a local notification object with buttons previously defined:
cordova.plugins.notification.local.addActionGroup('yes-no', [
{ id: 'yes', title: 'Yes', foreground: false },
{ id: 'no', title: 'No', foreground: false }
])
setupPushNotification((deviceToken)=>{
//update device token on backend database
},
(message)=>{
//This is the onMessageReceived message
//Create a local notification for exaple using the local notification cordova plugin
cordova.plugins.notification.local.schedule({
title: "Test Title",
text: "Test Body",
actionGroupId: 'yes-no',
})
})
I'm using these cordova plugins
"cordova-plugin-local-notification": "^0.9.0-beta.2",
"cordova-plugin-firebasex": "^14.2.1"
You can do almost anything with cordova, that any native app does.
Ever tried cordova-plugin-firebase-messaging? I have been able to add a chat reply text box with send button in the notifications.
you can also refer to How to add action buttons to ionic push notifications?
Related
I have an app which subscribes to a topic in Firebase Messaging. (for example the topic is "test").
and with cloud functions I successfully send a notification to all devices subscribed to the "test" topic.
I need when the user taps on the notification to open the app in the main screen.
this is my cloud function:
.document('testdocument/{testdc}')
.onCreate((snapshot, context) => {
return admin.messaging().sendToTopic('test', {
notification: {
title: "APP MON",
body: "Check Mon!!!",
clickAction: 'FLUTTER_NOTIFICATION_CLICK',
},
});
});
am I missing something?
P.S: The notifications show fine (with the Icon of my app and the message I need, they just don't do anything) - also, this is needed only for ANDROID
many thanks in advance.
The correct parameter is click_action.
I am working on Cordova with react Project. I have set up google firebase google-services.json and GoogleService-Info.plist for android and ios. I am using the below package for firebase notifications setup.
https://github.com/andrehtissot/cordova-plugin-fcm-with-dependecy-updated
FCM.requestPushPermission({
ios9Support: {
timeout: 10, // How long it will wait for a decision from the user before returning `false`
interval: 0.3, // How long between each permission verification
},
}).then((wasPermissionGiven) => {
console.log(wasPermissionGiven);
alert(JSON.stringify(wasPermissionGiven));
if (wasPermissionGiven) {
FCM.getAPNSToken().then((apnsToken) => {
alert(JSON.stringify(apnsToken));
console.log(apnsToken);
});
FCM.getToken().then((apnsToken) => {
alert(JSON.stringify(apnsToken));
console.log(apnsToken);
});
FCM.subscribeToTopic('handsome');
const disposables = FCM.onNotification((payload) => {
alert(JSON.stringify(payload.toString()));
console.log('payload', payload);
});
}
});
By using the above code I am getting token and payload. Currently, I am populating the payload with a popup. can someone help me with implementing a notification instead of a popup? I searched a lot in google not found any references to implement notification with Cordova react.
Case 1: Testing app in Background State
Send the notification from firebase cloud messaging and test the APP in background state / minimise the app then you'll see the notification.
Case 2: Testing app in Foreground State
You should use some plugin something similar to this plugin https://github.com/katzer/cordova-plugin-local-notifications#readme to get the firebase notifications While app is in foreground.
i experience pretty weird thing in my android app. In some unknown for me cases sometimes blank notification apperas in notification bar, without any title, body and with default gray color. The only filled thing is icon, which is my default application icon(from manifest).
There is only one place in project when i create notification manually - intent service that sends data via rest api. Notification have his own icon (different than default), color, text, progressbar and works fine when service is running. I have not configured any Cloud Messaging or push notification in this project.
I spent a lot of time and i have no idea why blank notification described above appears. I will be grateful for any hint how to prevent it.
Yes, I am also facing this issue, when the app is closed that time notification will appear like this. I am resolved this issue in server side.
There are two types of messages in FCM (Firebase Cloud Messaging):
Display Messages: These messages trigger the onMessageReceived() callback only when your app is in foreground
Data Messages: Theses messages trigger the onMessageReceived() callback even if your app is in foreground/background/killed
Firebase team have not developed a UI to send data-messages to your devices, yet.
refer this link to achieve
https://fcm.googleapis.com/fcm/send
And the following headers:
Key: Content-Type, Value: application/json
Key: Authorization, Value: key=<your-server-key>
Body using topics:
{
"to": "/topics/my_topic",
"data": {
"my_custom_key" : "my_custom_value",
"other_key" : true
}
}
Or to send it to specific devices:
{
"data": {
"my_custom_key" : "my_custom_value",
"other_key" : true
},
"registration_ids": ["{device-token}","{device2-token}","{device3-token}"]
}
NOTE: Be sure you're not adding JSON key notification
NOTE: To get your server key, you can find it in the firebase console: Your project -> settings -> Project settings -> Cloud messaging -> Server Key
I am developing a meteor app with version meteor version 1.5. I added the raix:push package and its sending notfications as desired. But if more than one notification is sent, the new notification overlaps on the previous one. Whereas I want it to be displayed as an inbox.
I tried using this :
`Push.send({
from: 'appName',
title: 'New notification',
text: 'test',
badge: 12,
gcm: {
style: 'inbox',
summaryText: 'There are many notifications'
},
query: {
userId: user.userId,
}
});`
But it doesn't work. Notifications are sent as per before only.
On checking again, I saw that nothing is being entered in the gcm field of notification collection.
Another thing I noticed is that query is stored as a string whereas gcm is an object. Does that have an affect?
Also, I would like to route to a specific page onCLick on the notification. How to add that?
I am using Firebase Cloud Messaging HTTP Protocol to send push notifications to my application using postman for testing.
I am using the following code to send the push.
{
"notification":{
"title":"Title",
"body":"this is a notification to a specific topic",
"sound":"default",
"click_action":"FCM_PLUGIN_ACTIVITY",
},
"data":{
"action":"ping"
},
"to":"/topics/Topic_1",
"priority":"high"
}
and I am using this code to handle the notification on my app:
FCMPlugin.onNotification(function(data){
console.log(data);
if(data.wasTapped){
//Notification was received on device tray and tapped by the user.
alert('notification tapped'+ JSON.stringify(data) );
}else{
//Notification was received in foreground. Maybe the user needs to be notified.
alert('application is open'+ JSON.stringify(data) );
}
});
it is all working except i cannot get the title and the body to use them in my application, all I am getting is the following:
Object {wasTapped: false, action: "ping"}
I cannot find a way to get the notification title and body.
I know I can copy them to the data section but that's not logical its a dirty workaround
so any idea how to get the notification data?
thank you.
Basing from the behavior shown, I'm presuming that the client platform is Android. If so, then this is working as expected.
When sending a combination of both notification and data in your message payload, the Android System tray will be the one to handle the values in notification. The dirty workaround you mentioned is the only workaround so far -- a workaround that I actually suggested on one of my answers as well.