Firebase notifications in Flutter

A Simple way to send notifications to our Flutter apps

Photo by Jamie Street on Unsplash

Have you ever had to send notifications in your mobile application? If so, you probably came across Firebase during your research. Firebase offers a notification system that is not only incredibly powerful but also free and highly efficient. At Dsntec, we have leveraged this feature extensively, making it our go-to choice for sending notifications to users of the apps we develop in Flutter.

What Firebase Allows Us to Do

Firebase offers two alternatives for sending notifications:

Push Notifications

These messages are sent to the mobile application even if the app is closed. They are useful for informing the user about promotions, updates, or alerting them about something new they need to check in our app.

Data Messages

This alternative allows us to send data to the application without the user noticing. The mobile app will receive and process these data in the background.

This mechanism is called Firebase Cloud Messaging (FCM), and we can easily integrate it into our Flutter applications.

How We work with Firebase

The idea of notifications is to have a system where we can manage the messages we want to be received on the mobile application. These messages will actually be sent to Firebase, which will then send them to the mobile app itself. Firebase acts as our mailman, our “messenger.” Let’s see the picture:

Sending Messages — Components Flow

We can immediately see the advantage of using Firebase in our backend and avoiding the need to manage the hundreds or thousands of devices using our mobile application. The diagram might also raise the question: “What if I don’t want to send a message to all devices?” Naturally, Firebase provides the answer: we can segment the message delivery.

Message Segmentation

When setting up Firebase in our mobile application, you will see a service initialization where Firebase assigns a token to the device. This token allows Firebase to know how to send a message to a specific device.

Additionally, Firebase enables message segmentation by categories called “Topics”. This allows us to send a message to a specific topic, and on the other hand, it allows a device to subscribe to some (or all) of the defined topics from the mobile application. Topics implement the Observer pattern, remember it? Where there is a list of observers, also known as “listeners,” that are attentive to changes in a certain entity. The entity that changes is responsible for notifying these observers that something has changed.

Let’s look at an example. Suppose we have defined the topics “Results” and “Schedule.” Devices 1 and 2 subscribe to the “Results” topic, and devices 1 and 3 to the “Schedule” topic.

Device subscriptions

• Topics: Schedule and Results.
• Device 1 subscribes to both topics.
• Device 2 subscribes to Results.
• Device 3 subscribes to Schedule.

From our backend, we will send the message “Real Madrid — Barcelona: Tuesday 8pm” to Firebase, indicating the “Schedule” topic. Firebase will then send it to devices 1 and 3.

Message to Fixture topic

Next, we will send the message “Real Madrid 3 — Barcelona 4” to the “Results” topic, which Firebase will send to devices 1 and 2.

Message to Results topic

With these features we can send a message to a specific device or to a group of devices (topic).

Configuring Firebase

We need to accomplish three things:

1. Create a project in Firebase.
2. Configure our backend to send messages to Firebase.
3. Configure our Flutter app to receive messages from Firebase.

Each of these steps is very well explained on the web, so I don’t think it’s necessary to explain how to configure each component in tutorial format. The aim of this article is to show how we can handle notifications in our Flutter apps, and I believe we’ve achieved that.

If you think it would be helpful to show how to configure Firebase, let me know in the comments, and I might put together a post on it.

Next Step

What I would like to show you is how to handle the messages we receive in Flutter. I’ll be working on my next post to demonstrate how to set up a mechanism in Flutter to correctly display notifications, whether they are push notifications or segmented messages.

Conclusion

1. Firebase allows as 2 kind of messages: Push Notifications & Data Messages
2. Use push notifications to alert users about promotions, updates, and news.
3. Use Data Messages to process data in background.
4. Send messages to a specific topic to target segmented audiences
5. Stay tuned for the next part, where I’ll show you how to handle messages coming from Firebase in your Flutter app

Thanks for reading, Clap if you like it!

Photo by Wil Stewart on Unsplash

Let me know your comments below.