Flutter Firebase Cloud Messaging - Notification when app in background

Question

I am currently using FCM for push notifications. When my app is open, I receive the notification, however when the app is closed or in the background - I do not receive anything until I reopen the app. On XCode, I have background fetch enabled and remote notifications enabled. What should I check next? Thank you.

I am using firebase_messaging: ^5.1.6

with the code

    _firebaseMessaging.configure(
      onMessage: (Map<String, dynamic> message) async {
        print('message is $message');

        setState(
          () {
            showOverlayNotification((context) {
              return GestureDetector(
                onTap: () {},
                child: Platform.isIOS
                    ? MessageNotification(
                        title: message['notification']['title'],
                        body: message['notification']['body'],
                      )
                    : MessageNotification(
                        title: message['notification']['title'],
                        body: message['notification']['body'],
                      ),
              );
              // }
            }, duration: Duration(milliseconds: 4000));
          },
        );
      },
      onLaunch: (Map<String, dynamic> message) async {
        print('launching');
      },
      onResume: (Map<String, dynamic> message) async {
        print('resuming');
        print("onResume: $message");
      },
    );
    _firebaseMessaging.requestNotificationPermissions(
        const IosNotificationSettings(sound: true, badge: true, alert: true));
    _firebaseMessaging.onIosSettingsRegistered
        .listen((IosNotificationSettings settings) {
      print("Settings registered: $settings");
    });
    _firebaseMessaging.getToken().then((String token) {
      assert(token != null);
      setState(() {
        _firebaseMessaging.subscribeToTopic('all');
        print('subscribed');
        _homeScreenText = "Push Messaging token: $token";
        _saveDeviceToken(token);
      });
      print(_homeScreenText);
    }); ```


My flutter doctor response is:

```[✓] Flutter (Channel stable, v1.9.1+hotfix.2, on Mac OS X 10.14.6 18G103, locale en-GB)
    • Flutter version 1.9.1+hotfix.2 at /Users/student/flutter
    • Framework revision 2d2a1ffec9 (3 weeks ago), 2019-09-06 18:39:49 -0700
    • Engine revision b863200c37
    • Dart version 2.5.0


[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.0)
    • Android SDK at /Users/student/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.0, Build version 11A420a
    • CocoaPods version 1.7.4

[✓] Android Studio (version 3.4)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 38.2.1
    • Dart plugin version 183.6270
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)

[✓] VS Code (version 1.38.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.4.1

[✓] Connected device (1 available)
    • iPhone • e1100c84b1fc7871a6790337ef23c0fd7af397d5 • ios • iOS 12.4.1

Answer 1

mobile side

I tried hard and finally came up with this solution

Add get_it: ^4.0.4 to your pubspec.yaml

create file Locator.dart with this content:

import 'package:flutter/widgets.dart';

//Open Screen Without Context Service


class NavigationService {
  final  GlobalKey<NavigatorState> navigatorKey =
  new GlobalKey<NavigatorState>();

  navigateTo(String routeName , String name) {
    return navigatorKey.currentState.pushNamed(routeName , arguments: name);
  }

  goBack() {
    return navigatorKey.currentState.pop();
  }


}

create file Locator.dart with this content:

import 'package:get_it/get_it.dart';
import 'package:MyProject/Services/NavigationService.dart';

//Open Screen Without Context

GetIt locator = GetIt.instance;

void setupLocator() {
  locator.registerLazySingleton(() => NavigationService());
}

and finally your main.dart must be like this:

import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get_it/get_it.dart';
import 'package:MyProject/Services/NavigationService.dart';
import 'package:MyProject/Utils/locator.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();

  @override
  void initState() {
    GetIt.instance.registerSingleton<NavigationService>(NavigationService());
    getMessage();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App name',
      navigatorKey: locator<NavigationService>().navigatorKey,
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          primaryColorDark: Color(0xff440ABC),
          primaryColor: Color(0xff703FF7),
          primaryColorLight: Color(0xff7e51fa),
          accentColor: Color(0xffc09b01),
          hintColor: Color(0xff616161),
          backgroundColor: Color(0xffFEF9F9),
          bottomAppBarColor: Color(0xffFEF9F9),
          fontFamily: 'Sans'),

      ///MyRequestsScreen
      onGenerateRoute: (routeSettings) {
        switch (routeSettings.name) {
          case 'DestinationScreen':
            return MaterialPageRoute(
                builder: (context) => DestinationScreen());
          default:
            return null;
        }
      },
      home: MenuScreen(),
    );
  }

  void getMessage() {
    _firebaseMessaging.configure(onMessage: (Map<String, dynamic> message) async {
      locator<NavigationService>().navigateTo('DestinationScreen', "go");
    }, onResume: (Map<String, dynamic> message) async {
      locator<NavigationService>().navigateTo('DestinationScreen', "data");
    }, onLaunch: (Map<String, dynamic> message) async {
      locator<NavigationService>().navigateTo('DestinationScreen', "data");
    });
  }
}

server side

add:

"data": {
        "click_action": "FLUTTER_NOTIFICATION_CLICK"
    }

in your json like below:

{
    "to": "YOUR_PUSH_ID",
    "notification": {
        "body": "YOUR_MESSAGE",
        "OrganizationId": "2",
        "content_available": true,
        "priority": "high",
        "subtitle": "Elementary School",
        "title": "YOUR_TITLE"
    },
    "data": {
        "click_action": "FLUTTER_NOTIFICATION_CLICK"
    }
}