Firebase Cloud Messaging Implementation Guide

1. In the Firebase console, add an iOS app to your project
2. Register the app with your bundle ID
3. Download the GoogleService-Info.plist file
4. Add the file to your Xcode project (drag and drop into the project navigator)
5. Install the Firebase SDK using CocoaPods. Add to your Podfile:

pod 'Firebase/Analytics'
pod 'Firebase/Messaging'

Then run:

pod install

In your AppDelegate, initialize Firebase:

import Firebase

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        FirebaseApp.configure()
        return true
    }
}

1. In the Firebase console, add a Web app to your project
2. Register the app with a nickname
3. Add the Firebase SDK to your web app:

<!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-messaging.js"></script>

<script>
  // Your web app's Firebase configuration
  const firebaseConfig = {
    apiKey: "your-api-key",
    authDomain: "your-auth-domain",
    projectId: "your-project-id",
    storageBucket: "your-storage-bucket",
    messagingSenderId: "your-messaging-sender-id",
    appId: "your-app-id"
  };
  
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

In your AppDelegate:

import Firebase
import FirebaseMessaging
import UserNotifications

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate, UNUserNotificationCenterDelegate, MessagingDelegate {
    
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        FirebaseApp.configure()
        
        // Request permission for notifications
        UNUserNotificationCenter.current().delegate = self
        let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
        UNUserNotificationCenter.current().requestAuthorization(
            options: authOptions,
            completionHandler: { _, _ in }
        )
        
        application.registerForRemoteNotifications()
        
        // Set messaging delegate
        Messaging.messaging().delegate = self
        
        return true
    }
    
    // Receive FCM token
    func messaging(_ messaging: Messaging, didReceiveRegistrationToken fcmToken: String?) {
        print("Firebase registration token: \(String(describing: fcmToken))")
        
        // Send token to your server
        if let token = fcmToken {
            sendRegistrationToServer(token)
        }
    }
}

// Request permission
const messaging = firebase.messaging();

messaging.requestPermission()
.then(() => {
    console.log('Notification permission granted.');
    return messaging.getToken();
})
.then((token) => {
    console.log('FCM Token:', token);
    
    // Send token to your server
    sendTokenToServer(token);
})
.catch((err) => {
    console.log('Unable to get permission to notify.', err);
});

First, add the Firebase Messaging package:

flutter pub add firebase_messaging

Then in your app:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  void initState() {
    super.initState();
    setupFirebaseMessaging();
  }

  Future setupFirebaseMessaging() async {
    // Request permission
    NotificationSettings settings = await FirebaseMessaging.instance.requestPermission(
      alert: true,
      badge: true,
      sound: true,
    );
    
    print('User granted permission: ${settings.authorizationStatus}');
    
    // Get token
    String? token = await FirebaseMessaging.instance.getToken();
    print('FCM Token: $token');
    
    // Send token to server
    if (token != null) {
      sendTokenToServer(token);
    }
    
    // Listen for token refresh
    FirebaseMessaging.instance.onTokenRefresh.listen((newToken) {
      print('FCM Token refreshed: $newToken');
      sendTokenToServer(newToken);
    });
  }
  
  void sendTokenToServer(String token) {
    // Implement your server communication here
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FCM Example')),
        body: Center(child: Text('Firebase Cloud Messaging Example')),
      ),
    );
  }
}

First, install the required packages:

npm install @react-native-firebase/app @react-native-firebase/messaging

Then in your app:

import React, { useEffect } from 'react';
import { Alert } from 'react-native';
import messaging from '@react-native-firebase/messaging';

function App() {
  useEffect(() => {
    // Request permission
    const requestUserPermission = async () => {
      const authStatus = await messaging().requestPermission();
      const enabled =
        authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
        authStatus === messaging.AuthorizationStatus.PROVISIONAL;

      if (enabled) {
        console.log('Authorization status:', authStatus);
        getFcmToken();
      }
    }

    // Get FCM token
    const getFcmToken = async () => {
      const fcmToken = await messaging().getToken();
      if (fcmToken) {
        console.log('FCM Token:', fcmToken);
        // Send token to your server
        sendTokenToServer(fcmToken);
      }
    }

    requestUserPermission();

    // Listen to token refresh
    const unsubscribe = messaging().onTokenRefresh(token => {
      console.log('FCM Token refreshed:', token);
      sendTokenToServer(token);
    });

    return unsubscribe;
  }, []);

  const sendTokenToServer = (token) => {
    // Implement your server communication here
  };

  return (
    // Your app component
  );
}

export default App;

In your AppDelegate, implement the UNUserNotificationCenterDelegate methods:

// Handle notification when app is in foreground
func userNotificationCenter(_ center: UNUserNotificationCenter,
                           willPresent notification: UNNotification,
                           withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
    let userInfo = notification.request.content.userInfo

    // With swizzling disabled you must let Messaging know about the message
    Messaging.messaging().appDidReceiveMessage(userInfo)

    // Print message ID
    if let messageID = userInfo["gcm.message_id"] {
        print("Message ID: \(messageID)")
    }

    // Print full message
    print(userInfo)

    // Change this to your preferred presentation option
    completionHandler([[.alert, .sound]])
}

// Handle notification when user taps on it
func userNotificationCenter(_ center: UNUserNotificationCenter,
                           didReceive response: UNNotificationResponse,
                           withCompletionHandler completionHandler: @escaping () -> Void) {
    let userInfo = response.notification.request.content.userInfo

    // Print message ID
    if let messageID = userInfo["gcm.message_id"] {
        print("Message ID: \(messageID)")
    }

    // Print full message
    print(userInfo)

    completionHandler()
}

// Handle receiving message
func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable: Any],
                 fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {
    // With swizzling disabled you must let Messaging know about the message
    Messaging.messaging().appDidReceiveMessage(userInfo)

    // Print message ID
    if let messageID = userInfo["gcm.message_id"] {
        print("Message ID: \(messageID)")
    }

    // Print full message
    print(userInfo)

    completionHandler(UIBackgroundFetchResult.newData)
}

// Handle foreground messages
messaging.onMessage((payload) => {
    console.log('Message received in foreground:', payload);
    
    // Display notification
    const notificationTitle = payload.notification.title;
    const notificationOptions = {
        body: payload.notification.body,
        icon: '/firebase-logo.png'
    };
    
    if (Notification.permission === 'granted') {
        new Notification(notificationTitle, notificationOptions);
    }
});

// Handle background messages
// This requires a service worker
// Create a file named firebase-messaging-sw.js in your web root:

/*
// firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.6.1/firebase-messaging.js');

firebase.initializeApp({
    apiKey: "your-api-key",
    authDomain: "your-auth-domain",
    projectId: "your-project-id",
    storageBucket: "your-storage-bucket",
    messagingSenderId: "your-messaging-sender-id",
    appId: "your-app-id"
});

const messaging = firebase.messaging();

messaging.onBackgroundMessage((payload) => {
    console.log('Background message received:', payload);
    
    const notificationTitle = payload.notification.title;
    const notificationOptions = {
        body: payload.notification.body,
        icon: '/firebase-logo.png'
    };
    
    return self.registration.showNotification(notificationTitle, notificationOptions);
});
*/

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

// Define a top-level function to handle background messages
Future _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp();
  print("Handling a background message: ${message.messageId}");
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  late FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;
  
  @override
  void initState() {
    super.initState();
    setupFirebaseMessaging();
    setupLocalNotifications();
  }

  Future setupFirebaseMessaging() async {
    // Set the background message handler
    FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
    
    // Handle foreground messages
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print("Got a message whilst in the foreground!");
      print("Message data: ${message.data}");

      if (message.notification != null) {
        print("Message also contained a notification: ${message.notification}");
        showNotification(message);
      }
    });
    
    // Handle when the app is opened from a notification
    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
      print('A new onMessageOpenedApp event was published!');
      // Navigate to relevant page based on message data
      handleNotificationClick(message.data);
    });
    
    // Check if the app was opened from a notification
    RemoteMessage? initialMessage = await FirebaseMessaging.instance.getInitialMessage();
    if (initialMessage != null) {
      handleNotificationClick(initialMessage.data);
    }
  }
  
  void setupLocalNotifications() {
    flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
    const AndroidInitializationSettings initializationSettingsAndroid =
        AndroidInitializationSettings('@mipmap/ic_launcher');
    final IOSInitializationSettings initializationSettingsIOS =
        IOSInitializationSettings();
    final InitializationSettings initializationSettings = InitializationSettings(
        android: initializationSettingsAndroid,
        iOS: initializationSettingsIOS);
    flutterLocalNotificationsPlugin.initialize(initializationSettings,
        onSelectNotification: (String? payload) async {
      if (payload != null) {
        // Handle notification click with payload
        Map data = json.decode(payload);
        handleNotificationClick(data);
      }
    });
  }
  
  void showNotification(RemoteMessage message) async {
    RemoteNotification? notification = message.notification;
    AndroidNotification? android = message.notification?.android;
    
    if (notification != null && android != null) {
      await flutterLocalNotificationsPlugin.show(
        notification.hashCode,
        notification.title,
        notification.body,
        NotificationDetails(
          android: AndroidNotificationDetails(
            'channel_id',
            'channel_name',
            channelDescription: 'channel_description',
            importance: Importance.max,
            priority: Priority.high,
            showWhen: false,
          ),
          iOS: IOSNotificationDetails(),
        ),
        payload: json.encode(message.data),
      );
    }
  }
  
  void handleNotificationClick(Map data) {
    // Navigate to relevant page based on notification data
    print('Handling notification click with data: $data');
    // Example: Navigator.pushNamed(context, '/details', arguments: data);
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FCM Example')),
        body: Center(child: Text('Firebase Cloud Messaging Example')),
      ),
    );
  }
}

import React, { useEffect } from 'react';
import { Alert } from 'react-native';
import messaging from '@react-native-firebase/messaging';
import PushNotification from 'react-native-push-notification';

function App() {
  useEffect(() => {
    // Configure local notifications
    PushNotification.configure({
      onNotification: function (notification) {
        console.log('NOTIFICATION:', notification);
        
        // Process the notification
        
        // Required on iOS only
        notification.finish(PushNotificationIOS.FetchResult.NoData);
      },
      
      // IOS ONLY
      permissions: {
        alert: true,
        badge: true,
        sound: true,
      },
      
      popInitialNotification: true,
      requestPermissions: true,
    });
    
    // Create notification channel for Android
    PushNotification.createChannel(
      {
        channelId: "fcm_default_channel",
        channelName: "Default Channel",
        channelDescription: "A default channel for notifications",
        soundName: "default",
        importance: 4,
        vibrate: true,
      },
      (created) => console.log(`Channel created: ${created}`)
    );
    
    // Handle foreground messages
    const unsubscribe = messaging().onMessage(async remoteMessage => {
      console.log('A new FCM message arrived!', remoteMessage);
      
      // Display local notification
      PushNotification.localNotification({
        channelId: "fcm_default_channel",
        title: remoteMessage.notification?.title,
        message: remoteMessage.notification?.body || '',
        data: remoteMessage.data,
      });
    });
    
    // Handle background/quit state messages
    messaging().setBackgroundMessageHandler(async remoteMessage => {
      console.log('Message handled in the background!', remoteMessage);
    });
    
    // Check if app was opened from a notification
    messaging()
      .getInitialNotification()
      .then(remoteMessage => {
        if (remoteMessage) {
          console.log(
            'Notification caused app to open from quit state:',
            remoteMessage,
          );
          // Navigate based on the notification data
          handleNotificationOpen(remoteMessage);
        }
      });
    
    // Handle notification open when app is in background
    messaging().onNotificationOpenedApp(remoteMessage => {
      console.log(
        'Notification caused app to open from background state:',
        remoteMessage,
      );
      // Navigate based on the notification data
      handleNotificationOpen(remoteMessage);
    });
    
    return unsubscribe;
  }, []);
  
  const handleNotificationOpen = (remoteMessage) => {
    // Navigate to relevant screen based on notification data
    console.log('Handling notification open with data:', remoteMessage.data);
    // Example: navigation.navigate('Details', { id: remoteMessage.data.id });
  };
  
  return (
    // Your app component
  );
}

export default App;

Using the Firebase Admin SDK:

import firebase_admin
from firebase_admin import credentials, messaging

# Initialize the app with a service account
cred = credentials.Certificate('path/to/serviceAccountKey.json')
firebase_admin.initialize_app(cred)

# Send a message to a specific device
def send_notification_to_device(token, title, body, data=None):
    if data is None:
        data = {}
    
    message = messaging.Message(
        notification=messaging.Notification(
            title=title,
            body=body
        ),
        data=data,
        token=token
    )
    
    try:
        response = messaging.send(message)
        print('Successfully sent message:', response)
        return response
    except Exception as e:
        print('Error sending message:', e)
        raise e

# Send a message to multiple devices
def send_notification_to_devices(tokens, title, body, data=None):
    if data is None:
        data = {}
    
    message = messaging.MulticastMessage(
        notification=messaging.Notification(
            title=title,
            body=body
        ),
        data=data,
        tokens=tokens
    )
    
    try:
        response = messaging.send_multicast(message)
        print(f'{response.success_count} messages were sent successfully')
        return response
    except Exception as e:
        print('Error sending messages:', e)
        raise e

# Send a message to a topic
def send_notification_to_topic(topic, title, body, data=None):
    if data is None:
        data = {}
    
    message = messaging.Message(
        notification=messaging.Notification(
            title=title,
            body=body
        ),
        data=data,
        topic=topic
    )
    
    try:
        response = messaging.send(message)
        print('Successfully sent message to topic:', response)
        return response
    except Exception as e:
        print('Error sending message to topic:', e)
        raise e

# Example Flask API endpoint to send notification
from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/api/send-notification', methods=['POST'])
def send_notification():
    try:
        data = request.json
        user_id = data.get('userId')
        title = data.get('title')
        body = data.get('body')
        custom_data = data.get('data', {})
        
        # Get the user's FCM token from the database
        # This is a placeholder - implement your database logic
        token = get_user_token(user_id)
        
        if not token:
            return jsonify({'error': 'User token not found'}), 404
        
        response = send_notification_to_device(token, title, body, custom_data)
        return jsonify({'success': True, 'response': response}), 200
    except Exception as e:
        print('Error sending notification:', e)
        return jsonify({'error': 'Server error'}), 500

def get_user_token(user_id):
    # Implement your database logic to retrieve the token
    # This is a placeholder
    return "user_fcm_token"

if __name__ == '__main__':
    app.run(debug=True)

Using the Firebase Admin SDK:

import com.google.auth.oauth2.GoogleCredentials;
import com.google.firebase.FirebaseApp;
import com.google.firebase.FirebaseOptions;
import com.google.firebase.messaging.*;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.*;

import java.io.FileInputStream;
import java.io.IOException;
import java.util.Arrays;
import java.util.List;
import java.util.Map;

@SpringBootApplication
@RestController
public class FcmApplication {

    public static void main(String[] args) throws IOException {
        // Initialize Firebase Admin SDK
        FileInputStream serviceAccount = new FileInputStream("path/to/serviceAccountKey.json");
        FirebaseOptions options = FirebaseOptions.builder()
                .setCredentials(GoogleCredentials.fromStream(serviceAccount))
                .build();
        FirebaseApp.initializeApp(options);
        
        SpringApplication.run(FcmApplication.class, args);
    }
    
    // Send a message to a specific device
    public String sendNotificationToDevice(String token, String title, String body, Map data) throws FirebaseMessagingException {
        Notification notification = Notification.builder()
                .setTitle(title)
                .setBody(body)
                .build();
                
        Message message = Message.builder()
                .setNotification(notification)
                .putAllData(data)
                .setToken(token)
                .build();
                
        String response = FirebaseMessaging.getInstance().send(message);
        System.out.println("Successfully sent message: " + response);
        return response;
    }
    
    // Send a message to multiple devices
    public BatchResponse sendNotificationToDevices(List tokens, String title, String body, Map data) throws FirebaseMessagingException {
        Notification notification = Notification.builder()
                .setTitle(title)
                .setBody(body)
                .build();
                
        MulticastMessage message = MulticastMessage.builder()
                .setNotification(notification)
                .putAllData(data)
                .addAllTokens(tokens)
                .build();
                
        BatchResponse response = FirebaseMessaging.getInstance().sendMulticast(message);
        System.out.println(response.getSuccessCount() + " messages were sent successfully");
        return response;
    }
    
    // Send a message to a topic
    public String sendNotificationToTopic(String topic, String title, String body, Map data) throws FirebaseMessagingException {
        Notification notification = Notification.builder()
                .setTitle(title)
                .setBody(body)
                .build();
                
        Message message = Message.builder()
                .setNotification(notification)
                .putAllData(data)
                .setTopic(topic)
                .build();
                
        String response = FirebaseMessaging.getInstance().send(message);
        System.out.println("Successfully sent message to topic: " + response);
        return response;
    }
    
    // Example API endpoint to send notification
    @PostMapping("/api/send-notification")
    public ResponseEntity sendNotification(@RequestBody NotificationRequest request) {
        try {
            // Get the user's FCM token from the database
            // This is a placeholder - implement your database logic
            String token = getUserToken(request.getUserId());
            
            if (token == null) {
                return ResponseEntity.status(HttpStatus.NOT_FOUND).body("User token not found");
            }
            
            String response = sendNotificationToDevice(token, request.getTitle(), request.getBody(), request.getData());
            return ResponseEntity.ok(response);
        } catch (FirebaseMessagingException e) {
            e.printStackTrace();
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error sending notification");
        }
    }
    
    private String getUserToken(String userId) {
        // Implement your database logic to retrieve the token
        // This is a placeholder
        return "user_fcm_token";
    }
    
    // Request model
    public static class NotificationRequest {
        private String userId;
        private String title;
        private String body;
        private Map data;
        
        // Getters and setters
    }
}

Send a message to a topic from the server:

// Node.js
const message = {
  notification: {
    title: 'Breaking News',
    body: 'New article available'
  },
  topic: 'news'
};

admin.messaging().send(message)
  .then((response) => {
    console.log('Successfully sent message to topic:', response);
  })
  .catch((error) => {
    console.error('Error sending message to topic:', error);
  });

// Python
message = messaging.Message(
    notification=messaging.Notification(
        title='Breaking News',
        body='New article available'
    ),
    topic='news'
)

response = messaging.send(message)
print('Successfully sent message to topic:', response)

// Java
Message message = Message.builder()
    .setNotification(Notification.builder()
        .setTitle("Breaking News")
        .setBody("New article available")
        .build())
    .setTopic("news")
    .build();

String response = FirebaseMessaging.getInstance().send(message);
System.out.println("Successfully sent message to topic: " + response);