FCM setup in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize Firebase Cloud Messaging in a web app.

Firebase

const messaging = firebase.[1]();

Drag options to blanks, or click blank then click option'

Aauth

Bmessaging

Cdatabase

Dstorage

Attempts:

3 left

💡 Hint

Common Mistakes

Using auth() instead of messaging()

Using database() or storage() which are unrelated to messaging

The messaging() method initializes Firebase Cloud Messaging service.

2fill in blank

medium

Complete the code to request permission for notifications from the user.

Firebase

Notification.[1]().then(() => console.log('Permission granted'));

Drag options to blanks, or click blank then click option'

AgetPermission

BaskPermission

CrequestPermission

DallowPermission

Attempts:

3 left

💡 Hint

Common Mistakes

Using getPermission() which does not exist

Using askPermission() or allowPermission() which are not valid methods

The requestPermission() method asks the user to allow notifications.

3fill in blank

hard

Fix the error in the code to get the FCM token for the device.

Firebase

messaging.getToken({ vapidKey: '[1]' }).then(token => console.log(token));

Drag options to blanks, or click blank then click option'

AYOUR_API_KEY

BYOUR_SERVER_KEY

CYOUR_PROJECT_ID

DYOUR_VAPID_KEY

Attempts:

3 left

💡 Hint

Common Mistakes

Using server key instead of VAPID key

Using API key or project ID which are unrelated here

The vapidKey must be your public VAPID key from Firebase settings, not server or API keys.

4fill in blank

hard

Fill both blanks to handle incoming messages and show a notification.

Firebase

messaging.onMessage(([1]) => {
  const notificationTitle = [2].notification.title;
  new Notification(notificationTitle);
});

Drag options to blanks, or click blank then click option'

Apayload

Bmessage

Cevent

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using different parameter names inconsistently

Trying to use event or data which are not standard here

The callback parameter is commonly named payload, which contains the notification data.

5fill in blank

hard

Fill all three blanks to subscribe the user to a topic using the Firebase Admin SDK.

Firebase

admin.messaging().subscribeToTopic([1], '[2]').then(response => {
  console.log('Successfully subscribed:', [3]);
});

Drag options to blanks, or click blank then click option'

AregistrationTokens

Bnews

Cresponse

Dtopic

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'topic' variable instead of the tokens array

Passing topic name as a variable instead of string

Logging wrong variable in the then() callback

You pass the device tokens as registrationTokens, the topic name as a string, and log the response from the subscription call.

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