Flutter: The notification badge counter on the iOS app icon on the home screen is not showing up (using FCM)

Question

I am subscribing to a topic and pushing notifications using Firebase console/cloud messaging; On Android, everything works fine. On iOS, I receive notifications in the notification centre while the app is in foreground/background/terminated(profile mode)

PROBLEM: No badge appears on the iOS app icon.

I have been checking different articles and QAs but still no solution. Any clue or idea that can help me to do more investigation might solve it is appreciated.

Have tried > Running on both debug and profile mode, using iPhone 12 pro with iOS 15 & iPhone Xs

I have also tried flutter_app_badger still not getting any badge count.

in my main file;

Future<void> _messageHandler(RemoteMessage message) async {
  print('background message ${message.notification!.body}');
}

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  ).then((value) {
    FirebaseMessaging.onBackgroundMessage(_messageHandler);
  });

  runApp(MyApp());
}

In the initState of my app's first screen;

@override
  void initState() {
    super.initState();
        PushNotify().init(context);
    messaging = FirebaseMessaging.instance;
    messaging.subscribeToTopic("messaging");

    messaging.setForegroundNotificationPresentationOptions(
      alert: true, // Required to display a heads up notification
      badge: true,
      sound: true,
    );
    if (Platform.isIOS) {
      messaging.requestPermission(
        alert: true,
        announcement: false,
        badge: true,
        carPlay: false,
        criticalAlert: false,
        provisional: false,
        sound: true,
      );
    }

    FirebaseMessaging.onMessage.listen((RemoteMessage event) {

      // FlutterAppBadger.updateBadgeCount(1);

      if (event.notification != null) {
        print('Message also contained a notification: ${event.notification}');
      }
    });
    FirebaseMessaging.onMessageOpenedApp.listen((message) {
      print('Message clicked!');
      // FlutterAppBadger.removeBadge();
    });
  }

Answer 1

I struggled with this problem myself the past month.

I came to a realisation that the only way you're going to be able to show a badge ( on iOS ) when the notification is delivered is if you're sending that message from a custom-server and not the Firebase console.

The key issue here is the payload used to send the notification. You have to explicitly include a badge count in your payload for it to be shown on the iOS app icon.

If you're familiar with Typescript or Javascript, sending the message using this payload will show the given badge on the iOS app icon ( for messages sent when the app is in the background or terminated )

const createTokenPayload = (
  token: string,
  title: string,
  message: string,
  id?: string,
  badge?: number
): TokenMessage => {

  const payload: TokenMessage = {
    token: token,
    notification: {
      title: title,
      body: message,
    },
    apns: {
    payload: {
      aps: {
        contentAvailable: true,
        badge: badge, // this one here
        },
      },
    },
    android: {
    priority: "high",
    },
  };

  return payload;
};

That is for a notification sent to a single token.

I could not find a way to add badges when I wanted to send to all users subscribing to a topic. I thought the reason behind is; sending badges with the same value for all users subscribed to a topic irrespective of their current badge-counts is not good.

So the solution I am suggesting for this problem is sending individual notifications with the same message but different badges depending on the current value of the badge for each user.

I hope this helps.