FCM setup in Firebase - Step-by-Step Execution

Process Flow - FCM setup

Create Firebase Project

↓

Enable Cloud Messaging

↓

Download config file

↓

Add config to app

↓

Initialize Firebase in app

↓

Request user permission

↓

Get FCM token

↓

Send/Receive messages

This flow shows the steps to set up Firebase Cloud Messaging from project creation to sending and receiving messages.

Execution Sample

Firebase

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
messaging.requestPermission()
  .then(() => messaging.getToken())
  .then(token => console.log(token));

This code initializes Firebase, requests permission for notifications, and retrieves the FCM token.

Process Table

Step	Action	Result	Next Step
1	Initialize Firebase with config	Firebase app ready	Request permission
2	Request notification permission	Permission granted	Get FCM token
3	Get FCM token	Token received: abc123	Use token to send messages
4	Use token to send message	Message sent successfully	Listen for messages
5	Receive message	Message displayed to user	End
6	Permission denied or error	No token received	Stop setup

💡 Setup ends after receiving token and sending/receiving messages or if permission denied.

Status Tracker

Variable	Start	After Step 2	After Step 3	Final
firebaseApp	null	initialized	initialized	initialized
permission	not requested	granted	granted	granted
fcmToken	null	null	abc123	abc123
messageStatus	none	none	sent	received

Key Moments - 3 Insights

Why do we need to request permission before getting the FCM token?

Because the token is only issued if the user allows notifications, as shown in execution_table step 2 and 3.

What happens if the user denies permission?

No token is received and setup stops, as shown in execution_table step 6.

Why do we initialize Firebase before requesting permission?

Firebase must be ready to handle messaging requests, as shown in execution_table step 1.

Visual Quiz - 3 Questions

Look at the execution table, what is the result after requesting permission?

A Message sent

B Permission granted

C Token received

D Permission denied

💡 Hint

Check step 2 in the execution_table for the permission request result.

At which step does the FCM token get received?

A Step 1

B Step 5

C Step 3

D Step 6

💡 Hint

Look at the 'Result' column in execution_table step 3.

If the user denies permission, what happens to the token variable?

A It stays null

B It becomes 'abc123'

C It becomes 'permission denied'

D It gets deleted

💡 Hint

Refer to variable_tracker for 'fcmToken' after step 2 and step 6.

Concept Snapshot

FCM setup steps:
1. Create Firebase project and enable Cloud Messaging.
2. Download config and add to app.
3. Initialize Firebase in app code.
4. Request user permission for notifications.
5. Get FCM token if permission granted.
6. Use token to send and receive messages.

Full Transcript

To set up Firebase Cloud Messaging (FCM), first create a Firebase project and enable Cloud Messaging. Download the configuration file and add it to your app. Initialize Firebase in your app code. Then request the user's permission to send notifications. If permission is granted, get the FCM token. Use this token to send messages to the device. The device can then receive and display messages. If permission is denied, no token is received and setup stops.

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