Send push notifications 💌 in Flutter with Firebase Cloud Messaging (FCM) to a single device, topic, or user segment.  https://fireship.io/lessons/flutter-push-notifications-fcm-guide/

FCM https://firebase.google.com/docs/cloud-messaging/
FlutterFire Docs https://pub.dev/packages/firebase_messaging

#flutter #fcm #firebase

Don't forget to take the quiz 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
2024-02-04T06:42:21.679Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
5947151a-430f-4a4c-a223-cd5ee416cd12
c5984c9258537d1d6c0e5e5b35d1831b166337ed5e3204b2a7bc22d6460d3737
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
When used correctly, push notifications can be an extremely powerful way to drive user engagement, but when used incorrectly they can do the exact opposite and drive users to uninstall your app.
Luckily, there's a service called Firebase Cloud Messaging that allows you to be smart about the way you broadcast notifications to your users.
Take it from me.
Be smart.
App.
Be safe.
In today's video, you'll learn how to receive messages from a front end Flutter app and also how to broadcast them from a back end Cloud function.
App.
We'll look at how to broadcast notifications to a single device or user, to a topic, or to a segment of your user base based on the analytics data that you collect.
App.
By the end of this video, you'll be able to combine these techniques together to create a sophisticated pipeline for app notifications.
If you're new here, like unsubscribe, and you can find the full source code on Fireship IO.
And congrats to Matea Petrovic, your last week's t shirt winner, but there will be another giveaway with this video, all you have to do is leave a comment below.
App.
Now before we get into the actual source code, let's talk about the 3 main ways that you can send push notifications with Firebase Cloud Messaging.
App.
The most broad approach is to send a notification to a segment of your users.
This could be as broad as all the users for your Android app, but typically, you're going to drill down to a smaller audience.
App.
For example, you might want to target all of your Korean Android users whose last app engagement was more than 10 days ago.
And that will tell you exactly how many users will receive this notification, as well as their relative size to the total user base.
On top of that, you can use Firebase Predictions to dynamically segment your users and send notifications based on the type of engagement you're trying to get.
App.
And that means you can just fire the UX person who's in charge of doing this manually and let Google's AI handle it.
What are you gonna be?
You gonna fire me?
No.
App.
I already fired you.
Why are you still here?
Another option is to manually subscribe a user to a notification topic.
App.
This is useful if you want a user to opt in to a certain topic or if you want to programmatically assign them to a topic in the background of your app.
App.
For example, a user might follow a certain category like puppies, so you want to subscribe them to puppy notifications.
Then the 3rd and most personalized way to send applications is to send them to a single device or user.
And you can do that because every device that you have permission to send notifications to will give you a token.
App.
A token itself is just a string that identifies the device, and in a few minutes we'll look at how we can save these tokens to Firestore and associate them with a user.
App.
And that makes it possible to send notifications based on individual user activities.
Now as we'll see in this video, the actual sending of notifications can either be done on the Firebase console, or app.
Or you can do it programmatically with a Cloud Function.
In most real world applications, you'll be doing most of the notification sending with a Cloud Function, especially if you're sending to individual device tokens.
App.
Now that you know a little bit about Firebase Cloud Messaging, let's go ahead and jump into a Flutter app that has already been configured with Firebase for both iOS and Android.
App.
On Android, there's only one additional optional step to set up push notifications.
You just need to add this intent filter to your Android manifest file.
App.
On iOS, there are a few more steps involved because you need to register a certificate with the Apple Push Notification service.
There's already a detailed official guide for this, app.
So I'll go ahead and link to that in the video description.
The next thing we'll take a look at is the pubspec yaml file, and you can see here we have Firebase core, auth, Cloud Firestore and messaging.
Now if we go into the main dart file, you'll see here that I am importing dart I o so we can do platform checking, app, and we'll also import our Firebase services.
Now typically, I try to keep the business logic separated from the UI logic.
But this is a situation where our logic is pretty tightly coupled app together, and I think it makes the most sense to handle everything in a single stateful widget.
So this message handler widget will take care of getting permission from the user, app, saving the device token to the database if necessary and displaying the actual UI elements when a notification is received.
Now the first thing that we wanna focus on is the UI, app.
And there are 3 different callbacks that you need to know about.
The on message callback will typically be called when the app is running in the foreground.
App.
That means the user is actively using the app when the message is received.
Then you have the on resume callback, which will be called when the app is running in the background, app.
And the user clicks on the notification from the actual device.
And the 3rd callback on launch will run if the user clicks on the notification, but the app is completely terminated and needs to reboot.
App.
Now when it comes to Android, you need to set the click action to Flutter notification click to use the background or terminated callbacks.
And we'll look at exactly how to do that when we get to the Cloud Functions.
App.
Now the only callback that we care to implement for this demo is on message when the app is in the foreground, and we can use one of Flutter's built in widgets like a snack bar or an alert dialog.
App.
The snack bar approach is a lot more subtle because it just shows a bar down at the bottom and will be automatically dismissed if the user doesn't engage with it.
But if you have a really important message that should interrupt the current experience, then you can use an alert dialogue.
And that will force the user to manually dismiss the message.
Inside of a knit state, we'll call fcm configure to set up callbacks that will handle the message when it's received by the device.
And each one of these callbacks will give us access to the actual notification data payload.
App.
To display a Snackbar, we can first define the Snackbar widget and then we'll set the text to the notification title.
And you can optionally add an action here app to go to a different screen when the user presses on the notification.
Then to actually show it, we call scaffold of context show snack bar, which will look up the widget tree for the nearest scaffold and display it.
App.
So that's all we need for a SnackBar.
If we want to show an alert dialog, we can use the built in show dialog method and then define a builder that defines an alert dialog, app, and we can pass that the notification title and the body.
And then we can dismiss the alert by simply calling navigator pop.
Now we could also define the on launch and on our Zoom callbacks, app.
Or we can leave them blank, which will just cause the app to be opened if a notification is clicked on.
In most cases, you'll probably want to navigate to a specific screen when the user clicks on a notification in the background.
App.
At this point, we actually have everything in place we need to start receiving notifications on the device as long as that device is Android.
On iOS, you need to explicitly request permission from the user, app.
And that's actually really easy to do.
We simply call FCM request notification permission and then pass in the iOS notification settings.
App.
Now if we go to the Firebase console and send a notification to a segment, it should be received by this device.
Now the next thing we might wanna do is subscribe the user to a specific topic.
You app.
You can subscribe or unsubscribe from a topic with a single line of code.
You might do this entirely in the background, or you might have a button that says subscribe to puppy notifications that the user clicks, ads.
And now they're subscribed to that topic of notifications.
And now if we want to send a notification to all devices subscribed to that topic, we can do so in the Firebase console or with a cloud function.
App.
But what if we want to send notifications to an individual user or device?
To make that happen, we'll need to retrieve the FCM token from this device app and then save it in a back end database somewhere like Firestore.
Before we implement the code, let's start by looking at the actual database model.
We have a user's collection that contains some information about a user profile.
And then under that, we have a sub collection called tokens, and each document in this collection app.
Represents a device token that the user has given us permission to send notifications to.
And a token is nothing more than a unique string, app.
So we can use the actual device token as the document ID in the sub collection, and that just makes it easy to enforce uniqueness for each document in this collection.
App.
Now getting back to our Flutter code, the next thing we'll do is implement a method called save device token.
And I'm just referencing a mock user ID, app.
But in a real app, you would most likely await the auth current user after you've already logged a user into your app.
From there, we can retrieve the FCM token from the device by calling get token, app.
And then we'll make a reference to that token sub collection under the user that uses the FCM token itself as the document ID.
And then we can also save some optional information here if we want like a created at timestamp or the platform operating system.
From there, we'll go back to our init state life cycle hook on this widget.
And on Android, we can simply run this code when the widget is initialized because the token should already be available.
But on iOS, we need to make sure that the user has actually finished giving us permission.
App.
So we'll go ahead and listen to the stream, and then once we have data, then we'll go ahead and save the device token.
Now go ahead and restart your Flutter app, and you should see the device token being saved to Firestore when you fire it up.
Then you can go ahead and copy that token and bring it over to the FCM screen, and you can send a notification directly to this device.
App.
So that takes care of all of our front end code, but now the question becomes, how do we dynamically send notifications to a user based on their actual activity in this app?
App.
And the best answer to that question is Firebase Cloud Functions, although you can use any of the Firebase Admin SDKs to send messages.
App.
Go ahead and run Firebase init functions from the root of your project, and I would highly recommend using TypeScript as the language here.
And if you're not an expert with TypeScript or JavaScript, don't worry because the app.
The implementation details for this code are really simple.
1st, we'll go into the index ts file and import Firebase admin, initialize it, app and then set up variables for Firestore and FCM.
When it comes to sending notifications to a specific topic, you'll most likely do that when something changes in the database.
App.
For example, you might have a puppies collection, and you want to notify everybody subscribed to the puppies topic when a new document is added to the database.
App.
We can do that by setting up a cloud function that listens to the Firestore on create event in the puppies collection.
When a new document is created, app.
That's going to give us access to the puppy data on that document, and then we can create a notification payload with that data.
The cool thing about this app.
Is that we can use the data in the Firestore document to customize the notification itself.
For example, we'll say puppy name is ready for adoption.
App.
Now there's a lot of different ways you can customize the notification itself, but the most important properties are the title, body, and icon because they dictate how it appears on the actual notification tray on the device.
And you'll also want to set the click action to flutter notification click if you want to use those background callbacks that we looked at earlier.
App.
And the final step is to simply send a notification, which we can do by calling fcm send a topic along with the topic name and the notification payload.
App.
And that's all the code it takes to broadcast a notification out to potentially millions of devices that are subscribed to this puppy's topic.
Now let's go ahead and write a second cloud function that will listen to the orders collection, and then it will send out a notification to an individual user whenever they've received a new order.
When an order document is created, we'll assume that there is a price, a product, and then a user ID for whatever user sold that product.
In the cloud function, we'll go ahead and take that user ID to make a query to that token's collection under the user ID.
App.
That will give us a query that returns all of the device tokens for a specific user.
Now because each one of those documents uses the actual FCM token as its ID, app.
We can simply map the snapshots down to an array of the document IDs.
Then we'll go ahead and format the message payload just like we did in the previous example, app.
And then we'll say fcm send to device with this array of tokens, and that will send out a push notification to every device owned by this user.
App.
Now the final step is to deploy the functions.
Then if we go into Firestore and create a document, it should broadcast the notification to our emulator or local device.
App.
And we now have a full stack solution for cloud messaging that can handle multiple paradigms of app notifications.
I'm gonna go ahead and wrap things up there.
App.
If this video helped you, please like and subscribe, and consider becoming a pro member at Fireship IO to get access to the full Flutter Firebase course.
S.
Thanks for watching and I will talk to you soon.

Speaker 0: When used correctly, push notifications can be an extremely powerful way to drive user engagement, but when used incorrectly they can do the exact opposite and drive users to uninstall your app. Luckily, there's a service called Firebase Cloud Messaging that allows you to be smart about the way you broadcast notifications to your users. Take it from me. Be smart. App.

Be safe. In today's video, you'll learn how to receive messages from a front end Flutter app and also how to broadcast them from a back end Cloud function. App. We'll look at how to broadcast notifications to a single device or user, to a topic, or to a segment of your user base based on the analytics data that you collect. App.

By the end of this video, you'll be able to combine these techniques together to create a sophisticated pipeline for app notifications. If you're new here, like unsubscribe, and you can find the full source code on Fireship IO. And congrats to Matea Petrovic, your last week's t shirt winner, but there will be another giveaway with this video, all you have to do is leave a comment below. App. Now before we get into the actual source code, let's talk about the 3 main ways that you can send push notifications with Firebase Cloud Messaging.

App. The most broad approach is to send a notification to a segment of your users. This could be as broad as all the users for your Android app, but typically, you're going to drill down to a smaller audience. App. For example, you might want to target all of your Korean Android users whose last app engagement was more than 10 days ago.

And that will tell you exactly how many users will receive this notification, as well as their relative size to the total user base. On top of that, you can use Firebase Predictions to dynamically segment your users and send notifications based on the type of engagement you're trying to get. App. And that means you can just fire the UX person who's in charge of doing this manually and let Google's AI handle it. What are you gonna be?

You gonna fire me? No. App. I already fired you. Why are you still here?

Another option is to manually subscribe a user to a notification topic. App. This is useful if you want a user to opt in to a certain topic or if you want to programmatically assign them to a topic in the background of your app. App. For example, a user might follow a certain category like puppies, so you want to subscribe them to puppy notifications.

Then the 3rd and most personalized way to send applications is to send them to a single device or user. And you can do that because every device that you have permission to send notifications to will give you a token. App. A token itself is just a string that identifies the device, and in a few minutes we'll look at how we can save these tokens to Firestore and associate them with a user. App.

And that makes it possible to send notifications based on individual user activities. Now as we'll see in this video, the actual sending of notifications can either be done on the Firebase console, or app. Or you can do it programmatically with a Cloud Function. In most real world applications, you'll be doing most of the notification sending with a Cloud Function, especially if you're sending to individual device tokens. App.

Now that you know a little bit about Firebase Cloud Messaging, let's go ahead and jump into a Flutter app that has already been configured with Firebase for both iOS and Android. App. On Android, there's only one additional optional step to set up push notifications. You just need to add this intent filter to your Android manifest file. App.

On iOS, there are a few more steps involved because you need to register a certificate with the Apple Push Notification service. There's already a detailed official guide for this, app. So I'll go ahead and link to that in the video description. The next thing we'll take a look at is the pubspec yaml file, and you can see here we have Firebase core, auth, Cloud Firestore and messaging. Now if we go into the main dart file, you'll see here that I am importing dart I o so we can do platform checking, app, and we'll also import our Firebase services.

Now typically, I try to keep the business logic separated from the UI logic. But this is a situation where our logic is pretty tightly coupled app together, and I think it makes the most sense to handle everything in a single stateful widget. So this message handler widget will take care of getting permission from the user, app, saving the device token to the database if necessary and displaying the actual UI elements when a notification is received. Now the first thing that we wanna focus on is the UI, app. And there are 3 different callbacks that you need to know about.

The on message callback will typically be called when the app is running in the foreground. App. That means the user is actively using the app when the message is received. Then you have the on resume callback, which will be called when the app is running in the background, app. And the user clicks on the notification from the actual device.

And the 3rd callback on launch will run if the user clicks on the notification, but the app is completely terminated and needs to reboot. App. Now when it comes to Android, you need to set the click action to Flutter notification click to use the background or terminated callbacks. And we'll look at exactly how to do that when we get to the Cloud Functions. App.

Now the only callback that we care to implement for this demo is on message when the app is in the foreground, and we can use one of Flutter's built in widgets like a snack bar or an alert dialog. App. The snack bar approach is a lot more subtle because it just shows a bar down at the bottom and will be automatically dismissed if the user doesn't engage with it. But if you have a really important message that should interrupt the current experience, then you can use an alert dialogue. And that will force the user to manually dismiss the message.

Inside of a knit state, we'll call fcm configure to set up callbacks that will handle the message when it's received by the device. And each one of these callbacks will give us access to the actual notification data payload. App. To display a Snackbar, we can first define the Snackbar widget and then we'll set the text to the notification title. And you can optionally add an action here app to go to a different screen when the user presses on the notification.

Then to actually show it, we call scaffold of context show snack bar, which will look up the widget tree for the nearest scaffold and display it. App. So that's all we need for a SnackBar. If we want to show an alert dialog, we can use the built in show dialog method and then define a builder that defines an alert dialog, app, and we can pass that the notification title and the body. And then we can dismiss the alert by simply calling navigator pop.

Now we could also define the on launch and on our Zoom callbacks, app. Or we can leave them blank, which will just cause the app to be opened if a notification is clicked on. In most cases, you'll probably want to navigate to a specific screen when the user clicks on a notification in the background. App. At this point, we actually have everything in place we need to start receiving notifications on the device as long as that device is Android.

On iOS, you need to explicitly request permission from the user, app. And that's actually really easy to do. We simply call FCM request notification permission and then pass in the iOS notification settings. App. Now if we go to the Firebase console and send a notification to a segment, it should be received by this device.

Now the next thing we might wanna do is subscribe the user to a specific topic. You app. You can subscribe or unsubscribe from a topic with a single line of code. You might do this entirely in the background, or you might have a button that says subscribe to puppy notifications that the user clicks, ads. And now they're subscribed to that topic of notifications.

And now if we want to send a notification to all devices subscribed to that topic, we can do so in the Firebase console or with a cloud function. App. But what if we want to send notifications to an individual user or device? To make that happen, we'll need to retrieve the FCM token from this device app and then save it in a back end database somewhere like Firestore. Before we implement the code, let's start by looking at the actual database model.

We have a user's collection that contains some information about a user profile. And then under that, we have a sub collection called tokens, and each document in this collection app. Represents a device token that the user has given us permission to send notifications to. And a token is nothing more than a unique string, app. So we can use the actual device token as the document ID in the sub collection, and that just makes it easy to enforce uniqueness for each document in this collection.

App. Now getting back to our Flutter code, the next thing we'll do is implement a method called save device token. And I'm just referencing a mock user ID, app. But in a real app, you would most likely await the auth current user after you've already logged a user into your app. From there, we can retrieve the FCM token from the device by calling get token, app.

And then we'll make a reference to that token sub collection under the user that uses the FCM token itself as the document ID. And then we can also save some optional information here if we want like a created at timestamp or the platform operating system. From there, we'll go back to our init state life cycle hook on this widget. And on Android, we can simply run this code when the widget is initialized because the token should already be available. But on iOS, we need to make sure that the user has actually finished giving us permission.

App. So we'll go ahead and listen to the stream, and then once we have data, then we'll go ahead and save the device token. Now go ahead and restart your Flutter app, and you should see the device token being saved to Firestore when you fire it up. Then you can go ahead and copy that token and bring it over to the FCM screen, and you can send a notification directly to this device. App.

So that takes care of all of our front end code, but now the question becomes, how do we dynamically send notifications to a user based on their actual activity in this app? App. And the best answer to that question is Firebase Cloud Functions, although you can use any of the Firebase Admin SDKs to send messages. App. Go ahead and run Firebase init functions from the root of your project, and I would highly recommend using TypeScript as the language here.

And if you're not an expert with TypeScript or JavaScript, don't worry because the app. The implementation details for this code are really simple. 1st, we'll go into the index ts file and import Firebase admin, initialize it, app and then set up variables for Firestore and FCM. When it comes to sending notifications to a specific topic, you'll most likely do that when something changes in the database. App.

For example, you might have a puppies collection, and you want to notify everybody subscribed to the puppies topic when a new document is added to the database. App. We can do that by setting up a cloud function that listens to the Firestore on create event in the puppies collection. When a new document is created, app. That's going to give us access to the puppy data on that document, and then we can create a notification payload with that data.

The cool thing about this app. Is that we can use the data in the Firestore document to customize the notification itself. For example, we'll say puppy name is ready for adoption. App. Now there's a lot of different ways you can customize the notification itself, but the most important properties are the title, body, and icon because they dictate how it appears on the actual notification tray on the device.

And you'll also want to set the click action to flutter notification click if you want to use those background callbacks that we looked at earlier. App. And the final step is to simply send a notification, which we can do by calling fcm send a topic along with the topic name and the notification payload. App. And that's all the code it takes to broadcast a notification out to potentially millions of devices that are subscribed to this puppy's topic.

Now let's go ahead and write a second cloud function that will listen to the orders collection, and then it will send out a notification to an individual user whenever they've received a new order. When an order document is created, we'll assume that there is a price, a product, and then a user ID for whatever user sold that product. In the cloud function, we'll go ahead and take that user ID to make a query to that token's collection under the user ID. App. That will give us a query that returns all of the device tokens for a specific user.

Now because each one of those documents uses the actual FCM token as its ID, app. We can simply map the snapshots down to an array of the document IDs. Then we'll go ahead and format the message payload just like we did in the previous example, app. And then we'll say fcm send to device with this array of tokens, and that will send out a push notification to every device owned by this user. App.

Now the final step is to deploy the functions. Then if we go into Firestore and create a document, it should broadcast the notification to our emulator or local device. App. And we now have a full stack solution for cloud messaging that can handle multiple paradigms of app notifications. I'm gonna go ahead and wrap things up there.

App. If this video helped you, please like and subscribe, and consider becoming a pro member at Fireship IO to get access to the full Flutter Firebase course. S. Thanks for watching and I will talk to you soon.
When used correctly, push notifications can be an extremely powerful way to drive user engagement, but when used incorrectly they can do the exact opposite and drive users to uninstall your app. Luckily, there's a service called Firebase Cloud Messaging that allows you to be smart about the way you broadcast notifications to your users. Take it from me. Be smart. App. Be safe. In today's video, you'll learn how to receive messages from a front end Flutter app and also how to broadcast them from a back end Cloud function.
App. We'll look at how to broadcast notifications to a single device or user, to a topic, or to a segment of your user base based on the analytics data that you collect. App. By the end of this video, you'll be able to combine these techniques together to create a sophisticated pipeline for app notifications. If you're new here, like unsubscribe, and you can find the full source code on Fireship IO. And congrats to Matea Petrovic, your last week's t shirt winner, but there will be another giveaway with this video, all you have to do is leave a comment below.
streaming
multimedia
App. Now before we get into the actual source code, let's talk about the 3 main ways that you can send push notifications with Firebase Cloud Messaging.
App. The most broad approach is to send a notification to a segment of your users. This could be as broad as all the users for your Android app, but typically, you're going to drill down to a smaller audience. App. For example, you might want to target all of your Korean Android users whose last app engagement was more than 10 days ago. And that will tell you exactly how many users will receive this notification, as well as their relative size to the total user base. On top of that, you can use Firebase Predictions to dynamically segment your users and send notifications based on the type of engagement you're trying to get.
phones
App. And that means you can just fire the UX person who's in charge of doing this manually and let Google's AI handle it. What are you gonna be? You gonna fire me? No. App. I already fired you. Why are you still here? Another option is to manually subscribe a user to a notification topic.
google
App. This is useful if you want a user to opt in to a certain topic or if you want to programmatically assign them to a topic in the background of your app. App. For example, a user might follow a certain category like puppies, so you want to subscribe them to puppy notifications. Then the 3rd and most personalized way to send applications is to send them to a single device or user.
And you can do that because every device that you have permission to send notifications to will give you a token. App. A token itself is just a string that identifies the device, and in a few minutes we'll look at how we can save these tokens to Firestore and associate them with a user.
security
App. And that makes it possible to send notifications based on individual user activities. Now as we'll see in this video, the actual sending of notifications can either be done on the Firebase console, or app. Or you can do it programmatically with a Cloud Function. In most real world applications, you'll be doing most of the notification sending with a Cloud Function, especially if you're sending to individual device tokens. App. Now that you know a little bit about Firebase Cloud Messaging, let's go ahead and jump into a Flutter app that has already been configured with Firebase for both iOS and Android. App. On Android, there's only one additional optional step to set up push notifications. You just need to add this intent filter to your Android manifest file. App. On iOS, there are a few more steps involved because you need to register a certificate with the Apple Push Notification service. There's already a detailed official guide for this, app.
So I'll go ahead and link to that in the video description. The next thing we'll take a look at is the pubspec yaml file, and you can see here we have Firebase core, auth, Cloud Firestore and messaging. Now if we go into the main dart file, you'll see here that I am importing dart I o so we can do platform checking, app, and we'll also import our Firebase services. Now typically, I try to keep the business logic separated from the UI logic. But this is a situation where our logic is pretty tightly coupled app together, and I think it makes the most sense to handle everything in a single stateful widget. So this message handler widget will take care of getting permission from the user, app, saving the device token to the database if necessary and displaying the actual UI elements when a notification is received. Now the first thing that we wanna focus on is the UI, app. And there are 3 different callbacks that you need to know about. The on message callback will typically be called when the app is running in the foreground. App. That means the user is actively using the app when the message is received.
logic
streaming
phones
video gaming
logical reasoning
Then you have the on resume callback, which will be called when the app is running in the background, app. And the user clicks on the notification from the actual device. And the 3rd callback on launch will run if the user clicks on the notification, but the app is completely terminated and needs to reboot.
App. Now when it comes to Android, you need to set the click action to Flutter notification click to use the background or terminated callbacks. And we'll look at exactly how to do that when we get to the Cloud Functions. App. Now the only callback that we care to implement for this demo is on message when the app is in the foreground, and we can use one of Flutter's built in widgets like a snack bar or an alert dialog.
animation
App. The snack bar approach is a lot more subtle because it just shows a bar down at the bottom and will be automatically dismissed if the user doesn't engage with it. But if you have a really important message that should interrupt the current experience, then you can use an alert dialogue.
candy
And that will force the user to manually dismiss the message.
Inside of a knit state, we'll call fcm configure to set up callbacks that will handle the message when it's received by the device. And each one of these callbacks will give us access to the actual notification data payload. App. To display a Snackbar, we can first define the Snackbar widget and then we'll set the text to the notification title.
programming
And you can optionally add an action here app to go to a different screen when the user presses on the notification. Then to actually show it, we call scaffold of context show snack bar, which will look up the widget tree for the nearest scaffold and display it. App. So that's all we need for a SnackBar. If we want to show an alert dialog, we can use the built in show dialog method and then define a builder that defines an alert dialog, app, and we can pass that the notification title and the body. And then we can dismiss the alert by simply calling navigator pop. Now we could also define the on launch and on our Zoom callbacks, app. Or we can leave them blank, which will just cause the app to be opened if a notification is clicked on. In most cases, you'll probably want to navigate to a specific screen when the user clicks on a notification in the background. App. At this point, we actually have everything in place we need to start receiving notifications on the device as long as that device is Android. On iOS, you need to explicitly request permission from the user, app. And that's actually really easy to do. We simply call FCM request notification permission and then pass in the iOS notification settings. App. Now if we go to the Firebase console and send a notification to a segment, it should be received by this device. Now the next thing we might wanna do is subscribe the user to a specific topic.
You app. You can subscribe or unsubscribe from a topic with a single line of code. You might do this entirely in the background, or you might have a button that says subscribe to puppy notifications that the user clicks, ads. And now they're subscribed to that topic of notifications.
advertising
And now if we want to send a notification to all devices subscribed to that topic, we can do so in the Firebase console or with a cloud function. App. But what if we want to send notifications to an individual user or device? To make that happen, we'll need to retrieve the FCM token from this device app and then save it in a back end database somewhere like Firestore.
Before we implement the code, let's start by looking at the actual database model. We have a user's collection that contains some information about a user profile. And then under that, we have a sub collection called tokens, and each document in this collection app. Represents a device token that the user has given us permission to send notifications to.
databases
data management
documentation
programming
data
And a token is nothing more than a unique string, app. So we can use the actual device token as the document ID in the sub collection, and that just makes it easy to enforce uniqueness for each document in this collection. App. Now getting back to our Flutter code, the next thing we'll do is implement a method called save device token.
cryptocurrency
And I'm just referencing a mock user ID, app. But in a real app, you would most likely await the auth current user after you've already logged a user into your app. From there, we can retrieve the FCM token from the device by calling get token, app. And then we'll make a reference to that token sub collection under the user that uses the FCM token itself as the document ID. And then we can also save some optional information here if we want like a created at timestamp or the platform operating system. From there, we'll go back to our init state life cycle hook on this widget. And on Android, we can simply run this code when the widget is initialized because the token should already be available. But on iOS, we need to make sure that the user has actually finished giving us permission. App. So we'll go ahead and listen to the stream, and then once we have data, then we'll go ahead and save the device token. Now go ahead and restart your Flutter app, and you should see the device token being saved to Firestore when you fire it up. Then you can go ahead and copy that token and bring it over to the FCM screen, and you can send a notification directly to this device. App. So that takes care of all of our front end code, but now the question becomes, how do we dynamically send notifications to a user based on their actual activity in this app? App. And the best answer to that question is Firebase Cloud Functions, although you can use any of the Firebase Admin SDKs to send messages.
App. Go ahead and run Firebase init functions from the root of your project, and I would highly recommend using TypeScript as the language here. And if you're not an expert with TypeScript or JavaScript, don't worry because the app. The implementation details for this code are really simple. 1st, we'll go into the index ts file and import Firebase admin, initialize it, app and then set up variables for Firestore and FCM. When it comes to sending notifications to a specific topic, you'll most likely do that when something changes in the database.
software
App. For example, you might have a puppies collection, and you want to notify everybody subscribed to the puppies topic when a new document is added to the database. App. We can do that by setting up a cloud function that listens to the Firestore on create event in the puppies collection. When a new document is created, app. That's going to give us access to the puppy data on that document, and then we can create a notification payload with that data. The cool thing about this app. Is that we can use the data in the Firestore document to customize the notification itself. For example, we'll say puppy name is ready for adoption. App. Now there's a lot of different ways you can customize the notification itself, but the most important properties are the title, body, and icon because they dictate how it appears on the actual notification tray on the device. And you'll also want to set the click action to flutter notification click if you want to use those background callbacks that we looked at earlier. App. And the final step is to simply send a notification, which we can do by calling fcm send a topic along with the topic name and the notification payload. App. And that's all the code it takes to broadcast a notification out to potentially millions of devices that are subscribed to this puppy's topic.
Now let's go ahead and write a second cloud function that will listen to the orders collection, and then it will send out a notification to an individual user whenever they've received a new order. When an order document is created, we'll assume that there is a price, a product, and then a user ID for whatever user sold that product. In the cloud function, we'll go ahead and take that user ID to make a query to that token's collection under the user ID.
purchasing
customers
App. That will give us a query that returns all of the device tokens for a specific user. Now because each one of those documents uses the actual FCM token as its ID, app. We can simply map the snapshots down to an array of the document IDs. Then we'll go ahead and format the message payload just like we did in the previous example, app. And then we'll say fcm send to device with this array of tokens, and that will send out a push notification to every device owned by this user.
App. Now the final step is to deploy the functions. Then if we go into Firestore and create a document, it should broadcast the notification to our emulator or local device. App. And we now have a full stack solution for cloud messaging that can handle multiple paradigms of app notifications. I'm gonna go ahead and wrap things up there. App. If this video helped you, please like and subscribe, and consider becoming a pro member at Fireship IO to get access to the full Flutter Firebase course. S. Thanks for watching and I will talk to you soon.
youtube
software
streaming
software development
When used correctly, push notifications can be an extremely powerful way to drive user engagement, but when used incorrectly they can do the exact opposite and drive users to uninstall your app. Luckily, there's a service called Firebase Cloud Messaging that allows you to be smart about the way you broadcast notifications to your users. Take it from me. Be smart. App. Be safe. In today's video, you'll learn how to receive messages from a front end Flutter app and also how to broadcast them from a back end Cloud function. App. We'll look at how to broadcast notifications to a single device or user, to a topic, or to a segment of your user base based on the analytics data that you collect. App. By the end of this video, you'll be able to combine these techniques together to create a sophisticated pipeline for app notifications. If you're new here, like unsubscribe, and you can find the full source code on Fireship IO. And congrats to Matea Petrovic, your last week's t shirt winner, but there will be another giveaway with this video, all you have to do is leave a comment below. App. Now before we get into the actual source code, let's talk about the 3 main ways that you can send push notifications with Firebase Cloud Messaging. App. The most broad approach is to send a notification to a segment of your users. This could be as broad as all the users for your Android app, but typically, you're going to drill down to a smaller audience. App. For example, you might want to target all of your Korean Android users whose last app engagement was more than 10 days ago. And that will tell you exactly how many users will receive this notification, as well as their relative size to the total user base. On top of that, you can use Firebase Predictions to dynamically segment your users and send notifications based on the type of engagement you're trying to get. App. And that means you can just fire the UX person who's in charge of doing this manually and let Google's AI handle it. What are you gonna be? You gonna fire me? No. App. I already fired you. Why are you still here? Another option is to manually subscribe a user to a notification topic. App. This is useful if you want a user to opt in to a certain topic or if you want to programmatically assign them to a topic in the background of your app. App. For example, a user might follow a certain category like puppies, so you want to subscribe them to puppy notifications. Then the 3rd and most personalized way to send applications is to send them to a single device or user. And you can do that because every device that you have permission to send notifications to will give you a token. App. A token itself is just a string that identifies the device, and in a few minutes we'll look at how we can save these tokens to Firestore and associate them with a user. App. And that makes it possible to send notifications based on individual user activities. Now as we'll see in this video, the actual sending of notifications can either be done on the Firebase console, or app. Or you can do it programmatically with a Cloud Function. In most real world applications, you'll be doing most of the notification sending with a Cloud Function, especially if you're sending to individual device tokens. App. Now that you know a little bit about Firebase Cloud Messaging, let's go ahead and jump into a Flutter app that has already been configured with Firebase for both iOS and Android. App. On Android, there's only one additional optional step to set up push notifications. You just need to add this intent filter to your Android manifest file. App. On iOS, there are a few more steps involved because you need to register a certificate with the Apple Push Notification service. There's already a detailed official guide for this, app. So I'll go ahead and link to that in the video description. The next thing we'll take a look at is the pubspec yaml file, and you can see here we have Firebase core, auth, Cloud Firestore and messaging. Now if we go into the main dart file, you'll see here that I am importing dart I o so we can do platform checking, app, and we'll also import our Firebase services. Now typically, I try to keep the business logic separated from the UI logic. But this is a situation where our logic is pretty tightly coupled app together, and I think it makes the most sense to handle everything in a single stateful widget. So this message handler widget will take care of getting permission from the user, app, saving the device token to the database if necessary and displaying the actual UI elements when a notification is received. Now the first thing that we wanna focus on is the UI, app. And there are 3 different callbacks that you need to know about. The on message callback will typically be called when the app is running in the foreground. App. That means the user is actively using the app when the message is received. Then you have the on resume callback, which will be called when the app is running in the background, app. And the user clicks on the notification from the actual device. And the 3rd callback on launch will run if the user clicks on the notification, but the app is completely terminated and needs to reboot. App. Now when it comes to Android, you need to set the click action to Flutter notification click to use the background or terminated callbacks. And we'll look at exactly how to do that when we get to the Cloud Functions. App. Now the only callback that we care to implement for this demo is on message when the app is in the foreground, and we can use one of Flutter's built in widgets like a snack bar or an alert dialog. App. The snack bar approach is a lot more subtle because it just shows a bar down at the bottom and will be automatically dismissed if the user doesn't engage with it. But if you have a really important message that should interrupt the current experience, then you can use an alert dialogue. And that will force the user to manually dismiss the message. Inside of a knit state, we'll call fcm configure to set up callbacks that will handle the message when it's received by the device. And each one of these callbacks will give us access to the actual notification data payload. App. To display a Snackbar, we can first define the Snackbar widget and then we'll set the text to the notification title. And you can optionally add an action here app to go to a different screen when the user presses on the notification. Then to actually show it, we call scaffold of context show snack bar, which will look up the widget tree for the nearest scaffold and display it. App. So that's all we need for a SnackBar. If we want to show an alert dialog, we can use the built in show dialog method and then define a builder that defines an alert dialog, app, and we can pass that the notification title and the body. And then we can dismiss the alert by simply calling navigator pop. Now we could also define the on launch and on our Zoom callbacks, app. Or we can leave them blank, which will just cause the app to be opened if a notification is clicked on. In most cases, you'll probably want to navigate to a specific screen when the user clicks on a notification in the background. App. At this point, we actually have everything in place we need to start receiving notifications on the device as long as that device is Android. On iOS, you need to explicitly request permission from the user, app. And that's actually really easy to do. We simply call FCM request notification permission and then pass in the iOS notification settings. App. Now if we go to the Firebase console and send a notification to a segment, it should be received by this device. Now the next thing we might wanna do is subscribe the user to a specific topic. You app. You can subscribe or unsubscribe from a topic with a single line of code. You might do this entirely in the background, or you might have a button that says subscribe to puppy notifications that the user clicks, ads. And now they're subscribed to that topic of notifications. And now if we want to send a notification to all devices subscribed to that topic, we can do so in the Firebase console or with a cloud function. App. But what if we want to send notifications to an individual user or device? To make that happen, we'll need to retrieve the FCM token from this device app and then save it in a back end database somewhere like Firestore. Before we implement the code, let's start by looking at the actual database model. We have a user's collection that contains some information about a user profile. And then under that, we have a sub collection called tokens, and each document in this collection app. Represents a device token that the user has given us permission to send notifications to. And a token is nothing more than a unique string, app. So we can use the actual device token as the document ID in the sub collection, and that just makes it easy to enforce uniqueness for each document in this collection. App. Now getting back to our Flutter code, the next thing we'll do is implement a method called save device token. And I'm just referencing a mock user ID, app. But in a real app, you would most likely await the auth current user after you've already logged a user into your app. From there, we can retrieve the FCM token from the device by calling get token, app. And then we'll make a reference to that token sub collection under the user that uses the FCM token itself as the document ID. And then we can also save some optional information here if we want like a created at timestamp or the platform operating system. From there, we'll go back to our init state life cycle hook on this widget. And on Android, we can simply run this code when the widget is initialized because the token should already be available. But on iOS, we need to make sure that the user has actually finished giving us permission. App. So we'll go ahead and listen to the stream, and then once we have data, then we'll go ahead and save the device token. Now go ahead and restart your Flutter app, and you should see the device token being saved to Firestore when you fire it up. Then you can go ahead and copy that token and bring it over to the FCM screen, and you can send a notification directly to this device. App. So that takes care of all of our front end code, but now the question becomes, how do we dynamically send notifications to a user based on their actual activity in this app? App. And the best answer to that question is Firebase Cloud Functions, although you can use any of the Firebase Admin SDKs to send messages. App. Go ahead and run Firebase init functions from the root of your project, and I would highly recommend using TypeScript as the language here. And if you're not an expert with TypeScript or JavaScript, don't worry because the app. The implementation details for this code are really simple. 1st, we'll go into the index ts file and import Firebase admin, initialize it, app and then set up variables for Firestore and FCM. When it comes to sending notifications to a specific topic, you'll most likely do that when something changes in the database. App. For example, you might have a puppies collection, and you want to notify everybody subscribed to the puppies topic when a new document is added to the database. App. We can do that by setting up a cloud function that listens to the Firestore on create event in the puppies collection. When a new document is created, app. That's going to give us access to the puppy data on that document, and then we can create a notification payload with that data. The cool thing about this app. Is that we can use the data in the Firestore document to customize the notification itself. For example, we'll say puppy name is ready for adoption. App. Now there's a lot of different ways you can customize the notification itself, but the most important properties are the title, body, and icon because they dictate how it appears on the actual notification tray on the device. And you'll also want to set the click action to flutter notification click if you want to use those background callbacks that we looked at earlier. App. And the final step is to simply send a notification, which we can do by calling fcm send a topic along with the topic name and the notification payload. App. And that's all the code it takes to broadcast a notification out to potentially millions of devices that are subscribed to this puppy's topic. Now let's go ahead and write a second cloud function that will listen to the orders collection, and then it will send out a notification to an individual user whenever they've received a new order. When an order document is created, we'll assume that there is a price, a product, and then a user ID for whatever user sold that product. In the cloud function, we'll go ahead and take that user ID to make a query to that token's collection under the user ID. App. That will give us a query that returns all of the device tokens for a specific user. Now because each one of those documents uses the actual FCM token as its ID, app. We can simply map the snapshots down to an array of the document IDs. Then we'll go ahead and format the message payload just like we did in the previous example, app. And then we'll say fcm send to device with this array of tokens, and that will send out a push notification to every device owned by this user. App. Now the final step is to deploy the functions. Then if we go into Firestore and create a document, it should broadcast the notification to our emulator or local device. App. And we now have a full stack solution for cloud messaging that can handle multiple paradigms of app notifications. I'm gonna go ahead and wrap things up there. App. If this video helped you, please like and subscribe, and consider becoming a pro member at Fireship IO to get access to the full Flutter Firebase course. S. Thanks for watching and I will talk to you soon.
When
when
used
used
correctly,
correctly
push
push
notifications
notifications
can
can
be
be
an
an
extremely
extremely
powerful
powerful
way
way
to
to
drive
drive
user
user
engagement,
engagement
but
but
when
when
used
used
incorrectly
incorrectly
they
they
can
can
do
do
the
the
exact
exact
opposite
opposite
and
and
drive
drive
users
users
to
to
uninstall
uninstall
your
your
app.
app
Luckily,
luckily
there's
there's
a
a
service
service
called
called
Firebase
firebase
Cloud
cloud
Messaging
messaging
that
that
allows
allows
you
you
to
to
be
be
smart
smart
about
about
the
the
way
way
you
you
broadcast
broadcast
notifications
notifications
to
to
your
your
users.
users
Take
take
it
it
from
from
me.
me
Be
be
smart.
smart
App.
app
Be
be
safe.
safe
In
in
today's
today's
video,
video
you'll
you'll
learn
learn
how
how
to
to
receive
receive
messages
messages
from
from
a
a
front
front
end
end
Flutter
flutter
app
app
and
and
also
also
how
how
to
to
broadcast
broadcast
them
them
from
from
a
a
back
back
end
end
Cloud
cloud
function.
function
App.
app
We'll
we'll
look
look
at
at
how
how
to
to
broadcast
broadcast
notifications
notifications
to
to
a
a
single
single
device
device
or
or
user,
user
to
to
a
a
topic,
topic
or
or
to
to
a
a
segment
segment
of
of
your
your
user
user
base
base
based
based
on
on
the
the
analytics
analytics
data
data
that
that
you
you
collect.
collect
App.
app
By
by
the
the
end
end
of
of
this
this
video,
video
you'll
you'll
be
be
able
able
to
to
combine
combine
these
these
techniques
techniques
together
together
to
to
create
create
a
a
sophisticated
sophisticated
pipeline
pipeline
for
for
app
app
notifications.
notifications
If
if
you're
you're
new
new
here,
here
like
like
unsubscribe,
unsubscribe
and
and
you
you
can
can
find
find
the
the
full
full
source
source
code
code
on
on
Fireship
fireship
IO.
io
And
and
congrats
congrats
to
to
Matea
matea
Petrovic,
petrovic
your
your
last
last
week's
week's
t
t
shirt
shirt
winner,
winner
but
but
there
there
will
will
be
be
another
another
giveaway
giveaway
with
with
this
this
video,
video
all
all
you
you
have
have
to
to
do
do
is
is
leave
leave
a
a
comment
comment
below.
below
App.
app
Now
now
before
before
we
we
get
get
into
into
the
the
actual
actual
source
source
code,
code
let's
let's
talk
talk
about
about
the
the
3
3
main
main
ways
ways
that
that
you
you
can
can
send
send
push
push
notifications
notifications
with
with
Firebase
firebase
Cloud
cloud
Messaging.
messaging
App.
app
The
the
most
most
broad
broad
approach
approach
is
is
to
to
send
send
a
a
notification
notification
to
to
a
a
segment
segment
of
of
your
your
users.
users
This
this
could
could
be
be
as
as
broad
broad
as
as
all
all
the
the
users
users
for
for
your
your
Android
android
app,
app
but
but
typically,
typically
you're
you're
going
going
to
to
drill
drill
down
down
to
to
a
a
smaller
smaller
audience.
audience
App.
app
For
for
example,
example
you
you
might
might
want
want
to
to
target
target
all
all
of
of
your
your
Korean
korean
Android
android
users
users
whose
whose
last
last
app
app
engagement
engagement
was
was
more
more
than
than
10
10
days
days
ago.
ago
And
and
that
that
will
will
tell
tell
you
you
exactly
exactly
how
how
many
many
users
users
will
will
receive
receive
this
this
notification,
notification
as
as
well
well
as
as
their
their
relative
relative
size
size
to
to
the
the
total
total
user
user
base.
base
On
on
top
top
of
of
that,
that
you
you
can
can
use
use
Firebase
firebase
Predictions
predictions
to
to
dynamically
dynamically
segment
segment
your
your
users
users
and
and
send
send
notifications
notifications
based
based
on
on
the
the
type
type
of
of
engagement
engagement
you're
you're
trying
trying
to
to
get.
get
App.
app
And
and
that
that
means
means
you
you
can
can
just
just
fire
fire
the
the
UX
ux
person
person
who's
who's
in
in
charge
charge
of
of
doing
doing
this
this
manually
manually
and
and
let
let
Google's
google's
AI
ai
handle
handle
it.
it
What
what
are
are
you
you
gonna
gonna
be?
be
You
you
gonna
gonna
fire
fire
me?
me
No.
no
App.
app
I
i
already
already
fired
fired
you.
you
Why
why
are
are
you
you
still
still
here?
here
Another
another
option
option
is
is
to
to
manually
manually
subscribe
subscribe
a
a
user
user
to
to
a
a
notification
notification
topic.
topic
App.
app
This
this
is
is
useful
useful
if
if
you
you
want
want
a
a
user
user
to
to
opt
opt
in
in
to
to
a
a
certain
certain
topic
topic
or
or
if
if
you
you
want
want
to
to
programmatically
programmatically
assign
assign
them
them
to
to
a
a
topic
topic
in
in
the
the
background
background
of
of
your
your
app.
app
App.
app
For
for
example,
example
a
a
user
user
might
might
follow
follow
a
a
certain
certain
category
category
like
like
puppies,
puppies
so
so
you
you
want
want
to
to
subscribe
subscribe
them
them
to
to
puppy
puppy
notifications.
notifications
Then
then
the
the
3rd
3rd
and
and
most
most
personalized
personalized
way
way
to
to
send
send
applications
applications
is
is
to
to
send
send
them
them
to
to
a
a
single
single
device
device
or
or
user.
user
And
and
you
you
can
can
do
do
that
that
because
because
every
every
device
device
that
that
you
you
have
have
permission
permission
to
to
send
send
notifications
notifications
to
to
will
will
give
give
you
you
a
a
token.
token
App.
app
A
a
token
token
itself
itself
is
is
just
just
a
a
string
string
that
that
identifies
identifies
the
the
device,
device
and
and
in
in
a
a
few
few
minutes
minutes
we'll
we'll
look
look
at
at
how
how
we
we
can
can
save
save
these
these
tokens
tokens
to
to
Firestore
firestore
and
and
associate
associate
them
them
with
with
a
a
user.
user
App.
app
And
and
that
that
makes
makes
it
it
possible
possible
to
to
send
send
notifications
notifications
based
based
on
on
individual
individual
user
user
activities.
activities
Now
now
as
as
we'll
we'll
see
see
in
in
this
this
video,
video
the
the
actual
actual
sending
sending
of
of
notifications
notifications
can
can
either
either
be
be
done
done
on
on
the
the
Firebase
firebase
console,
console
or
or
app.
app
Or
or
you
you
can
can
do
do
it
it
programmatically
programmatically
with
with
a
a
Cloud
cloud
Function.
function
In
in
most
most
real
real
world
world
applications,
applications
you'll
you'll
be
be
doing
doing
most
most
of
of
the
the
notification
notification
sending
sending
with
with
a
a
Cloud
cloud
Function,
function
especially
especially
if
if
you're
you're
sending
sending
to
to
individual
individual
device
device
tokens.
tokens
App.
app
Now
now
that
that
you
you
know
know
a
a
little
little
bit
bit
about
about
Firebase
firebase
Cloud
cloud
Messaging,
messaging
let's
let's
go
go
ahead
ahead
and
and
jump
jump
into
into
a
a
Flutter
flutter
app
app
that
that
has
has
already
already
been
been
configured
configured
with
with
Firebase
firebase
for
for
both
both
iOS
ios
and
and
Android.
android
App.
app
On
on
Android,
android
there's
there's
only
only
one
one
additional
additional
optional
optional
step
step
to
to
set
set
up
up
push
push
notifications.
notifications
You
you
just
just
need
need
to
to
add
add
this
this
intent
intent
filter
filter
to
to
your
your
Android
android
manifest
manifest
file.
file
App.
app
On
on
iOS,
ios
there
there
are
are
a
a
few
few
more
more
steps
steps
involved
involved
because
because
you
you
need
need
to
to
register
register
a
a
certificate
certificate
with
with
the
the
Apple
apple
Push
push
Notification
notification
service.
service
There's
there's
already
already
a
a
detailed
detailed
official
official
guide
guide
for
for
this,
this
app.
app
So
so
I'll
i'll
go
go
ahead
ahead
and
and
link
link
to
to
that
that
in
in
the
the
video
video
description.
description
The
the
next
next
thing
thing
we'll
we'll
take
take
a
a
look
look
at
at
is
is
the
the
pubspec
pubspec
yaml
yaml
file,
file
and
and
you
you
can
can
see
see
here
here
we
we
have
have
Firebase
firebase
core,
core
auth,
auth
Cloud
cloud
Firestore
firestore
and
and
messaging.
messaging
Now
now
if
if
we
we
go
go
into
into
the
the
main
main
dart
dart
file,
file
you'll
you'll
see
see
here
here
that
that
I
i
am
am
importing
importing
dart
dart
I
i
o
o
so
so
we
we
can
can
do
do
platform
platform
checking,
checking
app,
app
and
and
we'll
we'll
also
also
import
import
our
our
Firebase
firebase
services.
services
Now
now
typically,
typically
I
i
try
try
to
to
keep
keep
the
the
business
business
logic
logic
separated
separated
from
from
the
the
UI
ui
logic.
logic
But
but
this
this
is
is
a
a
situation
situation
where
where
our
our
logic
logic
is
is
pretty
pretty
tightly
tightly
coupled
coupled
app
app
together,
together
and
and
I
i
think
think
it
it
makes
makes
the
the
most
most
sense
sense
to
to
handle
handle
everything
everything
in
in
a
a
single
single
stateful
stateful
widget.
widget
So
so
this
this
message
message
handler
handler
widget
widget
will
will
take
take
care
care
of
of
getting
getting
permission
permission
from
from
the
the
user,
user
app,
app
saving
saving
the
the
device
device
token
token
to
to
the
the
database
database
if
if
necessary
necessary
and
and
displaying
displaying
the
the
actual
actual
UI
ui
elements
elements
when
when
a
a
notification
notification
is
is
received.
received
Now
now
the
the
first
first
thing
thing
that
that
we
we
wanna
wanna
focus
focus
on
on
is
is
the
the
UI,
ui
app.
app
And
and
there
there
are
are
3
3
different
different
callbacks
callbacks
that
that
you
you
need
need
to
to
know
know
about.
about
The
the
on
on
message
message
callback
callback
will
will
typically
typically
be
be
called
called
when
when
the
the
app
app
is
is
running
running
in
in
the
the
foreground.
foreground
App.
app
That
that
means
means
the
the
user
user
is
is
actively
actively
using
using
the
the
app
app
when
when
the
the
message
message
is
is
received.
received
Then
then
you
you
have
have
the
the
on
on
resume
resume
callback,
callback
which
which
will
will
be
be
called
called
when
when
the
the
app
app
is
is
running
running
in
in
the
the
background,
background
app.
app
And
and
the
the
user
user
clicks
clicks
on
on
the
the
notification
notification
from
from
the
the
actual
actual
device.
device
And
and
the
the
3rd
3rd
callback
callback
on
on
launch
launch
will
will
run
run
if
if
the
the
user
user
clicks
clicks
on
on
the
the
notification,
notification
but
but
the
the
app
app
is
is
completely
completely
terminated
terminated
and
and
needs
needs
to
to
reboot.
reboot
App.
app
Now
now
when
when
it
it
comes
comes
to
to
Android,
android
you
you
need
need
to
to
set
set
the
the
click
click
action
action
to
to
Flutter
flutter
notification
notification
click
click
to
to
use
use
the
the
background
background
or
or
terminated
terminated
callbacks.
callbacks
And
and
we'll
we'll
look
look
at
at
exactly
exactly
how
how
to
to
do
do
that
that
when
when
we
we
get
get
to
to
the
the
Cloud
cloud
Functions.
functions
App.
app
Now
now
the
the
only
only
callback
callback
that
that
we
we
care
care
to
to
implement
implement
for
for
this
this
demo
demo
is
is
on
on
message
message
when
when
the
the
app
app
is
is
in
in
the
the
foreground,
foreground
and
and
we
we
can
can
use
use
one
one
of
of
Flutter's
flutter's
built
built
in
in
widgets
widgets
like
like
a
a
snack
snack
bar
bar
or
or
an
an
alert
alert
dialog.
dialog
App.
app
The
the
snack
snack
bar
bar
approach
approach
is
is
a
a
lot
lot
more
more
subtle
subtle
because
because
it
it
just
just
shows
shows
a
a
bar
bar
down
down
at
at
the
the
bottom
bottom
and
and
will
will
be
be
automatically
automatically
dismissed
dismissed
if
if
the
the
user
user
doesn't
doesn't
engage
engage
with
with
it.
it
But
but
if
if
you
you
have
have
a
a
really
really
important
important
message
message
that
that
should
should
interrupt
interrupt
the
the
current
current
experience,
experience
then
then
you
you
can
can
use
use
an
an
alert
alert
dialogue.
dialogue
And
and
that
that
will
will
force
force
the
the
user
user
to
to
manually
manually
dismiss
dismiss
the
the
message.
message
Inside
inside
of
of
a
a
knit
knit
state,
state
we'll
we'll
call
call
fcm
fcm
configure
configure
to
to
set
set
up
up
callbacks
callbacks
that
that
will
will
handle
handle
the
the
message
message
when
when
it's
it's
received
received
by
by
the
the
device.
device
And
and
each
each
one
one
of
of
these
these
callbacks
callbacks
will
will
give
give
us
us
access
access
to
to
the
the
actual
actual
notification
notification
data
data
payload.
payload
App.
app
To
to
display
display
a
a
Snackbar,
snackbar
we
we
can
can
first
first
define
define
the
the
Snackbar
snackbar
widget
widget
and
and
then
then
we'll
we'll
set
set
the
the
text
text
to
to
the
the
notification
notification
title.
title
And
and
you
you
can
can
optionally
optionally
add
add
an
an
action
action
here
here
app
app
to
to
go
go
to
to
a
a
different
different
screen
screen
when
when
the
the
user
user
presses
presses
on
on
the
the
notification.
notification
Then
then
to
to
actually
actually
show
show
it,
it
we
we
call
call
scaffold
scaffold
of
of
context
context
show
show
snack
snack
bar,
bar
which
which
will
will
look
look
up
up
the
the
widget
widget
tree
tree
for
for
the
the
nearest
nearest
scaffold
scaffold
and
and
display
display
it.
it
App.
app
So
so
that's
that's
all
all
we
we
need
need
for
for
a
a
SnackBar.
snackbar
If
if
we
we
want
want
to
to
show
show
an
an
alert
alert
dialog,
dialog
we
we
can
can
use
use
the
the
built
built
in
in
show
show
dialog
dialog
method
method
and
and
then
then
define
define
a
a
builder
builder
that
that
defines
defines
an
an
alert
alert
dialog,
dialog
app,
app
and
and
we
we
can
can
pass
pass
that
that
the
the
notification
notification
title
title
and
and
the
the
body.
body
And
and
then
then
we
we
can
can
dismiss
dismiss
the
the
alert
alert
by
by
simply
simply
calling
calling
navigator
navigator
pop.
pop
Now
now
we
we
could
could
also
also
define
define
the
the
on
on
launch
launch
and
and
on
on
our
our
Zoom
zoom
callbacks,
callbacks
app.
app
Or
or
we
we
can
can
leave
leave
them
them
blank,
blank
which
which
will
will
just
just
cause
cause
the
the
app
app
to
to
be
be
opened
opened
if
if
a
a
notification
notification
is
is
clicked
clicked
on.
on
In
in
most
most
cases,
cases
you'll
you'll
probably
probably
want
want
to
to
navigate
navigate
to
to
a
a
specific
specific
screen
screen
when
when
the
the
user
user
clicks
clicks
on
on
a
a
notification
notification
in
in
the
the
background.
background
App.
app
At
at
this
this
point,
point
we
we
actually
actually
have
have
everything
everything
in
in
place
place
we
we
need
need
to
to
start
start
receiving
receiving
notifications
notifications
on
on
the
the
device
device
as
as
long
long
as
as
that
that
device
device
is
is
Android.
android
On
on
iOS,
ios
you
you
need
need
to
to
explicitly
explicitly
request
request
permission
permission
from
from
the
the
user,
user
app.
app
And
and
that's
that's
actually
actually
really
really
easy
easy
to
to
do.
do
We
we
simply
simply
call
call
FCM
fcm
request
request
notification
notification
permission
permission
and
and
then
then
pass
pass
in
in
the
the
iOS
ios
notification
notification
settings.
settings
App.
app
Now
now
if
if
we
we
go
go
to
to
the
the
Firebase
firebase
console
console
and
and
send
send
a
a
notification
notification
to
to
a
a
segment,
segment
it
it
should
should
be
be
received
received
by
by
this
this
device.
device
Now
now
the
the
next
next
thing
thing
we
we
might
might
wanna
wanna
do
do
is
is
subscribe
subscribe
the
the
user
user
to
to
a
a
specific
specific
topic.
topic
You
you
app.
app
You
you
can
can
subscribe
subscribe
or
or
unsubscribe
unsubscribe
from
from
a
a
topic
topic
with
with
a
a
single
single
line
line
of
of
code.
code
You
you
might
might
do
do
this
this
entirely
entirely
in
in
the
the
background,
background
or
or
you
you
might
might
have
have
a
a
button
button
that
that
says
says
subscribe
subscribe
to
to
puppy
puppy
notifications
notifications
that
that
the
the
user
user
clicks,
clicks
ads.
ads
And
and
now
now
they're
they're
subscribed
subscribed
to
to
that
that
topic
topic
of
of
notifications.
notifications
And
and
now
now
if
if
we
we
want
want
to
to
send
send
a
a
notification
notification
to
to
all
all
devices
devices
subscribed
subscribed
to
to
that
that
topic,
topic
we
we
can
can
do
do
so
so
in
in
the
the
Firebase
firebase
console
console
or
or
with
with
a
a
cloud
cloud
function.
function
App.
app
But
but
what
what
if
if
we
we
want
want
to
to
send
send
notifications
notifications
to
to
an
an
individual
individual
user
user
or
or
device?
device
To
to
make
make
that
that
happen,
happen
we'll
we'll
need
need
to
to
retrieve
retrieve
the
the
FCM
fcm
token
token
from
from
this
this
device
device
app
app
and
and
then
then
save
save
it
it
in
in
a
a
back
back
end
end
database
database
somewhere
somewhere
like
like
Firestore.
firestore
Before
before
we
we
implement
implement
the
the
code,
code
let's
let's
start
start
by
by
looking
looking
at
at
the
the
actual
actual
database
database
model.
model
We
we
have
have
a
a
user's
user's
collection
collection
that
that
contains
contains
some
some
information
information
about
about
a
a
user
user
profile.
profile
And
and
then
then
under
under
that,
that
we
we
have
have
a
a
sub
sub
collection
collection
called
called
tokens,
tokens
and
and
each
each
document
document
in
in
this
this
collection
collection
app.
app
Represents
represents
a
a
device
device
token
token
that
that
the
the
user
user
has
has
given
given
us
us
permission
permission
to
to
send
send
notifications
notifications
to.
to
And
and
a
a
token
token
is
is
nothing
nothing
more
more
than
than
a
a
unique
unique
string,
string
app.
app
So
so
we
we
can
can
use
use
the
the
actual
actual
device
device
token
token
as
as
the
the
document
document
ID
id
in
in
the
the
sub
sub
collection,
collection
and
and
that
that
just
just
makes
makes
it
it
easy
easy
to
to
enforce
enforce
uniqueness
uniqueness
for
for
each
each
document
document
in
in
this
this
collection.
collection
App.
app
Now
now
getting
getting
back
back
to
to
our
our
Flutter
flutter
code,
code
the
the
next
next
thing
thing
we'll
we'll
do
do
is
is
implement
implement
a
a
method
method
called
called
save
save
device
device
token.
token
And
and
I'm
i'm
just
just
referencing
referencing
a
a
mock
mock
user
user
ID,
id
app.
app
But
but
in
in
a
a
real
real
app,
app
you
you
would
would
most
most
likely
likely
await
await
the
the
auth
auth
current
current
user
user
after
after
you've
you've
already
already
logged
logged
a
a
user
user
into
into
your
your
app.
app
From
from
there,
there
we
we
can
can
retrieve
retrieve
the
the
FCM
fcm
token
token
from
from
the
the
device
device
by
by
calling
calling
get
get
token,
token
app.
app
And
and
then
then
we'll
we'll
make
make
a
a
reference
reference
to
to
that
that
token
token
sub
sub
collection
collection
under
under
the
the
user
user
that
that
uses
uses
the
the
FCM
fcm
token
token
itself
itself
as
as
the
the
document
document
ID.
id
And
and
then
then
we
we
can
can
also
also
save
save
some
some
optional
optional
information
information
here
here
if
if
we
we
want
want
like
like
a
a
created
created
at
at
timestamp
timestamp
or
or
the
the
platform
platform
operating
operating
system.
system
From
from
there,
there
we'll
we'll
go
go
back
back
to
to
our
our
init
init
state
state
life
life
cycle
cycle
hook
hook
on
on
this
this
widget.
widget
And
and
on
on
Android,
android
we
we
can
can
simply
simply
run
run
this
this
code
code
when
when
the
the
widget
widget
is
is
initialized
initialized
because
because
the
the
token
token
should
should
already
already
be
be
available.
available
But
but
on
on
iOS,
ios
we
we
need
need
to
to
make
make
sure
sure
that
that
the
the
user
user
has
has
actually
actually
finished
finished
giving
giving
us
us
permission.
permission
App.
app
So
so
we'll
we'll
go
go
ahead
ahead
and
and
listen
listen
to
to
the
the
stream,
stream
and
and
then
then
once
once
we
we
have
have
data,
data
then
then
we'll
we'll
go
go
ahead
ahead
and
and
save
save
the
the
device
device
token.
token
Now
now
go
go
ahead
ahead
and
and
restart
restart
your
your
Flutter
flutter
app,
app
and
and
you
you
should
should
see
see
the
the
device
device
token
token
being
being
saved
saved
to
to
Firestore
firestore
when
when
you
you
fire
fire
it
it
up.
up
Then
then
you
you
can
can
go
go
ahead
ahead
and
and
copy
copy
that
that
token
token
and
and
bring
bring
it
it
over
over
to
to
the
the
FCM
fcm
screen,
screen
and
and
you
you
can
can
send
send
a
a
notification
notification
directly
directly
to
to
this
this
device.
device
App.
app
So
so
that
that
takes
takes
care
care
of
of
all
all
of
of
our
our
front
front
end
end
code,
code
but
but
now
now
the
the
question
question
becomes,
becomes
how
how
do
do
we
we
dynamically
dynamically
send
send
notifications
notifications
to
to
a
a
user
user
based
based
on
on
their
their
actual
actual
activity
activity
in
in
this
this
app?
app
App.
app
And
and
the
the
best
best
answer
answer
to
to
that
that
question
question
is
is
Firebase
firebase
Cloud
cloud
Functions,
functions
although
although
you
you
can
can
use
use
any
any
of
of
the
the
Firebase
firebase
Admin
admin
SDKs
sdks
to
to
send
send
messages.
messages
App.
app
Go
go
ahead
ahead
and
and
run
run
Firebase
firebase
init
init
functions
functions
from
from
the
the
root
root
of
of
your
your
project,
project
and
and
I
i
would
would
highly
highly
recommend
recommend
using
using
TypeScript
typescript
as
as
the
the
language
language
here.
here
And
and
if
if
you're
you're
not
not
an
an
expert
expert
with
with
TypeScript
typescript
or
or
JavaScript,
javascript
don't
don't
worry
worry
because
because
the
the
app.
app
The
the
implementation
implementation
details
details
for
for
this
this
code
code
are
are
really
really
simple.
simple
1st,
1st
we'll
we'll
go
go
into
into
the
the
index
index
ts
ts
file
file
and
and
import
import
Firebase
firebase
admin,
admin
initialize
initialize
it,
it
app
app
and
and
then
then
set
set
up
up
variables
variables
for
for
Firestore
firestore
and
and
FCM.
fcm
When
when
it
it
comes
comes
to
to
sending
sending
notifications
notifications
to
to
a
a
specific
specific
topic,
topic
you'll
you'll
most
most
likely
likely
do
do
that
that
when
when
something
something
changes
changes
in
in
the
the
database.
database
App.
app
For
for
example,
example
you
you
might
might
have
have
a
a
puppies
puppies
collection,
collection
and
and
you
you
want
want
to
to
notify
notify
everybody
everybody
subscribed
subscribed
to
to
the
the
puppies
puppies
topic
topic
when
when
a
a
new
new
document
document
is
is
added
added
to
to
the
the
database.
database
App.
app
We
we
can
can
do
do
that
that
by
by
setting
setting
up
up
a
a
cloud
cloud
function
function
that
that
listens
listens
to
to
the
the
Firestore
firestore
on
on
create
create
event
event
in
in
the
the
puppies
puppies
collection.
collection
When
when
a
a
new
new
document
document
is
is
created,
created
app.
app
That's
that's
going
going
to
to
give
give
us
us
access
access
to
to
the
the
puppy
puppy
data
data
on
on
that
that
document,
document
and
and
then
then
we
we
can
can
create
create
a
a
notification
notification
payload
payload
with
with
that
that
data.
data
The
the
cool
cool
thing
thing
about
about
this
this
app.
app
Is
is
that
that
we
we
can
can
use
use
the
the
data
data
in
in
the
the
Firestore
firestore
document
document
to
to
customize
customize
the
the
notification
notification
itself.
itself
For
for
example,
example
we'll
we'll
say
say
puppy
puppy
name
name
is
is
ready
ready
for
for
adoption.
adoption
App.
app
Now
now
there's
there's
a
a
lot
lot
of
of
different
different
ways
ways
you
you
can
can
customize
customize
the
the
notification
notification
itself,
itself
but
but
the
the
most
most
important
important
properties
properties
are
are
the
the
title,
title
body,
body
and
and
icon
icon
because
because
they
they
dictate
dictate
how
how
it
it
appears
appears
on
on
the
the
actual
actual
notification
notification
tray
tray
on
on
the
the
device.
device
And
and
you'll
you'll
also
also
want
want
to
to
set
set
the
the
click
click
action
action
to
to
flutter
flutter
notification
notification
click
click
if
if
you
you
want
want
to
to
use
use
those
those
background
background
callbacks
callbacks
that
that
we
we
looked
looked
at
at
earlier.
earlier
App.
app
And
and
the
the
final
final
step
step
is
is
to
to
simply
simply
send
send
a
a
notification,
notification
which
which
we
we
can
can
do
do
by
by
calling
calling
fcm
fcm
send
send
a
a
topic
topic
along
along
with
with
the
the
topic
topic
name
name
and
and
the
the
notification
notification
payload.
payload
App.
app
And
and
that's
that's
all
all
the
the
code
code
it
it
takes
takes
to
to
broadcast
broadcast
a
a
notification
notification
out
out
to
to
potentially
potentially
millions
millions
of
of
devices
devices
that
that
are
are
subscribed
subscribed
to
to
this
this
puppy's
puppy's
topic.
topic
Now
now
let's
let's
go
go
ahead
ahead
and
and
write
write
a
a
second
second
cloud
cloud
function
function
that
that
will
will
listen
listen
to
to
the
the
orders
orders
collection,
collection
and
and
then
then
it
it
will
will
send
send
out
out
a
a
notification
notification
to
to
an
an
individual
individual
user
user
whenever
whenever
they've
they've
received
received
a
a
new
new
order.
order
When
when
an
an
order
order
document
document
is
is
created,
created
we'll
we'll
assume
assume
that
that
there
there
is
is
a
a
price,
price
a
a
product,
product
and
and
then
then
a
a
user
user
ID
id
for
for
whatever
whatever
user
user
sold
sold
that
that
product.
product
In
in
the
the
cloud
cloud
function,
function
we'll
we'll
go
go
ahead
ahead
and
and
take
take
that
that
user
user
ID
id
to
to
make
make
a
a
query
query
to
to
that
that
token's
token's
collection
collection
under
under
the
the
user
user
ID.
id
App.
app
That
that
will
will
give
give
us
us
a
a
query
query
that
that
returns
returns
all
all
of
of
the
the
device
device
tokens
tokens
for
for
a
a
specific
specific
user.
user
Now
now
because
because
each
each
one
one
of
of
those
those
documents
documents
uses
uses
the
the
actual
actual
FCM
fcm
token
token
as
as
its
its
ID,
id
app.
app
We
we
can
can
simply
simply
map
map
the
the
snapshots
snapshots
down
down
to
to
an
an
array
array
of
of
the
the
document
document
IDs.
ids
Then
then
we'll
we'll
go
go
ahead
ahead
and
and
format
format
the
the
message
message
payload
payload
just
just
like
like
we
we
did
did
in
in
the
the
previous
previous
example,
example
app.
app
And
and
then
then
we'll
we'll
say
say
fcm
fcm
send
send
to
to
device
device
with
with
this
this
array
array
of
of
tokens,
tokens
and
and
that
that
will
will
send
send
out
out
a
a
push
push
notification
notification
to
to
every
every
device
device
owned
owned
by
by
this
this
user.
user
App.
app
Now
now
the
the
final
final
step
step
is
is
to
to
deploy
deploy
the
the
functions.
functions
Then
then
if
if
we
we
go
go
into
into
Firestore
firestore
and
and
create
create
a
a
document,
document
it
it
should
should
broadcast
broadcast
the
the
notification
notification
to
to
our
our
emulator
emulator
or
or
local
local
device.
device
App.
app
And
and
we
we
now
now
have
have
a
a
full
full
stack
stack
solution
solution
for
for
cloud
cloud
messaging
messaging
that
that
can
can
handle
handle
multiple
multiple
paradigms
paradigms
of
of
app
app
notifications.
notifications
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
App.
app
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe,
subscribe
and
and
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
Fireship
fireship
IO
io
to
to
get
get
access
access
to
to
the
the
full
full
Flutter
flutter
Firebase
firebase
course.
course
S.
s
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
success
The speakers discuss various methods for pushing notifications on Android and iOS devices, including setting up intent filters, registering certificates with Apple Push, and using the Flutter app for notifications. They also provide detailed code and instructions for creating devices and customizing settings. The use of a web service called Flutter is recommended for individual users and a cloud function for sending notifications is suggested.
Smart Push Notifications with Flutter & FCM
When used correctly, push notifications can be an extremely powerful way to drive user engagement, but when used incorrectly they can do the exact opposite and drive users to uninstall your app. Luckily, there's a service called Firebase Cloud Messaging that allows you to be smart about the way you broadcast notifications to your users. Take it from me. Be smart. App. Be safe. In today's video, you'll learn how to receive messages from a front end Flutter app and also how to broadcast them from a back end Cloud function. App. We'll look at how to broadcast notifications to a single device or user, to a topic, or to a segment of your user base based on the analytics data that you collect. App. By the end of this video, you'll be able to combine these techniques together to create a sophisticated pipeline for app notifications. If you're new here, like unsubscribe, and you can find the full source code on Fireship IO. And congrats to Matea Petrovic, your last week's t shirt winner, but there will be another giveaway with this video, all you have to do is leave a comment below. App. Now before we get into the actual source code, let's talk about the 3 main ways that you can send push notifications with Firebase Cloud Messaging. App. The most broad approach is to send a notification to a segment of your users. This could be as broad as all the users for your Android app, but typically, you're going to drill down to a smaller audience. App. For example, you might want to target all of your Korean Android users whose last app engagement was more than 10 days ago. And that will tell you exactly how many users will receive this notification, as well as their relative size to the total user base. On top of that, you can use Firebase Predictions to dynamically segment your users and send notifications based on the type of engagement you're trying to get. App. And that means you can just fire the UX person who's in charge of doing this manually and let Google's AI handle it. What are you gonna be? You gonna fire me? No. App. I already fired you. Why are you still here? Another option is to manually subscribe a user to a notification topic. App. This is useful if you want a user to opt in to a certain topic or if you want to programmatically assign them to a topic in the background of your app. App. For example, a user might follow a certain category like puppies, so you want to subscribe them to puppy notifications. Then the 3rd and most personalized way to send applications is to send them to a single device or user. And you can do that because every device that you have permission to send notifications to will give you a token. App. A token itself is just a string that identifies the device, and in a few minutes we'll look at how we can save these tokens to Firestore and associate them with a user. App. And that makes it possible to send notifications based on individual user activities. Now as we'll see in this video, the actual sending of notifications can either be done on the Firebase console, or app. Or you can do it programmatically with a Cloud Function. In most real world applications, you'll be doing most of the notification sending with a Cloud Function, especially if you're sending to individual device tokens. App. Now that you know a little bit about Firebase Cloud Messaging, let's go ahead and jump into a Flutter app that has already been configured with Firebase for both iOS and Android. App. On Android, there's only one additional optional step to set up push notifications. You just need to add this intent filter to your Android manifest file. App. On iOS, there are a few more steps involved because you need to register a certificate with the Apple Push Notification service. There's already a detailed official guide for this, app. So I'll go ahead and link to that in the video description. The next thing we'll take a look at is the pubspec yaml file, and you can see here we have Firebase core, auth, Cloud Firestore and messaging. Now if we go into the main dart file, you'll see here that I am importing dart I o so we can do platform checking, app, and we'll also import our Firebase services. Now typically, I try to keep the business logic separated from the UI logic. But this is a situation where our logic is pretty tightly coupled app together, and I think it makes the most sense to handle everything in a single stateful widget. So this message handler widget will take care of getting permission from the user, app, saving the device token to the database if necessary and displaying the actual UI elements when a notification is received. Now the first thing that we wanna focus on is the UI, app. And there are 3 different callbacks that you need to know about. The on message callback will typically be called when the app is running in the foreground. App. That means the user is actively using the app when the message is received. Then you have the on resume callback, which will be called when the app is running in the background, app. And the user clicks on the notification from the actual device. And the 3rd callback on launch will run if the user clicks on the notification, but the app is completely terminated and needs to reboot. App. Now when it comes to Android, you need to set the click action to Flutter notification click to use the background or terminated callbacks. And we'll look at exactly how to do that when we get to the Cloud Functions. App. Now the only callback that we care to implement for this demo is on message when the app is in the foreground, and we can use one of Flutter's built in widgets like a snack bar or an alert dialog. App. The snack bar approach is a lot more subtle because it just shows a bar down at the bottom and will be automatically dismissed if the user doesn't engage with it. But if you have a really important message that should interrupt the current experience, then you can use an alert dialogue. And that will force the user to manually dismiss the message. Inside of a knit state, we'll call fcm configure to set up callbacks that will handle the message when it's received by the device. And each one of these callbacks will give us access to the actual notification data payload. App. To display a Snackbar, we can first define the Snackbar widget and then we'll set the text to the notification title. And you can optionally add an action here app to go to a different screen when the user presses on the notification. Then to actually show it, we call scaffold of context show snack bar, which will look up the widget tree for the nearest scaffold and display it. App. So that's all we need for a SnackBar. If we want to show an alert dialog, we can use the built in show dialog method and then define a builder that defines an alert dialog, app, and we can pass that the notification title and the body. And then we can dismiss the alert by simply calling navigator pop. Now we could also define the on launch and on our Zoom callbacks, app. Or we can leave them blank, which will just cause the app to be opened if a notification is clicked on. In most cases, you'll probably want to navigate to a specific screen when the user clicks on a notification in the background. App. At this point, we actually have everything in place we need to start receiving notifications on the device as long as that device is Android. On iOS, you need to explicitly request permission from the user, app. And that's actually really easy to do. We simply call FCM request notification permission and then pass in the iOS notification settings. App. Now if we go to the Firebase console and send a notification to a segment, it should be received by this device. Now the next thing we might wanna do is subscribe the user to a specific topic. You app. You can subscribe or unsubscribe from a topic with a single line of code. You might do this entirely in the background, or you might have a button that says subscribe to puppy notifications that the user clicks, ads. And now they're subscribed to that topic of notifications. And now if we want to send a notification to all devices subscribed to that topic, we can do so in the Firebase console or with a cloud function. App. But what if we want to send notifications to an individual user or device? To make that happen, we'll need to retrieve the FCM token from this device app and then save it in a back end database somewhere like Firestore. Before we implement the code, let's start by looking at the actual database model. We have a user's collection that contains some information about a user profile. And then under that, we have a sub collection called tokens, and each document in this collection app. Represents a device token that the user has given us permission to send notifications to. And a token is nothing more than a unique string, app. So we can use the actual device token as the document ID in the sub collection, and that just makes it easy to enforce uniqueness for each document in this collection. App. Now getting back to our Flutter code, the next thing we'll do is implement a method called save device token. And I'm just referencing a mock user ID, app. But in a real app, you would most likely await the auth current user after you've already logged a user into your app. From there, we can retrieve the FCM token from the device by calling get token, app. And then we'll make a reference to that token sub collection under the user that uses the FCM token itself as the document ID. And then we can also save some optional information here if we want like a created at timestamp or the platform operating system. From there, we'll go back to our init state life cycle hook on this widget. And on Android, we can simply run this code when the widget is initialized because the token should already be available. But on iOS, we need to make sure that the user has actually finished giving us permission. App. So we'll go ahead and listen to the stream, and then once we have data, then we'll go ahead and save the device token. Now go ahead and restart your Flutter app, and you should see the device token being saved to Firestore when you fire it up. Then you can go ahead and copy that token and bring it over to the FCM screen, and you can send a notification directly to this device. App. So that takes care of all of our front end code, but now the question becomes, how do we dynamically send notifications to a user based on their actual activity in this app? App. And the best answer to that question is Firebase Cloud Functions, although you can use any of the Firebase Admin SDKs to send messages. App. Go ahead and run Firebase init functions from the root of your project, and I would highly recommend using TypeScript as the language here. And if you're not an expert with TypeScript or JavaScript, don't worry because the app. The implementation details for this code are really simple. 1st, we'll go into the index ts file and import Firebase admin, initialize it, app and then set up variables for Firestore and FCM. When it comes to sending notifications to a specific topic, you'll most likely do that when something changes in the database. App. For example, you might have a puppies collection, and you want to notify everybody subscribed to the puppies topic when a new document is added to the database. App. We can do that by setting up a cloud function that listens to the Firestore on create event in the puppies collection. When a new document is created, app. That's going to give us access to the puppy data on that document, and then we can create a notification payload with that data. The cool thing about this app. Is that we can use the data in the Firestore document to customize the notification itself. For example, we'll say puppy name is ready for adoption. App. Now there's a lot of different ways you can customize the notification itself, but the most important properties are the title, body, and icon because they dictate how it appears on the actual notification tray on the device. And you'll also want to set the click action to flutter notification click if you want to use those background callbacks that we looked at earlier. App. And the final step is to simply send a notification, which we can do by calling fcm send a topic along with the topic name and the notification payload. App. And that's all the code it takes to broadcast a notification out to potentially millions of devices that are subscribed to this puppy's topic. Now let's go ahead and write a second cloud function that will listen to the orders collection, and then it will send out a notification to an individual user whenever they've received a new order. When an order document is created, we'll assume that there is a price, a product, and then a user ID for whatever user sold that product. In the cloud function, we'll go ahead and take that user ID to make a query to that token's collection under the user ID. App. That will give us a query that returns all of the device tokens for a specific user. Now because each one of those documents uses the actual FCM token as its ID, app. We can simply map the snapshots down to an array of the document IDs. Then we'll go ahead and format the message payload just like we did in the previous example, app. And then we'll say fcm send to device with this array of tokens, and that will send out a push notification to every device owned by this user. App. Now the final step is to deploy the functions. Then if we go into Firestore and create a document, it should broadcast the notification to our emulator or local device. App. And we now have a full stack solution for cloud messaging that can handle multiple paradigms of app notifications. I'm gonna go ahead and wrap things up there. App. If this video helped you, please like and subscribe, and consider becoming a pro member at Fireship IO to get access to the full Flutter Firebase course. S. Thanks for watching and I will talk to you soon.
The speakers discuss various methods for pushing notifications on Android and iOS devices, including setting up intent filters, registering certificates with Apple Push, and using the Flutter app for notifications. They also provide detailed code and instructions for creating devices and customizing settings. The use of a web service called Flutter is recommended for individual users and a cloud function for sending notifications is suggested.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Smart Push Notifications with Flutter & FCM 
        and a small summary : The speakers discuss various methods for pushing notifications on Android and iOS devices, including setting up intent filters, registering certificates with Apple Push, and using the Flutter app for notifications. They also provide detailed code and instructions for creating devices and customizing settings. The use of a web service called Flutter is recommended for individual users and a cloud function for sending notifications is suggested.
        [/INST]
        
        Generate the video : When used correctly, push notifications can be an extremely powerful way to drive user engagement, but when used incorrectly they can do the exact opposite and drive users to uninstall your app. Luckily, there's a service called Firebase Cloud Messaging that allows you to be smart about the way you broadcast notifications to your users. Take it from me. Be smart. App. Be safe. In today's video, you'll learn how to receive messages from a front end Flutter app and also how to broadcast them from a back end Cloud function. App. We'll look at how to broadcast notifications to a single device or user, to a topic, or to a segment of your user base based on the analytics data that you collect. App. By the end of this video, you'll be able to combine these techniques together to create a sophisticated pipeline for app notifications. If you're new here, like unsubscribe, and you can find the full source code on Fireship IO. And congrats to Matea Petrovic, your last week's t shirt winner, but there will be another giveaway with this video, all you have to do is leave a comment below. App. Now before we get into the actual source code, let's talk about the 3 main ways that you can send push notifications with Firebase Cloud Messaging. App. The most broad approach is to send a notification to a segment of your users. This could be as broad as all the users for your Android app, but typically, you're going to drill down to a smaller audience. App. For example, you might want to target all of your Korean Android users whose last app engagement was more than 10 days ago. And that will tell you exactly how many users will receive this notification, as well as their relative size to the total user base. On top of that, you can use Firebase Predictions to dynamically segment your users and send notifications based on the type of engagement you're trying to get. App. And that means you can just fire the UX person who's in charge of doing this manually and let Google's AI handle it. What are you gonna be? You gonna fire me? No. App. I already fired you. Why are you still here? Another option is to manually subscribe a user to a notification topic. App. This is useful if you want a user to opt in to a certain topic or if you want to programmatically assign them to a topic in the background of your app. App. For example, a user might follow a certain category like puppies, so you want to subscribe them to puppy notifications. Then the 3rd and most personalized way to send applications is to send them to a single device or user. And you can do that because every device that you have permission to send notifications to will give you a token. App. A token itself is just a string that identifies the device, and in a few minutes we'll look at how we can save these tokens to Firestore and associate them with a user. App. And that makes it possible to send notifications based on individual user activities. Now as we'll see in this video, the actual sending of notifications can either be done on the Firebase console, or app. Or you can do it programmatically with a Cloud Function. In most real world applications, you'll be doing most of the notification sending with a Cloud Function, especially if you're sending to individual device tokens. App. Now that you know a little bit about Firebase Cloud Messaging, let's go ahead and jump into a Flutter app that has already been configured with Firebase for both iOS and Android. App. On Android, there's only one additional optional step to set up push notifications. You just need to add this intent filter to your Android manifest file. App. On iOS, there are a few more steps involved because you need to register a certificate with the Apple Push Notification service. There's already a detailed official guide for this, app. So I'll go ahead and link to that in the video description. The next thing we'll take a look at is the pubspec yaml file, and you can see here we have Firebase core, auth, Cloud Firestore and messaging. Now if we go into the main dart file, you'll see here that I am importing dart I o so we can do platform checking, app, and we'll also import our Firebase services. Now typically, I try to keep the business logic separated from the UI logic. But this is a situation where our logic is pretty tightly coupled app together, and I think it makes the most sense to handle everything in a single stateful widget. So this message handler widget will take care of getting permission from the user, app, saving the device token to the database if necessary and displaying the actual UI elements when a notification is received. Now the first thing that we wanna focus on is the UI, app. And there are 3 different callbacks that you need to know about. The on message callback will typically be called when the app is running in the foreground. App. That means the user is actively using the app when the message is received. Then you have the on resume callback, which will be called when the app is running in the background, app. And the user clicks on the notification from the actual device. And the 3rd callback on launch will run if the user clicks on the notification, but the app is completely terminated and needs to reboot. App. Now when it comes to Android, you need to set the click action to Flutter notification click to use the background or terminated callbacks. And we'll look at exactly how to do that when we get to the Cloud Functions. App. Now the only callback that we care to implement for this demo is on message when the app is in the foreground, and we can use one of Flutter's built in widgets like a snack bar or an alert dialog. App. The snack bar approach is a lot more subtle because it just shows a bar down at the bottom and will be automatically dismissed if the user doesn't engage with it. But if you have a really important message that should interrupt the current experience, then you can use an alert dialogue. And that will force the user to manually dismiss the message. Inside of a knit state, we'll call fcm configure to set up callbacks that will handle the message when it's received by the device. And each one of these callbacks will give us access to the actual notification data payload. App. To display a Snackbar, we can first define the Snackbar widget and then we'll set the text to the notification title. And you can optionally add an action here app to go to a different screen when the user presses on the notification. Then to actually show it, we call scaffold of context show snack bar, which will look up the widget tree for the nearest scaffold and display it. App. So that's all we need for a SnackBar. If we want to show an alert dialog, we can use the built in show dialog method and then define a builder that defines an alert dialog, app, and we can pass that the notification title and the body. And then we can dismiss the alert by simply calling navigator pop. Now we could also define the on launch and on our Zoom callbacks, app. Or we can leave them blank, which will just cause the app to be opened if a notification is clicked on. In most cases, you'll probably want to navigate to a specific screen when the user clicks on a notification in the background. App. At this point, we actually have everything in place we need to start receiving notifications on the device as long as that device is Android. On iOS, you need to explicitly request permission from the user, app. And that's actually really easy to do. We simply call FCM request notification permission and then pass in the iOS notification settings. App. Now if we go to the Firebase console and send a notification to a segment, it should be received by this device. Now the next thing we might wanna do is subscribe the user to a specific topic. You app. You can subscribe or unsubscribe from a topic with a single line of code. You might do this entirely in the background, or you might have a button that says subscribe to puppy notifications that the user clicks, ads. And now they're subscribed to that topic of notifications. And now if we want to send a notification to all devices subscribed to that topic, we can do so in the Firebase console or with a cloud function. App. But what if we want to send notifications to an individual user or device? To make that happen, we'll need to retrieve the FCM token from this device app and then save it in a back end database somewhere like Firestore. Before we implement the code, let's start by looking at the actual database model. We have a user's collection that contains some information about a user profile. And then under that, we have a sub collection called tokens, and each document in this collection app. Represents a device token that the user has given us permission to send notifications to. And a token is nothing more than a unique string, app. So we can use the actual device token as the document ID in the sub collection, and that just makes it easy to enforce uniqueness for each document in this collection. App. Now getting back to our Flutter code, the next thing we'll do is implement a method called save device token. And I'm just referencing a mock user ID, app. But in a real app, you would most likely await the auth current user after you've already logged a user into your app. From there, we can retrieve the FCM token from the device by calling get token, app. And then we'll make a reference to that token sub collection under the user that uses the FCM token itself as the document ID. And then we can also save some optional information here if we want like a created at timestamp or the platform operating system. From there, we'll go back to our init state life cycle hook on this widget. And on Android, we can simply run this code when the widget is initialized because the token should already be available. But on iOS, we need to make sure that the user has actually finished giving us permission. App. So we'll go ahead and listen to the stream, and then once we have data, then we'll go ahead and save the device token. Now go ahead and restart your Flutter app, and you should see the device token being saved to Firestore when you fire it up. Then you can go ahead and copy that token and bring it over to the FCM screen, and you can send a notification directly to this device. App. So that takes care of all of our front end code, but now the question becomes, how do we dynamically send notifications to a user based on their actual activity in this app? App. And the best answer to that question is Firebase Cloud Functions, although you can use any of the Firebase Admin SDKs to send messages. App. Go ahead and run Firebase init functions from the root of your project, and I would highly recommend using TypeScript as the language here. And if you're not an expert with TypeScript or JavaScript, don't worry because the app. The implementation details for this code are really simple. 1st, we'll go into the index ts file and import Firebase admin, initialize it, app and then set up variables for Firestore and FCM. When it comes to sending notifications to a specific topic, you'll most likely do that when something changes in the database. App. For example, you might have a puppies collection, and you want to notify everybody subscribed to the puppies topic when a new document is added to the database. App. We can do that by setting up a cloud function that listens to the Firestore on create event in the puppies collection. When a new document is created, app. That's going to give us access to the puppy data on that document, and then we can create a notification payload with that data. The cool thing about this app. Is that we can use the data in the Firestore document to customize the notification itself. For example, we'll say puppy name is ready for adoption. App. Now there's a lot of different ways you can customize the notification itself, but the most important properties are the title, body, and icon because they dictate how it appears on the actual notification tray on the device. And you'll also want to set the click action to flutter notification click if you want to use those background callbacks that we looked at earlier. App. And the final step is to simply send a notification, which we can do by calling fcm send a topic along with the topic name and the notification payload. App. And that's all the code it takes to broadcast a notification out to potentially millions of devices that are subscribed to this puppy's topic. Now let's go ahead and write a second cloud function that will listen to the orders collection, and then it will send out a notification to an individual user whenever they've received a new order. When an order document is created, we'll assume that there is a price, a product, and then a user ID for whatever user sold that product. In the cloud function, we'll go ahead and take that user ID to make a query to that token's collection under the user ID. App. That will give us a query that returns all of the device tokens for a specific user. Now because each one of those documents uses the actual FCM token as its ID, app. We can simply map the snapshots down to an array of the document IDs. Then we'll go ahead and format the message payload just like we did in the previous example, app. And then we'll say fcm send to device with this array of tokens, and that will send out a push notification to every device owned by this user. App. Now the final step is to deploy the functions. Then if we go into Firestore and create a document, it should broadcast the notification to our emulator or local device. App. And we now have a full stack solution for cloud messaging that can handle multiple paradigms of app notifications. I'm gonna go ahead and wrap things up there. App. If this video helped you, please like and subscribe, and consider becoming a pro member at Fireship IO to get access to the full Flutter Firebase course. S. Thanks for watching and I will talk to you soon.
        