Flutter - Background notifications not working in iOS - firebase

I'm creating a public chat app in Flutter, and I can't receive background notifications on iOS, when I trigger the method admin.messaging().send(payload) from my Cloud Function.
Here's my payload in the Cloud Function :
var payload = {
notification: {
title: `My Title`,
body: `My message`,
},
android: { priority: "high" },
apns: {
payload: {
aps: {
contentAvailable: true,
},
},
headers: {
"apns-push-type": "background",
"apns-priority": "10",
"apns-topic": "io.flutter.plugins.firebase.messaging", // bundle identifier
},
},
topic: `mytopic`,
};
I tried a bunch of different payloads :
I tried notification + data
I tried only data (no notification) (in that case, I have to locally display the notification, but it is not working because the function FirebaseMessaging.onBackgroundMessage is never called)
I tried to change "apns-priority" to 5
I tried using a token instead of a topic
I set up carefully all I need to configure, thanks to the official documentation :
https://firebase.flutter.dev/docs/messaging/usage/
I also checked Github issues, like these ones :
1041, 6112, 5988, 1644, 4300, 4097
What is working :
Background and foreground notifications on Android and iOS, when sent from Firebase Console (in 'Cloud Messaging' section)
Background and foreground notifications on Android only, when sent from Cloud Function
Foreground notifications on iOS, when sent from Cloud Function
What is NOT working :
Background notifications on iOS when sent from Cloud Function
When app is terminated, it does not work as well.

I finally resolved this issue ! 🎉
I simply removed the line "apns-push-type": "background" in my payload.
Now it is working.
It appears that the line "apns-topic" was useless as well.
Here is my final payload :
var payload = {
notification: {
title: `# ${context.params.passion}`,
body: `${newMsg["senderPseudo"]} ${
type == "image" ? "a envoyé une image." : `: ${newMsg["message"]}`
}`,
},
// Set Android priority to "high"
android: {
priority: "high",
},
// Add APNS (Apple) config
apns: {
payload: {
aps: {
contentAvailable: true,
},
},
headers: {
//"apns-push-type": "background", // This line prevents background notifications to be displayed
"apns-priority": "10",
},
},
token: "dnqTQVso60GfnnuOjHv8_e:APA91bElr-K3xkQMdYHX8VMrMZNCYCjO4zJlGseRh25AS_GT7cg9zlOGdQl4KXvr88ypeWjZjrPzrLRHitsQ-JKQK057ZQb_36c_lfsNjHXbYMYI2iS3jV_HGWf7Ene-ZlPvOb0aRr8u"
};

Related

How to collapse a Web Push notification sent by FCM

I'm using FCM with firebase-admin to send a Web Push notification for multiple clients. I want to replace an older message by a new one.
This is how I'm calling it:
return await admin.messaging().sendMulticast({
tokens,
notification: {
title: "Message Title",
body: "Message body.",
},
data: {
type: "ring",
callId,
},
webpush: {
fcmOptions: {
link: process.env.PWA_APP_URL,
},
headers: {
Urgency: "high",
},
},
android: {
collapseKey: "ring",
priority: "high",
ttl: 10,
notification: {
color: "#ff0000",
defaultSound: true,
sound: "default",
lightSettings: {
color: "#ffcc00",
lightOffDurationMillis: 1000,
lightOnDurationMillis: 1000,
},
tag: "ring",
vibrateTimingsMillis: [1000, 1000],
visibility: "public",
priority: "max",
},
},
});
When the message arrives to an Android app client it's collapsed because of android.collapseKey property. But I can't get the same behavior in my web application.
According to the docs, there's a Topic option for Web notifications, but I'm not sure where to put it. I tried to use it as webpush.headers.Topic property but with no success. Messages are not collapsed in Android/Chrome.
What am I doing wrong?
I've followed collimarco's tip and could use showNotification method to collapse a notification.
In firebase-admin/server code I had to remove the notification fields in the message's payload. Now it's just a data message:
return await admin.messaging().sendMulticast({
tokens,
data: {
type: "ring",
callId,
},
});
In the web application I created a background message handler. Now I can call showNotification method when I new message arrives using tag property with renotify=true.
messaging.setBackgroundMessageHandler(function (payload) {
// ...
return self.registration.showNotification("Message Title", {
body: "Message body.",
tag: "ring",
renotify: true,
vibrate: [1000, 1000],
});
});
It would be great to have these properties set on the message payload only.

How to create APNS payload for Firebase?

I have connected my IONIC 4 app to Firebase and then to AWS SNS.
Everything works perfectly for Android, the push notifications are delivered.
But iOS devices never receives them. I have made all the necessary configs, certificates and keys. When I publish a test message via Firebase Console, the iOS devices receive the notifications.
I get a little confuse about this payload object and I guess it might be causing this issue.
The payload object (ignore the values):
var payload = {
default: "Trokaí",
GCM: {
data: { message: "A", payload: "", title: "C" },
notification: {
message: "E",
payload: "F",
title: "Trokaí",
body: msgPush
}
},
APNS: {
aps: {
alert: {
title: "Game Request",
body: "Bob wants to play poker",
"action-loc-key": "PLAY"
},
badge: 5
},
acme1: "bar",
acme2: ["bang", "whiz"]
}
};
payload.GCM = JSON.stringify(payload.GCM);
payload.APNS = JSON.stringify(payload.APNS);
payload = JSON.stringify(payload);
The publishing method:
sns.publish(
{
Message: payload,
MessageStructure: "json",
TargetArn: device.endpoint
},
function(err, data) {
if (err) {
return;
}
}

React Native: Disable sound/vibration on push notification

I'm sending push notifications from server to clients via google FCM.
In the react-native app I've registered these listeners:
this.notificationOpenedListener = firebase.notifications().onNotificationOpened(async (notificationOpen) => {
})
this.notificationListener = firebase.notifications().onNotification(async (notification) => {
});
the notification data contains information if there should be a sound / vibration or not when the notification is received.
However, I can't find any documentation about completely disabling sound/vibration on demand.
How can I achieve this?
UPDATE
I've tried setting sound to an empty string on server side, but there's still sound/vibration on notification.
var message = {
data: {
userId: fromUserId,
},
notification: {
title: `My notifcation`,
body: `Body`,
sound: "",
},
}
return sendToTopic(topicId, message)
When setting your notification target, remove sound parameter.
const notify = {
...message.notification,
show_in_foreground: true,
notify_type: message.NotificationType,
obj_id: message.ObjectId,
sound: '' // remove this
};
firebase.messaging().createLocalNotification(notify);
I'm not sure how you are setting up your Push notifications but you can tag extra data into the JSON like this:
{
"message":{
"token":"bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
"data":{
"Nick" : "Mario",
"body" : "great match!",
"Room" : "PortugalVSDenmark"
}
}
}
This means you could add a boolean to it to manually play a tone on arrival or not play a tone when the subscription fires, like this:
{
"message":{
"token":"bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
"data":{
"Nick" : "Mario",
"body" : "great match!",
"Room" : "PortugalVSDenmark",
"playTone" : "true"
}
}
}
Then it's the case of having a check in your callback to check the response:
this.notificationListener = firebase.notifications().onNotification(async (notification) => {
if(notification.data.playtone) {
// Play Tone
} else {
// Don't
}
});
In general though push notifications are handled by the OS and not the application, you can hook into it like you have and perform actions on the arrival of a push notification but normally they all arrive in the same "Drop everything and deal with me" style.
Both Android and Apple do support priority but it might not be what you're after:
https://firebase.google.com/docs/cloud-messaging/concept-options#setting-the-priority-of-a-message

react native push notification doesn't show banner (pop on screen) when app is in background or closed

I'm using react-native-push-notification and followed its documents. it works fine when the app is in the foreground but when the app is in the background and I try to send a notification from firebase console, just shown a small icon of the app in statusbar but doesn't show banner
I tried to add a new channel but still not working
componentDidMount() {
NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
PushNotification.configure({
// (optional) Called when Token is generated (iOS and Android)
onRegister: function(token) {
console.log( 'TOKEN:', token );
},
// (required) Called when a remote or local notification is opened or received
onNotification: function(notification) {
console.log( 'NOTIFICATION:', notification );
Platform.OS === 'ios' ? notification.finish(PushNotificationIOS.FetchResult.NoData) : null;
},
// ANDROID ONLY: GCM or FCM Sender ID (product_number) (optional - not required for local notifications, but is need to receive remote push notifications)
senderID: Variables.GCM_SENDER_ID,
// IOS ONLY (optional): default: all - Permissions to register.
permissions: {
alert: true,
badge: true,
sound: true
},
visibility: 'public',
popInitialNotification: true,
requestPermissions: true,
});
}
try to off the power saving mode battery because is block notification on background

Firebase sw.js not respnding after closing browser

I have created firebase project for using Cloud Messaging . until now I have sent a message from backend to client successfully when the browser (chrome) is open but when I close the browser notification not sending until reopening of the browser in below code you can see my firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/5.0.4/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/5.0.4/firebase-messaging.js');
firebase.initializeApp({
messagingSenderId: "My-Sender-Id"
});
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function(payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
// Customize notification here
var notificationTitle = 'Background Message Title';
var notificationOptions = {
body: 'Background Message body.',
icon: '/firebase-logo.png'
};
return self.registration.showNotification(notificationTitle,
notificationOptions);
});
self.addEventListener('push', function(e) {
var data;
if (e.data) {
data = JSON.parse(e.data.text()).data;
} else {
data = {};
}
var title = data.title;
var options = {
body: data.body,
icon: 'assets/custom/img/logo.png',
vibrate: [100, 50, 100],
requireInteraction: true,
data: data.data ? data.data : null,
dir: "rtl",
actions: [{
action: data.action,
title: 'open',
icon: 'images/checkmark.png'
},
{
action: 'close',
title: 'close',
icon: 'images/xmark.png'
},
]
};
e.waitUntil(
self.registration.showNotification(title, options)
);
});
self.addEventListener('notificationclick', function(event) {
console.log('On notification click: ', event.notification.tag);
event.notification.close();
if (event.action != "" && event.action != "close") {
return clients.openWindow(event.action);
}
});
how can I have notification even browser is closed?
I believe you are using service worker for FCM, and the service worker only works when the browser is open ,as service worker is responsible for handling the push notification, when the browser is closed you won't receive any push notification, Actually the push notification will appear only when the browser is opened ,or the application for which you have configured FCM is open on chrome tabs but not focused, there is one work around or you say solution for it , that is make sure the chrome browser is active in the background even after closing chrome browser.
There is option in chrome settings
Goto Settings -> Advanced -> Continue running background apps when Google Chrome is closed make sure you enable it
i have tested the code of FCM , after enabling the option you will get the notification popup.
What you are trying to achieve should be accomplished using a database like firestore. When a notification is received at the time when browser is closed, in the service worker, you should add the code to save the notification message in the firestore so that when user opens the website again, you can retrieve the messages from the firestore and can display them to user. As soon as the browser is opened, any pending notification would be saved to the database by service worker.
I believe this should be the preferred way to achieve this.

Resources