Notification handling in foreground in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to listen for foreground messages using Firebase Cloud Messaging.

Firebase

firebase.messaging().onMessage([1]);

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

AhandleMessage

BonMessageReceived

Ccallback

DmessageListener

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a string instead of a function.

Using an incorrect method name.

The onMessage method expects a callback function as its argument to handle incoming messages.

2fill in blank

medium

Complete the code to log the notification payload when a message is received in the foreground.

Firebase

firebase.messaging().onMessage(([1]) => {
  console.log('Message received:', [1]);
});

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

Apayload

Bevent

Cmessage

Dnotification

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that does not match inside the function.

Confusing the event with the payload.

The callback receives the message payload, which is commonly named payload.

3fill in blank

hard

Fix the error in the code to correctly display a notification when a foreground message arrives.

Firebase

firebase.messaging().onMessage((payload) => {
  new Notification([1]).show();
});

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

Apayload.title

Bpayload.notification.title

Cpayload.message.title

Dpayload.data.title

Attempts:

3 left

💡 Hint

Common Mistakes

Accessing title directly on payload.

Using the wrong nested property.

The notification title is inside payload.notification.title when receiving a message.

4fill in blank

hard

Fill both blanks to extract the notification title and body from the payload.

Firebase

const title = payload.[1].title;
const body = payload.[2].body;

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

Anotification

Bdata

Cmessage

Dpayload

Attempts:

3 left

💡 Hint

Common Mistakes

Using different properties for title and body.

Accessing properties directly on payload.

Both title and body are inside the notification object of the payload.

5fill in blank

hard

Fill all three blanks to show a notification with title, body, and icon from the payload.

Firebase

const notificationOptions = {
  body: payload.[1].body,
  icon: payload.[2].icon
};
new Notification(payload.[3].title, notificationOptions);

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

Anotification

Bdata

Cmessage

Dpayload

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing different properties for icon and body.

Using data instead of notification.

Title, body, and icon are all inside the notification property of the payload.