How do you implement a real-time notification system using Firebase Cloud Messaging?

As we navigate the digital age, real-time notifications have become indispensable for keeping users engaged and informed. Whether it's an e-commerce app alerting users about a flash sale or a news website pushing breaking news, timely updates can significantly enhance user experience. In this article, we'll delve into how you can implement a real-time notification system using Firebase Cloud Messaging (FCM) to ensure your users stay connected and informed.

Setting Up Your Firebase Project

Before you can start sending notifications, you need to create and configure your Firebase project. Firebase simplifies the process of adding notifications to your web application or mobile app, thanks to its comprehensive suite of cloud services.

To get started, navigate to the Firebase Console and create a new project. Once your project is set up, you’ll need to add your app by following these steps:

  1. Add Firebase to your Android app:
    • Import android project into Firebase.
    • Download the google-services.json file and place it in the app directory of your project.
    • Modify your build.gradle files to include Firebase dependencies.
  2. Add Firebase to your web application:
    • Register your web app in the Firebase Console.
    • Import the Firebase SDK into your project.
    • Initialize Firebase with your project's configuration settings.

Having configured Firebase, the next step involves setting up Firebase Cloud Messaging for notifications.

Configuring Firebase Cloud Messaging (FCM)

FCM is a powerful tool for sending push notifications to your users' devices. It works across various platforms, including Android, iOS, and the web. The setup process involves several key steps:

  1. Obtain FCM Server Key: This key is found in the Firebase Console under project settings. It’s essential for authenticating your push requests.
  2. Create a Service Account: Generate a private key file for your service account. This file will grant your server access to Firebase’s APIs.
  3. Setup Service Worker: For web applications, you need a service worker to handle push events. Register the service worker in your main JavaScript file and include a script to listen for push events.

Example of a Service Worker

// firebase-messaging-sw.js

// Initialize Firebase
  apiKey: "YOUR_API_KEY",
  authDomain: "",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"

const messaging = firebase.messaging();

// Handle background messages
messaging.onBackgroundMessage((payload) => {
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,

  self.registration.showNotification(notificationTitle, notificationOptions);

This script ensures that your users receive notifications even when the app is in the background.

Sending Push Notifications

Now that you have configured FCM, it's time to send push notifications. The process entails generating a registration token for the user’s device and using this token to send messages.

  1. Generate Registration Token:
    • For Android, obtain the token using Firebase’s getToken method.
    • For web applications, call getToken from the Firebase Messaging instance.

Example of Token Retrieval

// In your main script
const messaging = firebase.messaging();

messaging.requestPermission().then(() => {
  console.log('Notification permission granted.');
  return messaging.getToken();
}).then((token) => {
  console.log('FCM Token:', token);
  // Send this token to your server for later use
}).catch((error) => {
  console.error('Error getting FCM token:', error);
  1. Send Messages via Firebase Console or API:
    • You can send test messages directly from the Firebase Console for simplicity.
    • For more complex logic, use the FCM API to send notifications programmatically. This requires making HTTP POST requests to the FCM endpoint with the appropriate headers and payload.

Example of Sending a Notification Using FCM API


const message = {
  "notification": {
    "title": "New Message",
    "body": "You have received a new message."
  "data": {
    "additionalData": "Some data"

fetch('', {
  method: 'POST',
  headers: {
    'Authorization': 'key=' + FCM_SERVER_KEY,
    'Content-Type': 'application/json'
  body: JSON.stringify(message)
}).then(response => {
  return response.json();
}).then(data => {
  console.log('Notification sent successfully:', data);
}).catch(error => {
  console.error('Error sending notification:', error);

This approach leverages cloud messaging to maintain real-time communication with users. The payload can include both notification and data messages, offering flexibility in the type of content you want to deliver.

Handling Notifications in Your App

Receiving notifications is only part of the picture. You also need to handle them appropriately within your app. This involves displaying notifications when the app is in the foreground and managing user interactions.

Handling Notifications in Android

For Android apps, Firebase provides a built-in method to handle notification clicks. You can customize this behavior by overriding the onMessageReceived method in your FirebaseMessagingService subclass.

public class MyFirebaseMessagingService extends FirebaseMessagingService {
  public void onMessageReceived(RemoteMessage remoteMessage) {
    // Handle the message here
    if (remoteMessage.getNotification() != null) {
      showNotification(remoteMessage.getNotification().getTitle(), remoteMessage.getNotification().getBody());

  private void showNotification(String title, String body) {
    NotificationCompat.Builder builder = new NotificationCompat.Builder(this, "default")

    NotificationManager notificationManager = (NotificationManager) getSystemService(NOTIFICATION_SERVICE);

Handling Notifications in Web Applications

For web applications, the service worker handles notifications even when the app is closed. When a notification is clicked, you can define specific behavior, such as opening a URL.

self.addEventListener('notificationclick', (event) => {

This ensures a seamless user experience by directing users to relevant content upon interaction with the notification.

Best Practices for Using FCM

To make the most of Firebase Cloud Messaging, adhere to these best practices:

  • Optimize Payload Size: Keep messages concise to ensure they are delivered promptly.
  • Segment Your Audience: Use topics or user groups to send targeted notifications, improving relevance and engagement.
  • Monitor Performance: Use Firebase Analytics to track notification delivery and user interactions, allowing you to refine your messaging strategy.
  • Ensure Security: Protect your FCM server key and service account credentials to prevent unauthorized access.

Implementing a real-time notification system using Firebase Cloud Messaging can significantly enhance user engagement and retention. By following the steps outlined above—setting up your Firebase project, configuring FCM, sending push notifications, and handling notifications within your app—you can create a robust notification system that keeps your users connected and informed.

Firebase Cloud Messaging simplifies the complex task of real-time communication, making it accessible even for developers without extensive backend experience. By leveraging this powerful tool, you ensure that your users receive timely updates, ultimately leading to a more engaging and dynamic user experience.

Now, it's your turn to implement these strategies and watch your app's user engagement soar.