Notification handling in background in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to register the background message handler.

Firebase

import { getMessaging, onBackgroundMessage } from 'firebase/messaging/sw';

const messaging = getMessaging();
onBackgroundMessage(messaging, (payload) => {
  console.log('Received background message ', [1]);
});

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

Apayload

Bevent

Cmessage

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using an undefined variable name instead of the callback parameter.

Confusing event objects with payload data.

The payload parameter contains the message data received in the background.

2fill in blank

medium

Complete the code to show a notification with title and body from the payload.

Firebase

self.registration.showNotification(payload.notification.[1], {
  body: payload.notification.body
});

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

Atitle

Bmessage

Cheader

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property names like 'message' or 'header'.

Trying to access nested properties incorrectly.

The notification title is accessed via payload.notification.title.

3fill in blank

hard

Fix the error in the background message handler to correctly access notification data.

Firebase

onBackgroundMessage(messaging, (payload) => {
  const notificationTitle = payload.[1].title;
  const notificationOptions = {
    body: payload.notification.body
  };
  self.registration.showNotification(notificationTitle, notificationOptions);
});

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

Adata

Bpayload

Cmessage

Dnotification

Attempts:

3 left

💡 Hint

Common Mistakes

Accessing payload.data.title instead of payload.notification.title.

Using incorrect property names.

The notification data is inside the notification property of the payload.

4fill in blank

hard

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

Firebase

const title = payload.[1].title;
const options = { body: payload.[2].body };
self.registration.showNotification(title, options);

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

Anotification

Bdata

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing data and notification properties.

Using different properties for title and body.

Both title and body come from the notification property of the payload.

5fill in blank

hard

Fill all three blanks to handle background message, extract title and body, and show notification.

Firebase

onBackgroundMessage(messaging, ([1]) => {
  const title = [1].[2].title;
  const options = { body: [1].[2].body };
  self.registration.showNotification(title, options);
});

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

Apayload

Bnotification

Cdata

Devent

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the callback parameter.

Confusing data with notification.

The callback parameter is payload. The notification details are inside payload.notification.