thumb cloudinary start fixed 6

Efficient Push Notifications with Firebase Cloud Messaging (FCM) in Flutter

by

Push notifications are crucial for engaging users and keeping them informed. This article outlines how to implement efficient push notifications in your Flutter application using Firebase Cloud Messaging (FCM), addressing common pitfalls and providing practical solutions.

Problem: Inconsistent Push Notifications

Many developers face challenges with push notification reliability, often experiencing delays or failures. A common symptom is frequent updates to the FCM token and using HTTPS requests directly from the client-side to trigger notifications. This approach can lead to:

  • Increased latency due to client-side processing and network requests.
  • Security vulnerabilities by exposing FCM API keys.
  • Inconsistent delivery due to network instability on the client’s device.

Solution: Leveraging Cloud Functions for Robust Push Notifications

The recommended solution involves using Firebase Cloud Functions as a secure and reliable intermediary between your Flutter app and FCM. Here’s a step-by-step guide:

1. Client-Side: Obtain and Register the FCM Token

First, obtain the FCM token in your Flutter application and register it with your backend using Cloud Functions. Here’s an example using the firebase_messaging and cloud_functions packages:


import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:cloud_functions/cloud_functions.dart';

Future<void> initFcmToken() async {
  final fcm = FirebaseMessaging.instance;
  String? token = await fcm.getToken();

  if (token != null) {
    await registerToken(token);
  }

  FirebaseMessaging.instance.onTokenRefresh.listen((newToken) async {
    await registerToken(newToken);
  });
}

Future<void> registerToken(String token) async {
  try{
     final callable = FirebaseFunctions.instance.httpsCallable('registerFcmToken');
     await callable.call({'token': token});
  } catch (e) {
    print("Error registering FCM token: $e"); // Handle the exception appropriately
  }

}

Explanation:

  • FirebaseMessaging.instance.getToken() retrieves the FCM token for the device.
  • FirebaseMessaging.instance.onTokenRefresh.listen() listens for token updates and re-registers the token when it changes.
  • The registerToken function calls a Cloud Function named ‘registerFcmToken’ to store the token in the backend. Wrap callables inside try/catch block to handle errors gracefully.

2. Server-Side: Implement a Cloud Function to Register the Token

Create a Cloud Function that receives the FCM token and stores it in a database (e.g., Cloud Firestore, Realtime Database). This function will be triggered by the Flutter app when a new token is generated or refreshed.


const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

exports.registerFcmToken = functions.https.onCall(async (data, context) => {
  const token = data.token;

  if (!context.auth) {
    throw new functions.https.HttpsError('unauthenticated', 'The function must be called while authenticated.');
  }

  const uid = context.auth.uid;

  try {
    await admin.firestore().collection('users').doc(uid).update({
      fcmToken: token,
    });
    return { result: 'Token saved successfully' };
  } catch (error) {
    console.error("Error saving token: ", error);
    throw new functions.https.HttpsError('internal', 'Failed to save the token.');
  }
});

Explanation:

  • The function is triggered via HTTPS and requires authentication.
  • It retrieves the user’s UID from the authentication context.
  • It updates the user’s document in Firestore with the new FCM token.
  • Error handling is included to catch potential issues and return appropriate error messages.

3. Server-Side: Implement a Cloud Function to Send Push Notifications

Create another Cloud Function that sends push notifications via FCM. This function can be triggered by events in your application (e.g., new messages, updates) or scheduled tasks. This function retrieves the FCM token from database to send the message.


const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

exports.sendNotification = functions.https.onCall(async (data, context) => {
  const uid = data.uid;
  const title = data.title;
  const body = data.body;

  try {
    const userDoc = await admin.firestore().collection('users').doc(uid).get();
    const fcmToken = userDoc.data().fcmToken;

    if (!fcmToken) {
      console.log("No FCM token found for user: ", uid);
      return { result: 'No token found for user' };
    }

    const message = {
      notification: {
        title: title,
        body: body,
      },
      token: fcmToken,
    };

    const response = await admin.messaging().send(message);
    console.log('Successfully sent message:', response);
    return { result: 'Message sent successfully', messageId: response };

  } catch (error) {
    console.error("Error sending message: ", error);
    throw new functions.https.HttpsError('internal', 'Failed to send the message.');
  }
});

Explanation:

  • The function is triggered via HTTPS.
  • It retrieves the FCM token from Firestore based on the user ID.
  • It constructs the message payload with the title and body.
  • It sends the message using admin.messaging().send().
  • It includes error handling and logging.

4. Client-Side: Trigger the Cloud Function

From your Flutter app, trigger the sendNotification Cloud Function whenever you need to send a push notification. Make sure the cloud function requires Authentication for extra security.


import 'package:cloud_functions/cloud_functions.dart';

Future<void> sendPushNotification({required String uid, required String title, required String body}) async {
  try {
    final callable = FirebaseFunctions.instance.httpsCallable('sendNotification');
    final result = await callable.call({
      'uid': uid,
      'title': title,
      'body': body,
    });
    print(result.data); // Optionally handle the result
  } catch (e) {
    print("Error calling sendNotification: $e"); // Handle the exception appropriately
  }
}

Possible Errors and Solutions

  • Permission Denied: Ensure that the Cloud Function has the necessary permissions to access Firestore and FCM. Check the Firebase console and update the function’s service account permissions.
  • Invalid FCM Token: The FCM token might be outdated or invalid. Always listen for token refresh events and update the token in your backend.
  • Network Issues: Ensure that both the client device and the Cloud Function have a stable internet connection.
  • Cloud Functions Deployment Issues: Ensure that cloud functions are deployed correctly. Check firebase logs for any errors during the deployment. Redeploy if neccessary.

Benefits of Using Cloud Functions

  • Security: Prevents exposing FCM API keys on the client-side.
  • Reliability: Offloads push notification logic to a server environment.
  • Scalability: Cloud Functions automatically scale to handle varying workloads.
  • Flexibility: Allows for complex push notification logic (e.g., conditional notifications, personalized content).

Conclusion

By implementing push notifications using Firebase Cloud Functions, you can achieve a more secure, reliable, and scalable solution for your Flutter application. This approach minimizes client-side latency, enhances security, and provides greater control over your push notification strategy.