I want to show notification counter on my app icon. I need to do it for both iOS and Android. Also counter must update when App is killed(not running) or when running in background. I am using firebase push notifications.
If I consider using common counter then I can use FirebaseMessaging.configure onMessage event to decrease the counter value, but how to increase the value of the same counter (how will I know that notification is received).
flutter_app_badger 1.1.2 description showing increasing and decreasing counter value on button press, how can I listen to notification and handle counter?
Below is my Message Payload
var tokens = [];
var payload = {
"notification": {
"title": "Contest Won! " + contestActivityFeedData.contestname,
"body": "You Have Won " + contestActivityFeedData.amount,
"click_action": "FLUTTER_NOTIFICATION_CLICK",
},
"data": {
"contestid": contestActivityFeedData.contestid,
"contestname": contestActivityFeedData.contestname,
"notificationtype": 'contest_won'
},
}
admin.messaging().sendToDevice(tokens, payload);
Any article/video/plugin for this?
You can add "badge" option to notification payload.
ref: https://firebase.google.com/docs/cloud-messaging/http-server-ref#notification-payload-support
Related
I'm trying to get the data that i receive from my push notification and display it in the pwa. The idea is that i have a push notification coming in with a text body, then the user clicks on the push notification and the PWA opens up with the data from the push notification displayed on the section. I have managed to get it work when it is open as i placed it in the mounted lifecycle and the function activates when it listens to the message that comes in. The only problem is when the push notification comes in, the user will not be having the PWA all the way. So how do i overcome this? I have tried inserting in other lifecycle methods but it seems redundant since the PWA is not even opened yet when the push notification arrives. Hope anyone here can advise on this. Thank you very much.
mounted(){
navigator.serviceWorker.addEventListener('message', (e) => {
console.log('Push Notification received');
console.log(e.data.firebaseMessagingData.notification.body);
var timestamp = new Date().toLocaleTimeString(undefined, {hour: '2-digit', minute: '2-digit'});
const robotMessage = {
text: e.data.firebaseMessagingData.notification.body,
isRobot: true,
timestamp: timestamp
}
firebase
.firestore()
.collection("users")
.doc(firebase.auth().currentUser.uid)
.collection("messages")
.add({
robotMessage: robotMessage.text,
timestamp: robotMessage.timestamp
});
this.messages.push(robotMessage);
});
}
I'm using Capacitor Push Notifications into my app. I've follow the capacitor tutorial from capacitor website, and implemented this code:
onPushNotifications() {
// Register with Apple / Google to receive push via APNS/FCM
PushNotifications.register();
// On succcess, we should be able to receive notifications
PushNotifications.addListener('registration', (token: PushNotificationToken) => {
console.log('Push registration success, token: ' + token.value);
});
// Some issue with our setup and push will not work
PushNotifications.addListener('registrationError', (error: any) => {
console.log('Error on registration: ' + JSON.stringify(error));
this.showToast('Erro ao ativar as notificações push.');
});
// Show us the notification payload if the app is open on our device
PushNotifications.addListener('pushNotificationReceived', (notification: PushNotification) => {
this.showToast(notification.title + '\n' + notification.body);
this.addNewNotification(notification);
});
// Method called when tapping on a notification
PushNotifications.addListener('pushNotificationActionPerformed', (notification: PushNotificationActionPerformed) => {
this.addNewNotification(notification.notification.data);
});
}
With this, I could access data title and body from push notification when the app is running in foreground (using pushNotificationReceived). But when the app is running in background I could access the title and body to save in an array, for exemple.
I tried implement this code:
// Method called when tapping on a notification
PushNotifications.addListener('pushNotificationActionPerformed',
(notification: PushNotificationActionPerformed) => {
let notif = this.state.notifications;
notif.push({ id: notification.notification.data.id, title: notification.notification.data.title, body: notification.notification.data.body })
this.setState({
notifications: notif
})
}
);
From this website https://medium.com/enappd/firebase-push-notification-in-ionic-react-app-using-capacitor-b6726c71bda4
But I got no functional answer. I keep getting undefined in title and body.
Please, can someone help me?
Thanks!
Your payload should contain:
notification_foreground,
notification_title,
notification_body.
You have to make:
notification_foreground = true
Sadly that’s how push with notification payload work, when in background or closed the OS handles them, using the title and body to display the notification in the tray, but when you tap them, that information is no longer available for the app.
Use data payload to pass any data you want.
How do I use notification actions with the Firebase Messaging SDK on the web?
There are a few common pitfalls people hit when attempting this.
Firebase Notifications - There is a feature of the Firebase Messaging SD
K's none as "Firebase Notifications". When you send a push message to a Firebase Instance-ID (IID) token, you can use a "notification" key which the SDK's will look for and if found, construct a notification for you. The benefit of this is that you have to write no code to show a notification. The downside is that it can be restrictive if you want to do anything complex or perform work on the device once the notification is received. So to use actions, you MUST NOT USE THIS. Instead call the FCM API with the IID token and a "data" payload.
Data Payload - The data payload has a restriction where it can only be key value pairs, where the value must be a string, i.e. no arrays. What this means is that you can't just send an array of actions and construct a notification with that. The way around this is to create a JSON string, send that to the FCM API and then parse and use the JSON on the device.
Time for an example.
Calling the FCM API
The format of your payload should be something like this:
{
"data": {
"some-data": "Im a string",
"some-other-data": "Im also a string",
"json-data": "{\"actions\": [{\"action\":\"yes\", \"title\":\"Yes\"},{\"action\":\"no\",\"title\":\"No\"}]}"
},
"to": "YOUR-IID-TOKEN"
}
You can send this with curl like so:
curl -X POST -H "Authorization: key=YOUR-SERVER-KEY" -H "Content-Type: application/json" -d '{
"data": {
"some-data": "Im a string",
"some-other-data": "Im also a string",
"json-data": "{\"actions\": [{\"action\":\"yes\", \"title\":\"Yes\"},{\"action\":\"no\",\"title\":\"No\"}]}"
},
"to": "YOUR-IID-TOKEN"
}' "https://fcm.googleapis.com/fcm/send"
With that you'll be able to get the data in the onBackgroundMessage callback in your service worker.
Receiving the Payload on the Device
In a service worker we could have the following code:
messaging.setBackgroundMessageHandler(function(payload) {
console.log('Message received: ', payload);
});
Which would print out the following in the console:
Notice the JSON data is still just a string, not an object.
Next up we can parse the JSON data and check its the right format to use as our notification actions.
We can change our code to the following:
messaging.setBackgroundMessageHandler(function(payload) {
console.log('Message received: ', payload);
const parsedJSON = JSON.parse(payload.data['json-data']);
console.log('Actions:', parsedJSON);
});
This will give the following log:
With this, we can finally create our notification with the following code:
messaging.setBackgroundMessageHandler(function(payload) {
console.log('Message received: ', payload);
const parsedJSON = JSON.parse(payload.data['json-data']);
console.log('Actions:', parsedJSON);
// Customize notification here
const notificationTitle = 'Actions Title';
const notificationOptions = {
body: 'Actions body.',
actions: parsedJSON.actions,
};
return self.registration.showNotification(notificationTitle,
notificationOptions);
});
Now you should have a notification with actions:
Testing
As Meggin as pointed out in the comments, it's not obvious how to test it, so a few guiding principles.
The biggest pain point is that if your web server sets a cache header for you service worker file, it won't update between refreshes, one way to fix this it to open your service worker file in a new tab and refresh that page until your service worker is up to date (This is viewing the actual source code of your service worker). Then when you refresh your web page your service worker will be the latest one and you can tell it's updated by the number next to the service worker incrementing.
Alternatively, just unregister the service worker the service worker and refresh the page - this should give you the latest service worker.
To test your notification, you'll need to click a tab that is for a different web page before sending a push message.
The reason for this is that if the user is currently on one of your pages, the push message is sent to the pages onMessage() callback instead of the onBackgroundMessage() callback.
Following Matt's advice, I was able to get a proper notification with content from my firebase function passed into my service worker (including actions), but I had to pass all of my data through the one json object, otherwise it wouldn't work for me.
Here's what my firebase functions code looks like:
function sendPayload(tokenArray) {
const payload = {
"data": {
"jsondata": "{\"body\":\"Meggin needs help\", \"title\":\"Can you help her make the code work?\",\"actions\": [{\"action\":\"yes\", \"title\":\"Yes\"},{\"action\":\"no\",\"title\":\"No\"}]}"
}
};
admin.messaging().sendToDevice(tokenArray, payload)
.then(function(response) {
// See the MessagingDevicesResponse reference documentation for
// the contents of response.
console.log("Successfully sent message:", response);
})
.catch(function(error) {
console.log("Error sending message:", error);
});
}
And here's what my code looks like in my service worker:
messaging.setBackgroundMessageHandler(function(payload) {
console.log('Payload received: ', payload);
const parsedJSON = JSON.parse(payload.data.jsondata);
console.log("What does actions look like? " + parsedJSON.actions);
console.log("What does title look like? " + parsedJSON.title);
const notificationTitle = parsedJSON.title;
const parsedBody = parsedJSON.body;
const parsedActions = parsedJSON.actions;
// Customize notification here
const notificationOptions = {
body: parsedBody,
actions: parsedActions,
};
return self.registration.showNotification(notificationTitle, notificationOptions);
});
It's worth noting that one major hurdle that helped me get passed this is understanding how to test push notifications and service workers!
You actually can't see my notification unless the browser is closed, so obviously, you can't watch the console.
But then once you've pushed the notification, you go into the console, and change the file at the top of console to be the service worker file specifically.
And then you can see the console logs!
I realize this might seem obvious to many people, but it wasn't to me, and it's crucial to understanding how to parse the payload and get it to do what you want!
I have been using ionic and FCM (Firebase Cloud Messaging) for notification.
I get the notification on my app and now I have 2 issues. First, if its a normal notification like not with advanced options in Firebase Console > Notification, then it doesn't play any sound, but when it's data Notification, then it does play a sound. Second, I want to open a particular page of my app on notification click.
So how do I do that?
Note: I am using ionic not an ionic2.
First issue:
We have sound in both situations. Have you tried to send an empty data object?
Second issue:
Just assuming you use the Cordova FCM plugin. Otherwise install it with
cordova plugin add cordova-plugin-fcm --save
Use the data with an ID to the right datapage and then do something like:
angular.module('app', ['ionic'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova) {
FCMPlugin.onNotification(
function(data){
if(data.wasTapped){
//Notification was received on device tray and tapped by the user.
$state.go('yourpage', {id:data.pageId});
console.log('onNotification tapped true');
} else {
//Notification was received in foreground. User needs to be notified.
console.log('onNotification tapped false');
}
},
function(msg){
console.log('onNotification callback successfully registered: ' + msg);
},
function(err){
console.log('Error registering onNotification callback: ' + err);
}
);
}
});
});
Currently developing a Cordova app and wanted to use the IBM Bluemix Push Notification service to send user based push notifications.
According to the documentation here, seems like the first step is to call MFPPush.initialize(appGuid, clientSecret), which I tried to do. But this function is not present in the plugin interface and therefore I get an 'undefined' error when running the app.
Moreover, the doc also talks about calling MFPPush.registerDevice({},success,failure,userId). However, when I look at the plugin javascript interface, it only takes 3 parameters.
Could someone please give some advice to help me sort this out?
Thanks.
I just ran the Bluemix Cordova hellopush sample which should help you out. Make sure you follow the directions in the README, and make sure to change the route and guid in your index.js (it should look something like this):
route: "http://imfpush.ng.bluemix.net",
guid: "djkslk3j2-4974-4324-8e82-421c02ce847c",
You will be able to find the route and guid in your Push Notifications service credentials.
After running it by following the directions (and ensuring that you have GCM / APNS set up correctly for whatever platform you are using), you should be greeted with this screen after clicking register:
#johan #joe Cordova app can use the IBM Bluemix Push Notification service to send user based push notifications. Please follow the below example using BMSPush to register for Push Notifications.
// initialize BMSCore SDK
BMSClient.initialize("Your Push service region");
// initialize BMSPush SDK
var appGUID = "Your Push service appGUID";
var clientSecret = "Your Push service clientSecret";
// Initialize for normal push notifications
var options = {}
BMSPush.initialize(appGUID,clientSecret,options);
// Initialize for iOS actionable push notifications and custom deviceId
var options ={"categories":{
"Category_Name1":[
{
"IdentifierName":"IdentifierName_1",
"actionName":"actionName_1",
"IconName":"IconName_1"
},
{
"IdentifierName":"IdentifierName_2",
"actionName":"actionName_2",
"IconName":"IconName_2"
}
]},
"deviceId":"mydeviceId"
};
BMSPush.initialize(appGUID, clientSecret, options);
var success = function(response) { console.log("Success: " + response); };
var failure = function(response) { console.log("Error: " + response); };
// Register device for push notification without UserId
BMSPush.registerDevice(options, success, failure);
// Register device for push notification with UserId
var options = {"userId": "Your User Id value"};
BMSPush.registerDevice(options, success, failure);
Please go through the Bluemix Cordova Plugin Push SDK doc link.