How to open my app from background and navigate to a page on receiving a notification message in flutter? - firebase

I need to open the app automatically on receiving a notification message. Is it possible in flutter?
Below is the code for handling the background messages and it works.
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
await Firebase.initializeApp();
print('Handling a background message ${message.messageId}');
}
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
......
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp()
)
);
What I need is I have a separate page that needs to popup when that particular function is executed (When the app is in background). Can anyone help me out with this! Thanks in advance

await _firebaseMessaging.subscribeToTopic('topic name');
_firebaseMessaging.configure
(
// The onMessage function triggers when the notification is
received while we are running the app.
onMessage: (message) async
{
setState(()
{
messageTitle = message["notification"]["title"];
messageDescription = message["notification"]["description"];
notificationAlert = "New Notification Alert";
});
},
// The onResume function triggers when we receive the notification alert in the device notification bar and opens the app through the push notification itself. In this case, the app can be running in the background or not running at all.
onResume: (message) async
{
print("ON RESUME");
setState(()
{
messageTitle = message["data"]["title"];
messageDescription = message["notification"]["description"];
notificationAlert = "Application opened from Notification";
});
},
onLaunch: (Map<String, dynamic> message) async // Called when app is terminated
{
print("onLaunch: $message");
var data = message["data"];
print(data);
// Navigator.pushNamed(context, "details");
}
);
In this code the onResume function will help you run the app from background so you can code inside onResume and navigate to your specified screen.

Related

Flutter - Firebase Cloud Messaging Navigation in onLaunch doesn't work

I am building an app which receives push notifications using FCM.
I want to route to a specific screen when a notification is clicked (for example, the user's profile).
On Android, it works perfectly fine when the app is just closed (and not "killed"), but when the app is terminated ("killed") it is not working.
On iOS, it doesn't work at all.
I am implementing it life this:
NotificationsHandler:
class NotificationsHandler {
static final NotificationsHandler instance = NotificationsHandler();
final _fcm = FirebaseMessaging();
void onBackgroundNotificationRecevied({Function onReceived}) {
_fcm.configure(
onResume: (message) => onReceived(message),
onLaunch: (message) => onReceived(message),
);
}
}
myMainScreen's initState:
#override
void initState() {
NotificationsHandler.instance.onBackgroundNotificationRecevied(
onReceived: (message) async {
final userId = message['data']['userId'];
final user = this.users.firstWhere((currentUser) => currentUser.id == userId);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => UserProfileScreen(
user,
),
),
);
}
);
super.initState();
}
Code for sending the notifications (through an external React admin panel):
const payload = {
notification: {
title: `myTitle`,
body: `My message`,
sound: "default",
badge: "1",
click_action: "FLUTTER_NOTIFICATION_CLICK",
},
data: {
click_action: 'FLUTTER_NOTIFICATION_CLICK',
userId: myUserId,
},
};
const options = {
priority: 'high',
timeToLive: 60 * 60 * 24
};
admin.messaging().sendToTopic('myTopic', payload, options);
Does anyone know why it isn't working?
Thank you!
You can try to use getInitialMessage instead of onLaunch. I believe this will do what you want as documentation indicated the following lines:
This should be used to determine whether specific notification interaction should open the app with a specific purpose (e.g. opening a chat message, specific screen etc).
#override
void initState() {
super.initState();
FirebaseMessaging.instance.getInitialMessage().then((RemoteMessage message) {
if (message != null) {
Navigator.pushNamed(context, '/message', arguments: MessageArguments(message, true));
}
});
}
I assume that you're using firebase_messaging package.
iOS
If you're testing it on simulator, it won't work. It's stated in the documentation that:
FCM via APNs does not work on iOS Simulators. To receive messages & notifications a real device is required.
Android
On Android, if the user force quits the app from device settings, it must be manually reopened again for messages to start working.
More info here.
Based on my experience, I remember that onLaunch Callback function fires right after execute main function, even before the initstate method.
What I did was locate service class using service locator(e.g get_it) at main function before runApp() then onLaunch Callback set initial configuration so that your App can use it's value.
For example
final getIt = GetIt.instance;
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
getIt.registerSingleton<Configurator>(Configurator());///start configuration service
FirebaseMessagingService.initialise()///start firebase messaging service
runApp();
}
...
class FirebaseMessagingService {
final FirebaseMessaging _fcm;
FirebaseMessagingService.initialise() : _fcm = FirebaseMessaging() {
if (Platform.isIOS) {
_fcm.requestNotificationPermissions(IosNotificationSettings());
}
_fcm.configure(
...
onLaunch: _launchMessageHandler,
);
}
}
//top-level function or static method
_launchMessageHandler(Map<String, dynamic> message) async {
//some parsing logic
...
getIt<Configurator>().setInitialConfig(parsed_data);
}
...
//then
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
final config = getIt<Configurator>().config;
//do something
}};
You will have to implement those whole settings but it's flow is like above roughly.
I assume your trouble is more towards navigating to another screen upon clicking the notification.
If that is the case create a class for routing.
an example would be as below:
class Navigator{
GlobalKey<NavigatorState> _navigator;
/// Singleton getter
static Navigator get instance => _instance ??= Navigator._();
/// Singleton Holder
static Navigator _instance;
/// Private Constructor
Navigator._() {
_navigator = GlobalKey<NavigatorState>();
}
GlobalKey<NavigatorState> get navigatorKey => _navigator;
Future<dynamic> navigateTo(String routeName, [dynamic arguments]) =>
navigatorKey.currentState.pushNamed(routeName, arguments: arguments);
Now comes the screen/pages
class CustomRoutes {
const CustomRoutes._();
factory CustomRoutes() => CustomRoutes._();
static const String HomeRoute = 'HomeRoute';
...
...
static Route<dynamic> generateRoute(RouteSettings settings) {
switch (settings.name) {
case CustomRoutes.HomeRoute:
return MaterialPageRoute(builder: (_) => HomePage());
default:
return MaterialPageRoute(
builder: (_) => Scaffold(
body: Center(child: Text('No path for ${settings.name}'))));
}
}
}
So if u wish to go to HomePage you can just invoke
await Navigator.instance.navigateTo(CustomRoutes.HomeRoute, someArguments)
Do remember to register the globalkey to your materialapp
MaterialApp(
...
...
navigatorKey: Navigator.instance.navigatorKey
...);

How to configure Firebase Messaging with latest version in Flutter?

I was using the below line of code for firebase messaging configuration for flutter noticification configuration , but now after integrating to the latest version of the firebase messaging it is giving me error
CODE LINE
messaging.configure(onMessage: (Map<String, dynamic> message){}
ERROR in DART Analysis
error: The method 'configure' isn't defined for the type 'FirebaseMessaging'.
FirebaseMessaging.configure() is removed by firebase team:
Reason:
The previous implementation of configure() caused unintended side effects if called multiple times (either to register a different handler or remove handlers). This change allows developers to be more explicit about registering handlers and removing them without affecting others via Streams.
Use FirebaseMessaging.onMessage method to get messages
FirebaseMessaging.onMessage.listen((RemoteMessage message) {
RemoteNotification notification = message.notification;
AndroidNotification android = message.notification?.android;
});
Use FirebaseMessaging.onMessageOpenedApp as a replacement for onLaunch and onResume handlers.
FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
print('A new onMessageOpenedApp event was published!');
Navigator.pushNamed(context, '/message',
arguments: MessageArguments(message, true));
});
Please check following example.
https://github.com/FirebaseExtended/flutterfire/blob/master/packages/firebase_messaging/firebase_messaging/example/lib/main.dart
#override
void initState() {
super.initState();
FirebaseMessaging.instance
.getInitialMessage()
.then((RemoteMessage message) {
if (message != null) {
Navigator.pushNamed(context, '/message',
arguments: MessageArguments(message, true));
}
});
FirebaseMessaging.onMessage.listen((RemoteMessage message) {
RemoteNotification notification = message.notification;
AndroidNotification android = message.notification?.android;
if (notification != null && android != null) {
flutterLocalNotificationsPlugin.show(
notification.hashCode,
notification.title,
notification.body,
NotificationDetails(
android: AndroidNotificationDetails(
channel.id,
channel.name,
channel.description,
// TODO add a proper drawable resource to android, for now using
// one that already exists in example app.
icon: 'launch_background',
),
));
}
});
FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
print('A new onMessageOpenedApp event was published!');
Navigator.pushNamed(context, '/message',
arguments: MessageArguments(message, true));
});
}
Building on Jitesh's answer, for me implementation of getInitialMessage is needed to make the navigation works when the app is terminated (replacement for onLaunch)
// workaround for onLaunch: When the app is completely closed (not in the background) and opened directly from the push notification
FirebaseMessaging.instance.getInitialMessage().then((RemoteMessage message) {
print('getInitialMessage data: ${message.data}');
_serialiseAndNavigate(message);
});
// onMessage: When the app is open and it receives a push notification
FirebaseMessaging.onMessage.listen((RemoteMessage message) {
print("onMessage data: ${message.data}");
});
// replacement for onResume: When the app is in the background and opened directly from the push notification.
FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
print('onMessageOpenedApp data: ${message.data}');
_serialiseAndNavigate(message);
});
Updated One:
FirebaseMessagingService is important to get started in the beginning of app. And for that sake, you need to follow this:
Declare this function first :
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
debugPrint("Firebase Messaging firebase is initialized");
await Firebase.initializeApp();
}
And call this function in the main(){} of app:
FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
And then you will be able to use these functions:
FirebaseMessaging.onMessage method to get messages
FirebaseMessaging.onMessage.listen((RemoteMessage message) {
RemoteNotification notification = message.notification;
AndroidNotification android = message.notification?.android;
});
FirebaseMessaging.onMessageOpenedApp as a replacement for onLaunch and onResume handlers.
FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
print('A new onMessageOpenedApp event was published!');
Navigator.pushNamed(context, '/message',
arguments: MessageArguments(message, true));
});
Event handling:
Event handling has been reworked to provide a more intuitive API for developers. Foreground-based events can now be accessed via Streams:
FirebaseMessaging.onMessage Returns a Stream called when an incoming FCM payload is received whilst the Flutter instance is in the foreground, containing a [RemoteMessage].
FirebaseMessaging.onMessageOpenedApp Returns a [Stream] that is called when a user presses a notification displayed via FCM. This replaces the previous onLaunch and onResume handlers.
FirebaseMessaging.onBackgroundMessage() Sets a background message handler to trigger when the app is in the background or terminated.
IosNotificationSettings:

How to show a push-notification when the application is open(foreground), when OnMessage is triggered?

Im use Flutter and Firebase Messaging.
I im configure Firebase like in example: firebaseMessaging.configure(
onMessage: ...
onLaunch: ...
onResume: ...
)
But i wanna see push-notification even when app is open.
Roughly speaking onMessage should work like onResume. How can i do this?
onMessage: (Map<String, dynamic> message) async {
showNotification(message);
print('on message $message');
}
showNotification(Map<String, dynamic> msg) async {
var android = new AndroidNotificationDetails(
'your channel id',//channel id
"your channel name",//channel name
"your channel description",//channel desc todo set all this right
icon: 'mipmap/launcher_icon'//add your icon here
);
var iOS = new IOSNotificationDetails();
var platform = new NotificationDetails(android, iOS);
await flutterLocalNotificationsPlugin
.show(0, msg['notification']['title'], msg['notification']['body'], platform);
}
I used flutter_local_notifications: ^1.2.2 to show local notification foreground.
Additionally, if you are implementing for IOS don't forget to ask for notification permission.

How to handle fcm when app in in background and play sound on notification arrival in flutter

I want to play a sound when a notification arrives, but I am not able to play. If the app is opened the sound is played and is working fine. But when the app is killed I see the notification but the sound is not played.
Please help how to do it.
#override
void initState()
{
super.initState();
final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();
_firebaseMessaging.configure(
onMessage: (Map<String, dynamic> message) async {
print('on message $message');
String key = message["data"]["fcm_call_api"];
if (key == "approval") {}
if(Platform.isAndroid)``
{
_playSound();
}
},
onResume: (Map<String, dynamic> message) async {
},
onLaunch: (Map<String, dynamic> message) async {
_playSound();
},
);
_firebaseMessaging.requestNotificationPermissions(
const IosNotificationSettings(sound: true, badge: true, alert: true));
_firebaseMessaging.onIosSettingsRegistered
.listen((IosNotificationSettings settings) {
});
_firebaseMessaging.getToken().then((String token) {
assert(token != null);
setState(() {
_homeScreenText = "Push Messaging token: $token";
});
});
}
void _playSound() {
AudioCache player = new AudioCache();
const alarmAudioPath = "notification_tone.mp3";
player.play(alarmAudioPath);
}
You did not specify on which platform you experience this problem, but overall background messages with the firebase messaging plugin is very limited right now, but there is a PR actively fixing this: https://github.com/flutter/plugins/pull/1900 (related issue: https://github.com/flutter/flutter/issues/22072)
Right now it is documented behavior that messages arriving in the background are only delivered once it is brought back into foreground (on android). See it's documentation at https://github.com/flutter/plugins/tree/master/packages/firebase_messaging#receiving-messages:

Flutter firebase push notification not routing to specific page

I am trying to navigate to a specific page when a notification is clicked. The onResume and onMessage callbacks are invoked when I click on the notification and I can see the message in the log screen. However, when I try to navigate to a specific page, I am not able to do that and there is no error message in the log too. P.S. When I used a Navigator key to access the state of the context(since in initState, the navigator cannot be used) I got an error saying no context to build. What is the mistake ??
I have tried Navigator.push, Calling a method and routing from within that method, used navigator key.
void initState() {
messaging.configure(
onMessage: (Map<String, dynamic> message) async {
print('onMessage: $message');
Navigator.of(context).push(
MaterialPageRoute<BuildContext>(builder: (_) => PageContent(value:1)));
},
onLaunch: (Map<String, dynamic> message) async {
print('onLaunch: $message');
Navigator.of(context).push(
MaterialPageRoute<BuildContext>(builder: (_) => PageContent(value:2)));
},
onResume: (Map<String, dynamic> message) async {
print('onResume:- This is the message $message');
Navigator.of(context).push(
MaterialPageRoute<BuildContext>(builder: (_) => MoviesList()));
},
);
I expect the code to be loaded when the notification is tapped and route to a new page( MoviesList or PageContent in my case). But only my home screen is visible.
Context is not available in init state
I came across this issue and get resolved using redux concepts
add a key in a global state like appNavigator
sample code for global app state (app_state.dart),
import 'package:built_collection/built_collection.dart';
import 'package:built_value/built_value.dart';
import 'package:flutter/material.dart' hide Builder;
part 'app_state.g.dart';
abstract class AppState implements Built<AppState, AppStateBuilder> {
factory AppState([AppStateBuilder updates(AppStateBuilder builder)]) =
_$AppState;
AppState._();
static AppState initState() {
return new AppState((AppStateBuilder b) {
b
..appNavigator = new GlobalKey<NavigatorState>(debugLabel: 'debugLabel')
.. isLoggedIn = false
..isLoading = false;
});
}
// Never change this key through out the app lifecycle
GlobalKey<NavigatorState> get appNavigator;
// login state ***************************************************************************
bool get isLoggedIn;
// indicates loading state ***************************************************************************
bool get isLoading;
}
dispatch an action onMessage received from the notification like
onMessage: (Map<String, dynamic> message) async {
print('onMessage: $message');
store.dispatch(new RedirectUserOnNotification());
},
and in middleware route to a specific page with conditions validation as you needed.
void redirectuser(Store<AppState> store, RedirectUserOnNotification action,
NextDispatcher next) async {
store.state.appNavigator.currentState.pushNamed(someRouteName);
next(action);
}
Note: I have used build_value concepts in a model file

Resources