[firebase_messaging] Notification on click listener not always firing and sometimes notification is received twice.

[erikkubica]

Hi everyone,

I am really desperate about this coz of deadlines in other times I would probably give more time to figure it out by myself.

I am trying to implement push notifications into our app and I have got some success after some sleepless hours caused by version mismatches (incompatible dependencies, android version targets, gradle versions,... literally took me 5 hours to get it working to receive a message) and poor documentation (from point of view of a beginner mobile developer) and lastly out of date and/or incomplete tutorials.

I have managed to receive and show a notification when app is terminated, when it runs in the background and when it's running in foreground.

But I have two issues I am trying to solve for hours:

1. Sometimes the notification is displayed twice
2. Only the second notification that popped up (from the first issue) executes the action I assign it to do. Sometimes it executes it like 2-3 times (probably caused by hot reloads).

The onNotificationClick which I assign to getInitialMessage and onMessageOpenedApp rarely executes at all when I click the notification. Feels like flutter does not know that there is a listener assigned to it.

This is the code I am working with so far (stripped down only to the necessary parts):

const AndroidNotificationChannel channel = AndroidNotificationChannel(
  '***censored***_notification_channel', // id
  '***censored*** Notifications', // title
  '', // description
  importance: Importance.high,
);

/// This is called on the beginning of main() to ensure when app is closed
/// user receives the notifications. Then it's called also in the build method of MyApp
/// so user receives foreground notifications.
Future<void> showNotification(RemoteMessage message) async {
  RemoteNotification notification = message.notification;
  AndroidNotification android = message.notification?.android;

  if (notification != null && android != null) {
    printWarning("Showing notification");
    localNotifications.show(
      notification.hashCode,
      notification.title,
      notification.body,
      NotificationDetails(
        android: AndroidNotificationDetails(
          channel.id,
          channel.name,
          channel.description,
          icon: android?.smallIcon,
        ),
      ),
    );
  }
}

/// This is called when user clicks on the notification
Future<void> onNotificationClick(RemoteMessage message) async {
  printWarning("Clicked on notification");
  if (message == null || message?.data == null) {
    printError("onMessageClick: Message or message.data is null");
    return;
  }

  final Map data = message?.data;

  printWarning("onMessageClick: Message is not null");

  if (data['screen'] != null && data['screen_args'] != null) {
    switch (message.data['screen']) {
      case 'PostScreen':
        PostsProvider _postsProvider = Provider.of(
          navigatorKey.currentContext,
          listen: false,
        );

        _postsProvider.fetchPosts(reload: true).then((List<Post> posts) {
          Post post = posts.firstWhere((element) {
            Map<String, dynamic> _screenArgs =
            jsonDecode(message.data['screen_args']);
            return element.id == _screenArgs['post'];
          });
          Navigator.of(navigatorKey.currentContext).pushNamed(
              '/post', arguments: {
            'post': post,
          });
        });

        break;
    }
  }
}

final FlutterLocalNotificationsPlugin localNotifications =
FlutterLocalNotificationsPlugin();

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp();

  await localNotifications
      .resolvePlatformSpecificImplementation<
      AndroidFlutterLocalNotificationsPlugin>()
      ?.createNotificationChannel(channel);

  // Permissions for background notifications
  await FirebaseMessaging.instance.requestPermission(
    alert: true,
    badge: true,
    sound: true,
  );

  // Permissions for foreground notifications
  await FirebaseMessaging.instance.setForegroundNotificationPresentationOptions(
    alert: true,
    badge: true,
    sound: true,
  );

  // Local notification settings, which allows to make foreground notifications
  await localNotifications.initialize(InitializationSettings(
    android: AndroidInitializationSettings("@drawable/icon"),
    iOS: IOSInitializationSettings(),
  ));

  FirebaseMessaging.onMessageOpenedApp.listen(onNotificationClick);
  FirebaseMessaging.instance.getInitialMessage().then(onNotificationClick);
  FirebaseMessaging.onBackgroundMessage(showNotification);

  runApp(MultiProvider(
    providers: [
      ...
    ],
    child: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    FirebaseMessaging.onMessage.listen(showNotification);
    FirebaseMessaging.onMessageOpenedApp.listen(onNotificationClick);
    FirebaseMessaging.instance.getInitialMessage().then(onNotificationClick);

    return Consumer<AuthProvider>(
      builder: (BuildContext _context, authProvider, Widget child) {
        return ...;
      },
    );
  }
}

The received notification:

{notification: {android: {sound: default, channelId: censored_notification_channel, clickAction: FLUTTER_NOTIFICATION_CLICK}, title: My push notification, body: New article just came out, click here to read it :)}, data: {screen_args: {"post":3231}, screen: PostScreen}, collapseKey: censored, messageId: 0:1621934778096245%2d9232a32d9232a3, sentTime: 1621934777733, from: /topics/all, ttl: 2419200}

pubspec yaml

dependencies:
    flutter:
        sdk: flutter

    intl: any
    webview_flutter: any
    cupertino_icons: ^1.0.2
    flutter_secure_storage: ^4.1.0
    http: ^0.13.0
    provider: ^5.0.0
    transparent_image: ^2.0.0
    flutter_html: ^1.0.0
    jwt_decoder: ^2.0.0
    json_annotation:
    advance_pdf_viewer: any
    path_provider: ^1.6.11
    url_launcher: ^6.0.2
    flutter_inappwebview: ^5.2.1
    fluttertoast: ^8.0.4
    jwt_decode: ^0.3.1
    photo_view: ^0.11.1
    flutter_svg: ^0.20.0-nullsafety.3
    firebase_messaging: any
    firebase_core: ^0.7.0
    flutter_local_notifications: ^4.0.1+2
    flutter_keyboard_visibility: ^4.0.6
    flutter_cached_pdfview: any
    flutter_cache_manager: any

And my flutter doctor

[√] Flutter (Channel stable, 2.0.5, on Microsoft Windows [Version 10.0.19042.985], locale en-US)
    • Flutter version 2.0.5 at C:\Program Files\flutter
    • Framework revision adc687823a (6 weeks ago), 2021-04-16 09:40:20 -0700
    • Engine revision b09f014e96
    • Dart version 2.12.3

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\erikk\AppData\Local\Android\sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 4.1.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)

[√] VS Code, 64-bit edition (version 1.55.2)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension can be installed from:
       https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[√] Connected device (3 available)
    • VOG L29 (mobile) • EHT7N19308008035 • android-arm64  • Android 10 (API 29)
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 90.0.4430.212
    • Edge (web)       • edge             • web-javascript • Microsoft Edge 90.0.818.66

• No issues found!

Thank you for any help or guidance on what am I doing wrong.