I am integrating push notification in react native with help of "react-native-push-notification" library. The push is coming from node js(backend).
I am successfully getting push in both environment Android and IOS.
Now i have two issues
1) In ios when i am getting push there is one parameter in notification payload "userInteraction". This parameter is for that user clicked the notification or not. Now it is working fine in android but in ios this is always false.
2)I want to set custom image in push notification, which is coming from push.
I am using "https://www.npmjs.com/package/react-native-push-notification" this library.
I have tried this code :-
export function setupPushNotification(handleNotification) {
PushNotification.configure({
onRegister: function (token) {
if (Platform.OS == 'ios') {
firebase.messaging().getToken().then((token) => {
alert(JSON.stringify(token))
requestaddAuthToke(token)
.then((data) => {
console.log("hello2 " + JSON.stringify(data))
})
.catch((error) => {
console.log("hello3 " + JSON.stringify(error.message));
})
});
}
else {
console.log("hello2 " + JSON.stringify(token.token))
requestaddAuthToke(token.token)
.then((data) => {
console.log("hello2 " + JSON.stringify(data))
})
.catch((error) => {
console.log("hello3 " + JSON.stringify(error.message));
})
}
},
onNotification: function (notification) {
const clicked = notification.userInteraction;
if (clicked)
handleNotification(notification.episodeCode)
if (Platform.OS == 'ios')
notification.finish(PushNotificationIOS.FetchResult.NoData);
},
senderID: "529815244511",
permissions: {
alert: true,
badge: true,
sound: true
},
popInitialNotification: true,
requestPermissions: true,
})
return PushNotification
}
Any type of help will appreciated.
you are using react-native-push-notification and react-native-one-signal both at the same time. The only issue is onNotification not called when tapped on local notification in iOS only.
For a solution :
https://github.com/zo0r/react-native-push-notification/issues/919#issuecomment-439373380
Related
I have installed FCM notification plugin and added following code in
FCM.onNotification().subscribe(data => {
if (data.wasTapped) {
this.route.navigateByUrl(`${data.routeUrl}`);
console.log("Received in background");
} else {
this.localNotifications.schedule({
title: data.title,
text: data.body,
foreground: true
})
this.localNotifications.on("click").subscribe((notification: any) => {
this.navCtrl.navigateForward([data.routeUrl]).then((entry) => {
}).catch((err) => {
console.log('Error while navCtrl:- ' + JSON.stringify(err));
});
})
console.log("Received in foreground");
};
});
With this I am able to navigate to a screen from the path provided in the body of notification when app is open but when app is in closed state or in background I'm unable to navigate to that screen
Please help me out regarding this issue
Regards
I have a code that prepares and sends a notification to a mobile application
// Create the notification
const payload = {
notification: {
title: "Title",
body: "Body",
},
};
// Options
const options = {
contentAvailable: true,
priority: 'high'
};
admin
.messaging()
.sendToDevice(tokenSnapshot, payload, options)
.then(response => {
console.warn(">> Notification sent successfully: ", response);
return response;
})
.catch(error => {
console.warn(">> Notification sent failed: ", error);
});
I would like to add here information such as:
priority: 'max'
visibility: 'public'
These are features supported in Android
It is mentioned in the documentation that it exists.
But there is nothing mentioned how to use it
Can anyone give advice?
The purpose of this is to display Notifications on your phone when it is in the background
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.
I want to display a group notification instead of multiple notifications like whatsapp does.
For eg:
One notification with message - "2 discussions 1 comment" instead of
total three notifications.
I used react-native-fcm library (https://github.com/evollu/react-native-fcm)
I used group & tag keys but couldn't achieve the result as below code
FCM.presentLocalNotification({
title: 'Title',
body: 'Body',
priority: "high",
click_action: true,
show_in_foreground: true,
local: true,
group: 'group1',
tag: 'tag1'
});
Is it possible to achieve this functionality in react native FCM? Please let me know.
The project react-native-fcm is moved under react-native-firebase and there is a solution under this issue on the project.
The main idea:
The trick is to create an additional notification that will contain the notifications for that group.
// ID for grouping notifications, always the same
const SUMMARY_ID = `${ALERTS_GROUP}.summary`
const sendIt = (notification: Firebase.notifications.Notification) => {
return firebase.messaging().hasPermission().then((yes) => {
if (yes) {
try {
return firebase.notifications().displayNotification(notification)
.catch((err) => {
Log.e(`[sendNotification] ERROR: ${err}`)
return Promise.resolve()
})
} catch (err) {
Log.e('[sendNotification] Error displaying notification: ' + err)
}
}
return Promise.resolve()
})
}
const sendSummary = (data: MessageData) => {
const summary = new firebase.notifications.Notification()
.setNotificationId(SUMMARY_ID)
.setTitle(_T('notification.channels.alert.description'))
.setData(data)
.android.setAutoCancel(true)
.android.setCategory(firebase.notifications.Android.Category.Message)
.android.setChannelId(getChannelId(MsgType.Alert))
.android.setColor(variables.scheme.primaryColor)
.android.setSmallIcon(STATUS_ICON)
.android.setGroup(ALERTS_GROUP)
.android.setGroupSummary(true)
.android.setGroupAlertBehaviour(firebase.notifications.Android.GroupAlert.Children)
sendIt(summary)
}
/**
* Called by `bgMessaging` or the `onMessage` handler.
*/
export function sendNotification (message: Firebase.messaging.RemoteMessage) {
const payload: MessagePayload = message.data as any || {}
const notification = new firebase.notifications.Notification()
// ... more code
if (Platform.OS === 'android' && Platform.Version >= 24) {
notification.android.setGroup(ALERTS_GROUP)
sendSummary(notification.data)
}
Log.v('[sendSummary] sending notification.')
return sendIt(notification)
}
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?