React Native PushNotification onNotification method - android

I am Getting notification from server. After receiving the notification, When I click on it, then again the same notification is coming. More I click on it more the notifications are coming.
My question is whether I am following the right approach in the above code? If not then please suggest me the correct one. How to handle the click of notification? So, that i can show the particular view on its click.
I'm using the following link
https://github.com/zo0r/react-native-push-notification
Thanks in advance :)
PushNotification.configure({
onNotification: function (notification) {
console.log('NOTIFICATION:', notification)
PushNotification.localNotification({
largeIcon: "ic_launcher",
title: notification.title,
message: notification.message,
});
},
senderID: "my sender ID",
popInitialNotification: true,
requestPermissions: true,
});

I have tried the following approach to solve this problem
PushNotification.configure({
onNotification: function (notification) {
console.log('NOTIFICATION:', notification)
const clicked = notification.userInteraction;
if (clicked) {
ToastAndroid.show(notification.message,ToastAndroid.CENTER);
} else {
PushNotification.localNotification({
largeIcon: "ic_launcher",
title: "Test",
//message: JSON.stringify(xyz.notificationResponse.bookingId),
});
}
ToastAndroid.show(notification.message,ToastAndroid.CENTER);
},
senderID: "your sender id",
popInitialNotification: true,
requestPermissions: true,
});

Related

How to correctly specify channel_id in FCM using cloud functions

Unfortunately, no answer yet. I am checking out postman, I hope I can use that to test quicker.
I manage to send a notification through my app, however, the notification always ends up in the silent notification of my phone, no sound, no vibration and no notification icon in the top left of the phone, only a notification in the drawer when I swipe down :(
In an attempt to fix / improve the situation I tried the following:
Create an android notification channel with id: high_importance_channel by using flutter_local_notifications package. The channel was created successful, because requesting an overview of the existing channels, showed the newly created channel (among the other channels). The new channel has importance: 5, enableVibration: true and playSound: true, so that should do the job.
Send a FCM through cloud functions with the following code:
const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp();
exports.chatNotification = functions.firestore
.document('chats/{groupId}/chat/{chatId}')
.onCreate( async (snapshot, context) => {
const message = {
"notification": {
"title": "Message Received",
"body": "Text Message from " + fromUserName,
},
"tokens": registrationTokens,
"android": {
"notification": {
"channel_id": "high_importance_channel",
},
},
};
admin.messaging().sendMulticast(message)
.then((response) => {
console.log(response.successCount + ' messages were sent successfully');
});
}
But so far not luck, the notification still ends up in the silent notifications. What am I doing wrong?
There are 2 ways of doing it. Might work in your case.
Way 1:
var payload = {
notification: {
android_channel_id: 'AppChannel',
/*
https://stackoverflow.com/questions/62663537/how-do-i-add-a-channelid-to-my-notification
https://firebase.google.com/docs/cloud-messaging/http-server-ref#notification-payload-support
*/
title: 'Push Notification Arrived!',
body: 'Using Cloud Functions',
sound: 'default',
},
data: {
route: '/someRoute',
},
};
try {
const response = await admin.messaging().
sendToDevice(deviceTokens, payload);
console.log('Notification sent succesfully.');
} catch (err) {
console.log('Error sending Notifications...');
console.log(err);
}
Way 2:
const message = {
/*
https://firebase.google.com/docs/reference/admin/node/firebase-admin.messaging.basemessage.md#basemessagenotification
*/
notification: {
title: 'Push Notification Arrived!',
body: 'Using Cloud Functions',
},
data: {
route: '/someRoute',
},
android: {
/*
https://firebase.google.com/docs/reference/admin/node/firebase-admin.messaging.androidnotification.md#androidnotificationbodylockey
*/
notification: {
channelId: "AppChannel",
priority: 'max',
defaultSound: 'true',
},
},
token: deviceTokens,
};
// https://firebase.google.com/docs/reference/admin/node/firebase-admin.messaging.messaging.md#messagingsend
admin.messaging().send(message)
.then((response) => {
// Response is a message ID string.
console.log('Successfully sent message:', response);
})
.catch((error) => {
console.log('Error sending message, for LOVEs sake:', error);
});

How to add click action when sending FCM notification from Node.js admin SDK to Flutter app?

I have a cloud function which executes this code to send the notification to the user, I am getting notification correctly but I want to navigate to a particular screen for that I have to add click action something like this.
clickAction: FLUTTER_NOTIFICATION_CLICK
I have tried to put this property in different lines of code but nothing seem to work, can someone please tell where should I put it exactly?
This is my index.js file!
const message = {
token: data['guestFcmToken'],
notification: {
title: `New message from ${data['hostName']}.`,
body: data['type'] === 'image' ? 'Photo' : data['lastMessage'],
},
data: {
showForegroundNotification: 'false',
screen: 'chat'
},
}
console.log('Sending message');
const response = await admin.messaging().send(message);
console.log(response);
You can add clickAction: 'FLUTTER_NOTIFICATION_CLICK' in the following way
message = {
token: data['guestFcmToken'],
notification: {
title: `New message from ${data['hostName']}.`,
body: data['type'] === 'image' ? 'Photo' : data['lastMessage'],
},
data: {
showForegroundNotification: 'false',
screen: 'chat'
},
android: {
notification: {
clickAction: 'FLUTTER_NOTIFICATION_CLICK',
},
}
};

Ionic 2 Push Notifications with FCM

I'm implementing Push Notifications on my Android Ionic 2 App with the Ionic Native FCM
When I'm receiving a notification in the foreground it works, but when I'm receiving a notification in the background and if I clicked on it, nothing happens.
app.component.ts
firebaseInit(){
//Firebase
this.fcm.subscribeToTopic('all');
this.fcm.getToken()
.then(token => {
console.log(token);
this.nativeStorage.setItem('fcm-token', token);
});
this.fcm.onNotification().subscribe(
data => {
console.log("NOTIF DATA: " + JSON.stringify(data));
if(data.wasTapped){
this.nav.push(MemoViewPage, {memo: {_id: data.memo_id}})
console.info('Received in bg')
}else{
let alert = this.alertCtrl.create({
title: data.subject,
message: "New memorandum",
buttons: [
{
text: 'Ignore',
role: 'cancel'
},
{
text: 'View',
handler: () => {
this.nav.push(MemoViewPage, {memo: {_id: data.memo_id}})
}
}
]
});
alert.present();
console.info('Received in fg')
}
});
this.fcm.onTokenRefresh()
.subscribe(token => {
console.log(token);
})
}
The if(data.wasTapped) condition doesn't go off once I clicked the notification from the system tray.
EDIT
The app opens but only in the Home Page not to the designated page that I set which is this.nav.push(MemoViewPage, {memo: {_id: data.memo_id}})
I also cannot receive notifications when the app is killed or not running.
you could use push plugin instead of FCM.
this.push.createChannel({
id: "testchannel1",
description: "My first test channel",
importance: 3
}).then(() => console.log('Channel created'));
and then you could use pushObjects to specify the needs for your notification like sound, ion etc.
const options: PushOptions = {
android: {},
ios: {
alert: 'true',
badge: true,
sound: 'false'
},
windows: {},
browser: {
pushServiceURL: 'http://push.api.phonegap.com/v1/push'
}
};
After that it is easy for you to receive notifications whether you are using the app or not
const pushObject: PushObject = this.push.init(options);
pushObject.on('registration').subscribe((registration: any) => this.nativeStorage.setItem('fcm-token', token));
pushObject.on('notification').subscribe((notification: any) => console.log('Received a notification', notification));
you could use the option of forceShow:true in the pushObject init for the app to show the notification whether you are using the app or not.
And once you clicked the notification the notification payload is received by the app with the app home page set as default.

No custom icon or sound in Ionic Native Push

I am trying to get this working https://ionicframework.com/docs/native/push/
With FireBase Cloud Messaging
Here is the code
import { Push, PushObject, PushOptions, AndroidPushOptions, IOSPushOptions } from '#ionic-native/push';
pushsetup() {
const options: PushOptions = {
android: {
senderID: '**********',
icon: "notification",
iconColor: "blue",
sound: true,
vibrate: true,
forceShow: true
},
ios: {
alert: true,
badge: true,
sound: true
},
};
const pushObject: PushObject = this.push.init(options);
pushObject.on('notification').subscribe((notification: any) => {
if (notification.additionalData.foreground) {
let youralert = this.alertCtrl.create({
title: 'New Push notification',
message: notification.message
});
youralert.present();
}
});
pushObject.on('registration').subscribe((registration: any) => {
//do whatever you want with the registration ID
});
pushObject.on('error').subscribe(error => alert('Error with Push plugin' + error));
}
How push looks now:
Unfortunately there is still no custom icon or sound or vibration :(
I copied the notification png, basically everywhere now in the android/res folder :)
Has anyone had any success with this? Do you actually have to use the AndroidPushOptions import anywhere?

Ionic Notification has no sound

Look like there were some changes in Ionic Push Notification in the last few weeks.
OLD WAY
$ionicPush.register({
canShowAlert: true, //Can pushes show an alert on your screen?
canSetBadge: true, //Can pushes update app icon badges?
canPlaySound: true, //Can notifications play a sound?
canRunActionsOnWake: true, //Can run actions outside the app,
onNotification: function(notification) {
// Handle new push notifications here
alert(notification);
return true;
}
});
NEW WAY
$ionicPush.init({
"debug": true,
"onNotification": function(notification) {
var payload = notification.payload;
console.log(notification, payload);
},
"onRegister": function(data) {
console.log(data.token);
});
$ionicPush.register();
You can see that the different code in latest release preventing iOS from having sound and other features. I tried to add back canPlaySound: true in $ionicPush.init but it didn't work.
How do I get back the list of all notification features for ios?
UPDATE
Correct answer
$ionicPush.init({
"debug": true,
"onNotification": function(notification) {
var payload = notification.payload;
console.log(notification, payload);
},
"onRegister": function(data) {
console.log(data.token);
},
"pluginConfig": {
"ios": {
"badge": true,
"sound": true
},
"android": {
"iconColor": "#343434"
}
}
});
These are plugin options which I've added to our docs:
http://docs.ionic.io/docs/push-usage#section-plugin-options

Categories

Resources