I have push notifications working using FCM from a cloud function. This works for both iOS and Android and displays the appropriate icon and plays a custom sound on iOS.
All is working except the custom sound for Android, it simply plays the default sound.
I have created a folder and added my sound file to it as follows: android\app\src\main\res\raw\mp3_example.mp3
This mp3 is 27s long. I have also tried a .wav and .aiff.
I read that I may have to create a push notification channel for later versions of Android so it could be related to this. I tried creating a channel and using the channelID from the cloud function and it works but there is no sound just a vibration.
The test device is a Moto G6 running Android 8.
I am using:
FCM
Firebase Cloud Functions
Ionic 4
Capacitor
https://github.com/stewwan/capacitor-fcm
Cloud Function:
const notification: admin.messaging.Notification = {
title: title,
body: body
}
const message: admin.messaging.Message = {
notification,
topic: 'QMTBC',
android:{
notification:{
sound: 'mp3_example.mp3',
icon: 'push_logo',
color: '#000000'
}
},
apns:{
payload:{
aps: {
sound: 'gears-short.wav'
}
}
}
}
return admin.messaging().send(message)
app.component.ts
import { FCM } from 'capacitor-fcm';
const fcm = new FCM();
const { PushNotifications } = Plugins;
initializeApp() {
this.platform.ready().then(() => {
PushNotifications.register();
PushNotifications.addListener('registration', (token: PushNotificationToken) => {
console.log('token ' + token.value);
fcm
.subscribeTo({ topic: 'QMTBC' })
.then(r => console.log(`subscribed to topic`))
.catch(err => console.log(err));
});
PushNotifications.addListener('registrationError', (error: any) => {
console.log('error on register ' + JSON.stringify(error));
});
PushNotifications.addListener('pushNotificationReceived', (notification: PushNotification) => {
console.log('notification ' + JSON.stringify(notification));
this.pushNotificationService.notifications.push(notification);
});
PushNotifications.addListener('pushNotificationActionPerformed', (notification: PushNotificationActionPerformed) => {
console.log('notification ' + JSON.stringify(notification));
this.pushNotificationService.notifications.push(notification);
});
fcm.getToken()
.then(r => console.log(`Token ${r.token}`))
.catch(err => console.log(err));
});
}
UPDATE:
I tried creating a channel as follows.
If I use the channel I just get the default sound. If I specific no channel or one that does not exist I also get the default sound (default channel).
cloud function:
const message: admin.messaging.Message = {
notification,
topic: 'QMTBC',
android:{
notification:{
sound: 'punch.mp3',
icon: 'push_logo',
color: '#000000',
channelId: 'QMTBC'
}
}
app.component.ts
const channel: PushNotificationChannel = {
description: 'QMTBC',
id : 'QMTBC',
importance: 5,
name : 'QMTBC'
};
PushNotifications.createChannel(channel).then(channelResult => {
console.log(channelResult);
console.log('Channel created');
// PushNotifications.listChannels().then(channels => {
// console.log('Channels');
// console.log(channels);
// });
}, err => {
console.log('Error Creating channel');
console.log(err);
});
});
UPDATE 2:
I can see the channel I have created for the app on my device and it says the sound is default. I can manually change it to another inbuilt android sound and this works. But I still can't use my custom sound.
UPDATE 3:
The custom sound works on if the Android version is < 8. Only tested this on an emulator.
#MadMac I was facing the same problem these days, after read FCM documentations and the Capacitor Java code, I got it.
It's necessary to set the visibility to 1, place your file in res/raw folder.
PushNotifications.createChannel({
description: 'General Notifications',
id: 'fcm_default_channel',
importance: 5,
lights: true,
name: 'My notification channel',
sound: 'notifications.wav',
vibration: true,
visibility: 1
}).then(()=>{
console.log('push channel created: ');
}).catch(error =>{
console.error('push channel error: ', error);
});
I'm using this payload in my firestore function to send notifications
{
android: {
notification: {
defaultSound: true,
notificationCount: 1,
sound: 'notifications.wav',
channelId: 'fcm_default_channel'
},
ttl: 20000,
collapseKey
},
apns: {
payload: {
aps: {
badge: 1,
sound: 'default'
}
}
},
notification: {
title,
body: message,
},
token: token
};
This was such a good question that helped me find the answer. So I post my answer here. Try setting the sound of the notifications to notification channels themselves at the time when you create the channels. I suppose, based on your info, the old Android versions will play sound according to the sound field in the notification payload, but in the new versions you would have to set it directly to the notification channels themselves since that is where the control is now currently intended to be by Google. I had to uninstall and reinstall the app for this code change to work, because my channels were previously initialized and the channels won't update after the first initialization.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && !notificationChannelsInitialized) {
val newMessagesChannel = NotificationChannel(NEW_MESSAGES_NOTIFICATION_CHANNEL_ID, "New Messages", NotificationManager.IMPORTANCE_HIGH)
val notificationSoundUri =
Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE.toString() + "://" + context.packageName + "/" + R.raw.ns) // ns.wav is my notification sound file in the res/raw folder in Android Studio
val notificationSoundUriAttributes = AudioAttributes.Builder()
.setUsage(AudioAttributes.USAGE_NOTIFICATION)
.setContentType(AudioAttributes.CONTENT_TYPE_SONIFICATION)
.build()
newMessagesChannel.setSound(notificationSoundUri, notificationSoundUriAttributes)
val notificationManager: NotificationManager =
context.getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
notificationManager.createNotificationChannels(listOf( newMessagesChannel)) // and other channels
}
I was able to get it working for React Native using the react-native-push-notification library (here). The key to resolving is that you must create a channel within your app. (I had thought channels were created on the backend, but that's not right). After placing the mp3 file in the res/raw directory in the android folder of my app, I added the following code in React Native (copied from documentation in the above library), and it worked:
import PushNotification, {Importance} from 'react-native-push-notification';
...
PushNotification.createChannel(
{
channelId: "channel-id", // (required)
channelName: "My channel", // (required)
channelDescription: "A channel to categorise your notifications", // (optional) default: undefined.
playSound: true, // (optional) default: true
soundName: "mp3_example", // (optional) See `soundName` parameter of `localNotification` function
importance: Importance.HIGH, // (optional) default: Importance.HIGH. Int value of the Android notification importance
vibrate: true, // (optional) default: true. Creates the default vibration pattern if true.
},
(created) => console.log(`createChannel returned '${created}'`) // (optional) callback returns whether the channel was created, false means it already existed.
);
Related
I am currently using Notifee with Firebase for local push notifications on react-native android, and on debug mode it works perfectly, with my custom sound playing normally. But after assembling a release apk, on some android devices the notification sound simply does not play after a while. I've checked the notification settings on the devices and it's normal, not set to silence and the devices aren't in "do not disturb".
Here's the code :
Channel Creation at index.js
notifee.createChannel({
id: 'service',
name: 'New Notifications',
vibration: true,
sound: 'siren',
badge:false,
vibrationPattern: [300, 500],
});
Creating the notification
const onMessageReceived = async (notification) => {
const { department_name, category_name, activity_name, description, destination} = notification.data;
const messageToBePresented = `Department: ${department_name}\nCategory: ${category_name}\nActivity: ${activity_name}\nDescription: ${description}\nBed: ${destination}`;
try {
notifee.displayNotification({
title:'New Service',
body:messageToBePresented,
data: notification.data,
android:{
channelId:'service',
style: { type: AndroidStyle.BIGTEXT, text:messageToBePresented },
pressAction: {
id: 'default',
},
sound:'siren',
}
});
}
catch (err) {
console.log(err);
}
}
firebase.messaging().onMessage(onMessageReceived);
firebase.messaging().setBackgroundMessageHandler(onMessageReceived);
Is there some Android setting that i might i've overlooked that causes notification sounds to stop playing ?
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 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)
}