I'm developing a Flutter app that uses Firebase Cloud Messaging (FCM) for push notifications and the Awesome Notifications package for local notifications. However, I've encountered an issue where, upon receiving a single FCM push notification, my app displays two notifications instead of one. This behavior occurs regardless of the app's state (foreground, background, or terminated).
Here's a brief overview of how my app handles FCM notifications:
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:logger/logger.dart';
import '../app/data/local/my_shared_pref.dart';
import 'awesome_notifications_helper.dart';
class FcmHelper {
// prevent making instance
FcmHelper._();
// FCM Messaging
static late FirebaseMessaging messaging;
/// this function will initialize firebase and fcm instance
static Future<void> initFcm() async {
try {
// initialize fcm and firebase core
await Firebase.initializeApp(
// TODO: uncomment this line if you connected to firebase via cli
//options: DefaultFirebaseOptions.currentPlatform,
);
// initialize firebase
messaging = FirebaseMessaging.instance;
// notification settings handler
await _setupFcmNotificationSettings();
// generate token if it not already generated and store it on shared pref
await _generateFcmToken();
// background and foreground handlers
FirebaseMessaging.onMessage.listen(_fcmForegroundHandler);
FirebaseMessaging.onBackgroundMessage(_fcmBackgroundHandler);
} catch (error) {
// if you are connected to firebase and still get error
// check the todo up in the function else ignore the error
// or stop fcm service from main.dart class
Logger().e(error);
}
}
///handle fcm notification settings (sound,badge..etc)
static Future<void> _setupFcmNotificationSettings() async {
//show notification with sound and badge
messaging.setForegroundNotificationPresentationOptions(
alert: true,
sound: true,
badge: true,
);
//NotificationSettings settings
await messaging.requestPermission(
alert: true,
badge: true,
sound: true,
provisional: true,
);
}
/// generate and save fcm token if its not already generated (generate only for 1 time)
static Future<void> _generateFcmToken() async {
try {
var token = await messaging.getToken();
if (token != null) {
MySharedPref.setFcmToken(token);
_sendFcmTokenToServer();
} else {
// retry generating token
await Future.delayed(const Duration(seconds: 5));
_generateFcmToken();
}
} catch (error) {
Logger().e(error);
}
}
/// this method will be triggered when the app generate fcm
/// token successfully
static _sendFcmTokenToServer() {
var token = MySharedPref.getFcmToken();
// TODO SEND FCM TOKEN TO SERVER
}
///handle fcm notification when app is closed/terminated
/// if you are wondering about this annotation read the following
/// https://stackoverflow.com/a/67083337
@pragma('vm:entry-point')
static Future<void> _fcmBackgroundHandler(RemoteMessage message) async {
AwesomeNotificationsHelper.showNotification(
id: 1,
title: message.notification?.title ?? 'Tittle',
body: message.notification?.body ?? 'Body',
payload: message.data
.cast(), // pass payload to the notification card so you can use it (when user click on notification)
);
}
//handle fcm notification when app is open
static Future<void> _fcmForegroundHandler(RemoteMessage message) async {
AwesomeNotificationsHelper.showNotification(
id: DateTime.now().microsecond,
title: message.notification?.title ?? 'Tittle',
body: message.notification?.body ?? 'Body',
payload: message.data
.cast(), // pass payload to the notification card so you can use it (when user click on notification)
);
}
}
And here's how I initialize AwesomeNotifications:
import 'package:awesome_notifications/awesome_notifications.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../routes/app_pages.dart';
class AwesomeNotificationsHelper {
// prevent making instance
AwesomeNotificationsHelper._();
// Notification lib
static AwesomeNotifications awesomeNotifications = AwesomeNotifications();
/// initialize local notifications service, create channels and groups
/// setup notifications button actions handlers
static init() async {
// initialize local notifications
await _initNotification();
// request permission to show notifications
await awesomeNotifications.requestPermissionToSendNotifications();
// list when user click on notifications
listenToActionButtons();
}
/// when user click on notification or click on button on the notification
static listenToActionButtons() {
// Only after at least the action method is set, the notification events are delivered
awesomeNotifications.setListeners(
onActionReceivedMethod: NotificationController.onActionReceivedMethod,
onNotificationCreatedMethod:
NotificationController.onNotificationCreatedMethod,
onNotificationDisplayedMethod:
NotificationController.onNotificationDisplayedMethod,
onDismissActionReceivedMethod:
NotificationController.onDismissActionReceivedMethod);
}
///init notifications channels
static _initNotification() async {
await awesomeNotifications.initialize(
null, // null mean it will show app icon on the notification (status bar)
[
NotificationChannel(
channelGroupKey: NotificationChannels.generalChannelGroupKey,
channelKey: NotificationChannels.generalChannelKey,
channelName: NotificationChannels.generalChannelName,
groupKey: NotificationChannels.generalGroupKey,
channelDescription: NotificationChannels.generalChannelDescription,
defaultColor: Colors.green,
ledColor: Colors.white,
channelShowBadge: true,
playSound: true,
importance: NotificationImportance.Max,
),
// NotificationChannel(
// channelGroupKey: NotificationChannels.chatChannelGroupKey,
// channelKey: NotificationChannels.chatChannelKey,
// channelName: NotificationChannels.chatChannelName,
// groupKey: NotificationChannels.chatGroupKey,
// channelDescription: NotificationChannels.chatChannelDescription,
// defaultColor: Colors.green,
// ledColor: Colors.white,
// channelShowBadge: true,
// playSound: true,
// importance: NotificationImportance.Max)
], channelGroups: [
NotificationChannelGroup(
channelGroupKey: NotificationChannels.generalChannelGroupKey,
channelGroupName: NotificationChannels.generalChannelGroupName,
),
// NotificationChannelGroup(
// channelGroupKey: NotificationChannels.chatChannelGroupKey,
// channelGroupName: NotificationChannels.chatChannelGroupName,
// )
]);
}
//display notification for user with sound
static showNotification(
{required String title,
required String body,
required int id,
String? channelKey,
String? groupKey,
NotificationLayout? notificationLayout,
String? summary,
List<NotificationActionButton>? actionButtons,
Map<String, String>? payload,
String? largeIcon}) async {
awesomeNotifications.isNotificationAllowed().then((isAllowed) {
if (!isAllowed) {
awesomeNotifications.requestPermissionToSendNotifications();
} else {
// u can show notification
awesomeNotifications.createNotification(
content: NotificationContent(
id: id,
title: title,
body: body,
groupKey: groupKey ?? NotificationChannels.generalGroupKey,
channelKey: channelKey ?? NotificationChannels.generalChannelKey,
showWhen:
true, // Hide/show the time elapsed since notification was displayed
payload:
payload, // data of the notification (it will be used when user clicks on notification)
notificationLayout: notificationLayout ??
NotificationLayout
.Default, // notification shape (message,media player..etc) For ex => NotificationLayout.Messaging
autoDismissible:
true, // dismiss notification when user clicks on it
summary:
summary, // for ex: New message (it will be shown on status bar before notificaiton shows up)
largeIcon:
largeIcon, // image of sender for ex (when someone send you message his image will be shown)
),
actionButtons: actionButtons,
);
}
});
}
}
class NotificationController {
/// Use this method to detect when a new notification or a schedule is created
@pragma("vm:entry-point")
static Future<void> onNotificationCreatedMethod(
ReceivedNotification receivedNotification) async {
// Your code goes here
}
/// Use this method to detect every time that a new notification is displayed
@pragma("vm:entry-point")
static Future<void> onNotificationDisplayedMethod(
ReceivedNotification receivedNotification) async {
// Your code goes here
}
/// Use this method to detect if the user dismissed a notification
@pragma("vm:entry-point")
static Future<void> onDismissActionReceivedMethod(
ReceivedAction receivedAction) async {
// Your code goes here
}
/// Use this method to detect when the user taps on a notification or action button
@pragma("vm:entry-point")
static Future<void> onActionReceivedMethod(
ReceivedAction receivedAction) async {
// Map<String, String?>? payload = receivedAction.payload;
// TODO handle clicking on notification
// example
// String routeToGetTo = payload['route'];
// normal navigation (Get.toNamed) will throw error
Get.key.currentState?.pushNamed(Routes.dashboard);
}
}
class NotificationChannels {
// // chat channel (for messages only)
// static String get chatChannelKey => "chat_channel";
// static String get chatChannelName => "Chat channel";
// static String get chatGroupKey => "chat group key";
// static String get chatChannelGroupKey => "chat_channel_group";
// static String get chatChannelGroupName => "Chat notifications channels";
// static String get chatChannelDescription => "Chat notifications channels";
// general channel (for all other notifications)
static String get generalChannelKey => "jobjourney_channel";
static String get generalGroupKey => "jobjourney group key";
static String get generalChannelGroupKey => "jobjourney_channel_group";
static String get generalChannelGroupName =>
"jobjourney notifications channel";
static String get generalChannelName => "jobjourney notifications channels";
static String get generalChannelDescription =>
"Notification channel for jobjourney notifications";
}
How can I identify and resolve the cause of receiving duplicate notifications when using FCM with Awesome Notifications in Flutter? Is there a known issue or conflict between these two notification handling mechanisms that I might be overlooking?
I think the reason why is because you are sending notification messages to the app from your server. When you do, the push notification from the server would be displayed and when awesome notifications takes over, it will also be displayed making it two. To prevent this, you have to send a data message. Read this for more
// so rather than send something like this. Which is a notification message
{
"message":{
"token":"bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
"notification":{
"title":"Portugal vs. Denmark",
"body":"great match!"
}
}
}
// you send this instead a data message
{
"message":{
"token":"bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
"data":{
"Nick" : "Mario",
"body" : "great match!",
"Room" : "PortugalVSDenmark"
}
}
}