How to update the UI with FCM background notifications?

Question

I want to navigate to some page when user taps on the notification. I'm using cloud messaging and flutter_local_notifications. I've managed to the do it with foreground notifications. It was pretty straightforward. I pasted the same code to my background notification handler, didn't work. Also I've look for onTap callback for notifications but couldn't find anything related to that.

Here's my background notification handler.

Future _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp();

  var androidDetails = AndroidNotificationDetails(
    "Channel ID",
    "Shannonside",
    "Shannonside Channel",
  );

  var iosDetails = IOSNotificationDetails();

  var details = NotificationDetails(
    android: androidDetails,
    iOS: iosDetails,
  );

  if (message.notification != null) {
    final title = message.notification.title;
    final body = message.notification.body;
    await NotificationService.localNotification.show(0, title, body, details);
  }
  if (message.data != null) {
    var articleId = message.data['articleId'];
    var category = message.data['category'];
    if (articleId != null && category != null) {
      print("ArticleID: $articleId Category $category");
      //@TODO Add navigation service and move to the article detail
      NavigatorService.instance.navigateTo("/articlePage", arguments: {
        "articleId": articleId.toString().toLowerCase(),
        "category": category.toString().toLowerCase(),
      });
    }
  }
}

It's not working, not even my function fired up. Also they stated in the documentation that it's not possible.

Since the handler runs in its own isolate outside your applications context, it is not possible to update application state or execute any UI impacting logic. You can however perform logic such as HTTP requests, IO operations (updating local storage), communicate with other plugins etc.

I know some apps do that, they open some page when you click on notification. Like a dynamic link. I want to implement this in my app.

user_15548649 · Answer

You can use function

  FirebaseMessaging.instance
        .getInitialMessage()
        .then((RemoteMessage message) {
      print("FirebaseMessaging.getInitialMessage");
      if (message != null) {

        Navigator.of(context).pushNamed('/call');
      }
    });

This function only run the first time when the app open, It gets last message

How to update the UI with FCM background notifications?

1 Answers