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.