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?
Related
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);
});
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',
},
}
};
I am trying to implement the notification which working fine only facing one issue that when I want to show icon only with data it will show as an image.
The Library I am using is react-native-push-notification
For example, I want to show like this but it shows large image too on click of an arrow button.
Right now it is like this
That is how I want.
Here is my AndroidManifest.xml
<!-- Change the resource name to your App's accent color - or any other color you want -->
<meta-data android:name="com.google.firebase.messaging.default_notification_icon"
android:resource="#mipmap/ic_notification"/>
<meta-data android:name="com.dieam.reactnativepushnotification.notification_color"
android:resource="#android:color/white"/>
While on server side
$notification = array('content-available' => true, 'mutable-content' => true, 'title' => $title, 'text' => $body, 'icon' => $icon, 'sound' => 'default', 'badge' => '1');
If I pass icon then nothing will show if I use image then icon show but with the big image too.
My code is as below
import PushNotification from "react-native-push-notification";
import { PushNotificationIOS } from "react-native";
import { NavigationActions, StackActions } from "react-navigation";
import {ToastAndroid} from 'react-native';
const localNotification = data => {
console.log("const localNotification" + JSON.stringify(data));
if (data) PushNotification.localNotification(data);
return null;
};
let getToken;
const setToken = token => (getToken = token.token);
const configure = () => {
PushNotification.configure({
onRegister: setToken,
// largeIcon: "https://stag2.com/uploads/qr/407xg1.png",
// smallIcon: "ic_notification",
// ongoing: true,
onNotification(notification) {
onNotification(notification);
},
senderID: "5545454654654654",
// SmallIcon:"ic_notification",
permissions: {
alert: true,
badge: true,
sound: true
},
popInitialNotification: true,
requestPermissions: true
});
};
let onNotification = (notification) => {
notification.android.setSmallIcon('ic_notification')
// if (!!notification.title && !!notification.body) {
// PushNotification.localNotification({
// title: notification.title,
// message:"urfusion",
// });
// }
};
export { configure, localNotification, getToken };
I got what I wanted if I push local notification which called when the app opens on notification click event but I want on remote push notification not on local one.
let onNotification = (notification) => {
notification.android.setSmallIcon('ic_notification')
// if (!!notification.title && !!notification.body) {
PushNotification.localNotification({
title: notification.title,
message:"urfusion",
});
}
};
Icons need to be with a transparent background. you can read more here :
read more
On the other hand, for notification, you need to use different icons for different versions of android. you can read more here :
read more
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 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,
});