FCM setup in Firebase - Mini Project: Build & Apply

FCM setup

📖 Scenario: You are building a simple notification system for a mobile app using Firebase Cloud Messaging (FCM). You want to set up the basic configuration to send notifications to users.

🎯 Goal: Set up Firebase Cloud Messaging by creating the initial Firebase configuration, adding the server key, initializing the messaging service, and enabling message handling.

📋 What You'll Learn

Create a Firebase configuration object with the exact keys and values

Add a variable for the FCM server key

Initialize Firebase messaging using the configuration

Add a message handler to receive notifications

💡 Why This Matters

🌍 Real World

Setting up Firebase Cloud Messaging is essential for sending push notifications to mobile app users, improving engagement and communication.

💼 Career

Cloud engineers and mobile developers often configure FCM to enable real-time notifications in apps, a common requirement in many projects.

1

Create Firebase configuration object

Create a variable called firebaseConfig as a dictionary with these exact entries: apiKey set to "AIzaSyA-ExampleKey12345", authDomain set to "example-app.firebaseapp.com", projectId set to "example-app", storageBucket set to "example-app.appspot.com", messagingSenderId set to "1234567890", and appId set to "1:1234567890:web:abcdef123456".

Firebase

# Create the firebaseConfig dictionary with the exact keys and values
# Your code here

Hint

Think of firebaseConfig as a dictionary holding all the keys Firebase needs to connect your app.

2

Add FCM server key variable

Create a variable called serverKey and set it to the string "AAAAaExampleServerKey1234567890".

Firebase

firebaseConfig = {
    "apiKey": "AIzaSyA-ExampleKey12345",
    "authDomain": "example-app.firebaseapp.com",
    "projectId": "example-app",
    "storageBucket": "example-app.appspot.com",
    "messagingSenderId": "1234567890",
    "appId": "1:1234567890:web:abcdef123456"
}
# Create the serverKey variable with the exact string
# Your code here

Hint

The serverKey is a secret string used to authorize sending messages.

3

Initialize Firebase messaging

Write code to initialize Firebase messaging by calling firebase.initializeApp(firebaseConfig) and then create a variable called messaging by calling firebase.messaging().

Firebase

firebaseConfig = {
    "apiKey": "AIzaSyA-ExampleKey12345",
    "authDomain": "example-app.firebaseapp.com",
    "projectId": "example-app",
    "storageBucket": "example-app.appspot.com",
    "messagingSenderId": "1234567890",
    "appId": "1:1234567890:web:abcdef123456"
}

serverKey = "AAAAaExampleServerKey1234567890"
# Initialize Firebase app and create messaging variable
# Your code here

Hint

First initialize the Firebase app with your config, then get the messaging service.

4

Add message handler

Add a message handler by calling messaging.onMessage with a function that takes a parameter called payload. Inside the function, assign payload to a variable called receivedMessage.

Firebase

firebaseConfig = {
    "apiKey": "AIzaSyA-ExampleKey12345",
    "authDomain": "example-app.firebaseapp.com",
    "projectId": "example-app",
    "storageBucket": "example-app.appspot.com",
    "messagingSenderId": "1234567890",
    "appId": "1:1234567890:web:abcdef123456"
}

serverKey = "AAAAaExampleServerKey1234567890"

firebase.initializeApp(firebaseConfig)
messaging = firebase.messaging()
# Add a message handler using messaging.onMessage
# Your code here

Hint

The message handler listens for incoming messages and saves the payload.

Practice

1. What is the main purpose of Firebase Cloud Messaging (FCM)?

easy

A. To host web applications

B. To store user data securely in the cloud

C. To create user authentication systems

D. To send notifications and messages to users' devices

Solution

1. Step 1: Understand FCM's role

   FCM is designed to send notifications and messages to devices.

2. Step 2: Compare with other Firebase features

   Other options describe different Firebase services, not FCM.

3. Final Answer:

   To send notifications and messages to users' devices -> Option D

4. Quick Check:

   FCM = Messaging service [OK]

Hint: FCM = Firebase messaging to devices [OK]

Common Mistakes:

• Confusing FCM with data storage
• Thinking FCM handles authentication
• Assuming FCM hosts websites

2. Which Firebase method is used to request permission for notifications in a web app?

easy

A. Notification.requestPermission()

B. firebase.messaging().getToken()

C. firebase.initializeApp()

D. firebase.auth().signIn()

Solution

1. Step 1: Identify permission request method

   Web notifications require calling Notification.requestPermission() to ask user consent.

2. Step 2: Differentiate from other Firebase methods

   getToken() retrieves the token after permission; initializeApp() sets up Firebase; signIn() is for authentication.

3. Final Answer:

   Notification.requestPermission() -> Option A

4. Quick Check:

   Permission request = Notification.requestPermission() [OK]

Hint: Permission uses browser Notification API, not Firebase method [OK]

Common Mistakes:

• Using getToken() to request permission
• Confusing initializeApp() with permission request
• Thinking signIn() handles notifications

3. Given this code snippet, what will console.log(token) output if permission is granted and token is retrieved successfully?

const messaging = firebase.messaging();
Notification.requestPermission().then(() => {
  return messaging.getToken();
}).then(token => {
  console.log(token);
}).catch(err => {
  console.error('Error:', err);
});

medium

A. undefined

B. A string token representing the device registration

C. An error message

D. null

Solution

1. Step 1: Analyze permission and token retrieval

   If permission is granted, messaging.getToken() returns a string token.

2. Step 2: Understand console.log output

   console.log(token) prints the token string, not undefined or null.

3. Final Answer:

   A string token representing the device registration -> Option B

4. Quick Check:

   Successful getToken() = string token [OK]

Hint: getToken() returns string token on success [OK]

Common Mistakes:

• Expecting undefined or null instead of token
• Assuming error logs on success
• Confusing token with permission status

4. You wrote this code to get an FCM token but always get an error. What is the likely mistake?

const messaging = firebase.messaging();
const token = messaging.getToken();
console.log(token);

medium

A. Missing permission request before calling getToken()

B. firebase.messaging() is not initialized

C. getToken() returns a promise, not a direct value

D. console.log() cannot print tokens

Solution

1. Step 1: Verify permission requirement

   The code calls getToken() without first requesting notification permission using Notification.requestPermission().

2. Step 2: Consequence of missing permission

   Without granted permission, messaging.getToken() rejects the promise with an error, leading to an unhandled promise rejection error.

3. Final Answer:

   Missing permission request before calling getToken() -> Option A

4. Quick Check:

   Permission before getToken() [OK]

Hint: Request permission with Notification.requestPermission() before getToken() [OK]

Common Mistakes:

• Not using .then() or await with getToken()
• Forgetting to initialize Firebase
• Thinking console.log() cannot print tokens

5. You want to ensure your app always sends notifications to the correct device even if the FCM token changes. What is the best practice to handle token updates?

hard

A. Generate a new token manually every time the app starts

B. Store the token once and never update it

C. Listen for token refresh events and update your server with the new token

D. Ignore token changes because they rarely happen

Solution

1. Step 1: Understand token lifecycle

   FCM tokens can change, so apps must detect and handle updates.

2. Step 2: Use token refresh listener

   Listening for token refresh events lets the app send new tokens to the server to keep messaging accurate.

3. Final Answer:

   Listen for token refresh events and update your server with the new token -> Option C

4. Quick Check:

   Handle token refresh = update server [OK]

Hint: Always update server on token refresh events [OK]

Common Mistakes:

• Storing token once without updates
• Manually generating tokens incorrectly
• Ignoring token changes