Firebase Custom Notifications With FlutterFire
Thanks to Firebase and FlutterFire, it's easy to send regular notifications from the servers to the users' devices. Those notifications include a title, a body, and an image url. But what about creating a no-that-simple notification, like Telegram's or WhatsApp's?
The simple question is to avoid sending a
Notification from the server, and instead set the
data field to the push message. But according to the FlutterFire documentation:
Data only messages are considered low priority by devices when your application is in the background or terminated, and will be ignored
So, it sounds like if we want to have a reliable delivery system, we should add a
Notification to our push messages. But that notification is so simple. And, again, according to the documentation:
If your message is a notification one (includes a notification property), the Firebase SDKs will intercept this and display a visible notification to your users (assuming you have requested permission & the user has notifications enabled)
So: If I want a reliable system, I have to send
Notifications, but I do it, I can't tell FlutterFire to use my custom notifications.
So the question is: how to show custom notifications with FlutterFire?
What I want to achieve is something like this:
I'm going to try setting the priority of the push notification.
You can however explicitly increase the priority by sending additional properties on the FCM payload: On Android, set the priority field to high. On Apple (iOS & macOS), set the content-available field to true.
On the server side code, it looks like:
- → How can I query Firebase for an equalTo boolean parameter?
- → How can I access nested data in Firebase with React?
- → Firebase simple blog (confused with security rules)
- → Removing item in Firebase with React, re-render returns item undefined
- → AngularJS Unknown Provider Error (Firebase & AngularFire)
- → How do you pass top level component state down to Routes using react-router?
- → "this" is null in firebase query function in reactjs
- → Angular Module Failed to Load
- → Multiple dex files define Lcom/google/android/gms/internal/zzrx;
- → Joining Firebase tables in React
- → How can I make add firepad to my reactjs project?
- → How to use Cloud Functions for Firebase to prerender pages for SEO?
- → React.js component has null state?