Notification handling in foreground in Firebase - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ service_behavior

intermediate

Foreground Notification Display Behavior

When a Firebase Cloud Messaging (FCM) notification is received while the app is in the foreground, what is the default behavior?

A The notification is not displayed automatically; the app must handle displaying it manually.

B The notification triggers a system alert dialog automatically.

C The notification is discarded and not delivered to the app.

D The notification is automatically displayed in the device's notification tray.

💡 Hint

Think about how apps behave when they are open and receiving messages.

When the app is in the foreground, FCM does not automatically show notifications. The app receives the message and must decide how to display it.

❓ Configuration

intermediate

Correct Firebase Messaging Handler Setup

Which code snippet correctly sets up a Firebase messaging handler to receive messages when the app is in the foreground (using JavaScript)?

Firebase

import { getMessaging, onMessage } from 'firebase/messaging';
const messaging = getMessaging();
onMessage(messaging, (payload) => {
  console.log('Message received:', payload);
  // Display notification here
});

A getMessaging().onMessage((payload) => { console.log(payload); });

B messaging.on('message', (payload) => { console.log(payload); });

C firebase.messaging().onMessage((payload) => { console.log(payload); });

D onMessage(messaging, (payload) => { console.log('Message:', payload); });

💡 Hint

Check the official Firebase Web SDK method for foreground message handling.

The onMessage function from firebase/messaging is the correct way to listen for foreground messages.

❓ Architecture

advanced

Designing Reliable Foreground Notification Handling

You want to ensure users see important notifications even when your app is open. Which architecture best supports this?

A Use local notifications only and avoid FCM messages.

B Use FCM data messages and handle them in the app to show custom notifications when in foreground.

C Send silent push notifications that do not show any UI but update app data only.

D Send only notification messages and rely on the system to display them automatically.

💡 Hint

Consider how to control notification display when the app is active.

Data messages allow the app to receive payloads and decide how to display notifications, ensuring visibility in foreground.

❓ security

advanced

Security Considerations for Foreground Notifications

What is a key security best practice when handling FCM messages in the foreground?

A Validate and sanitize all message data before displaying it to prevent injection attacks.

B Trust all incoming messages since they come from Firebase servers.

C Disable message handling in the foreground to avoid security risks.

D Store all message data in plain text for easy debugging.

💡 Hint

Think about how untrusted data can affect your app UI.

Even though messages come from Firebase, they can contain user-generated content. Always validate and sanitize to avoid security issues.

🧠 Conceptual

expert

Foreground Notification Behavior Across Platforms

Which statement correctly describes the difference in foreground notification handling between Android and iOS when using Firebase Cloud Messaging?

A Both Android and iOS automatically display notifications in foreground without app intervention.

B iOS requires manual notification display in foreground; Android automatically shows notifications in foreground.

C Neither Android nor iOS display notifications automatically in foreground; both require manual handling.

D Android requires manual notification display in foreground; iOS automatically shows notifications even in foreground.

💡 Hint

Consider platform differences in notification systems.

Both Android and iOS do not display notifications automatically when the app is in foreground; the app must handle it manually.

Practice

1. What does the onMessage method do in Firebase Cloud Messaging when the app is in the foreground?

easy

A. It stores messages for later delivery.

B. It listens for incoming messages and allows the app to handle them immediately.

C. It disables notifications while the app is open.

D. It sends messages to other devices.

Solution

1. Step 1: Understand the purpose of onMessage

   The onMessage method is designed to listen for messages when the app is active (in the foreground).

2. Step 2: Identify what happens when a message arrives

   When a message arrives, onMessage lets the app immediately respond, such as showing a custom notification or updating the UI.

3. Final Answer:

   It listens for incoming messages and allows the app to handle them immediately. -> Option B

4. Quick Check:

   onMessage listens in foreground = D [OK]

Hint: Remember: onMessage handles messages only when app is open [OK]

Common Mistakes:

• Confusing onMessage with sending messages
• Thinking onMessage disables notifications
• Assuming messages are stored for later automatically

2. Which of the following is the correct syntax to set up a listener for foreground messages using Firebase Cloud Messaging in JavaScript?

easy

A. firebase.messaging().onMessage(payload => { console.log(payload); });

B. firebase.messaging.onMessage(payload => { console.log(payload); });

C. firebase.messaging().onmessage(payload => { console.log(payload); });

D. firebase.messaging().onMessage = function(payload) { console.log(payload); };

Solution

1. Step 1: Identify correct method call syntax

   The correct method is onMessage called on the messaging instance returned by firebase.messaging().

2. Step 2: Check arrow function usage

   The listener uses an arrow function to receive the payload and handle it, which matches firebase.messaging().onMessage(payload => { console.log(payload); });.

3. Final Answer:

   firebase.messaging().onMessage(payload => { console.log(payload); }); -> Option A

4. Quick Check:

   Correct method call with parentheses and camelCase = C [OK]

Hint: Use parentheses after messaging and exact camelCase onMessage [OK]

Common Mistakes:

• Missing parentheses after messaging()
• Using lowercase onmessage instead of onMessage
• Assigning onMessage instead of calling it

3. Given this code snippet, what will be logged when a message arrives while the app is in the foreground?

firebase.messaging().onMessage(payload => {
  console.log('Message received:', payload.notification.title);
});

medium

A. Message received: followed by the notification title from the payload

B. An error because payload.notification is undefined

C. Nothing, because onMessage does not trigger in foreground

D. Message received: followed by the entire payload object

Solution

1. Step 1: Understand onMessage behavior

   The onMessage callback triggers immediately when a message arrives in the foreground.

2. Step 2: Analyze the console.log statement

   The code logs the string 'Message received:' plus the title property inside payload.notification.

3. Final Answer:

   Message received: followed by the notification title from the payload -> Option A

4. Quick Check:

   onMessage logs notification title = A [OK]

Hint: Check what property is logged inside the callback [OK]

Common Mistakes:

• Assuming onMessage does not trigger in foreground
• Expecting entire payload logged instead of title
• Not accessing notification.title correctly

4. You wrote this code to handle foreground messages but nothing happens when a message arrives:

firebase.messaging.onMessage(payload => {
  alert('New message!');
});

What is the most likely reason?

medium

A. onMessage only works in background, not foreground.

B. The alert function does not work in Firebase.

C. You forgot to call the messaging function with parentheses.

D. You need to import a special package for alerts.

Solution

1. Step 1: Check how messaging is accessed

   The code uses firebase.messaging.onMessage without parentheses after messaging. This is incorrect.

2. Step 2: Correct usage requires calling messaging()

   You must call firebase.messaging() to get the messaging instance before calling onMessage.

3. Final Answer:

   You forgot to call the messaging function with parentheses. -> Option C

4. Quick Check:

   messaging() must be called before onMessage = A [OK]

Hint: Always use parentheses after messaging to get the instance [OK]

Common Mistakes:

• Missing parentheses after messaging
• Thinking onMessage works only in background
• Believing alert is unsupported in Firebase

5. You want to show a custom notification banner in your app when a message arrives in the foreground. Which approach correctly uses Firebase Cloud Messaging to achieve this?

hard

A. Rely on Firebase to automatically show system notifications in the foreground without extra code.

B. Disable onMessage and only use server-side notifications.

C. Use onBackgroundMessage to handle foreground messages and show notifications.

D. Use onMessage to listen for messages and then display a custom UI element with the message data.

Solution

1. Step 1: Understand foreground message handling

   Firebase does not automatically show system notifications when the app is open; you must handle them yourself.

2. Step 2: Use onMessage to listen and show custom UI

   By using onMessage, you get the message data and can display a custom banner or alert inside your app.

3. Final Answer:

   Use onMessage to listen for messages and then display a custom UI element with the message data. -> Option D

4. Quick Check:

   Custom UI on foreground message = B [OK]

Hint: Handle foreground messages yourself with onMessage for custom display [OK]

Common Mistakes:

• Expecting automatic system notifications in foreground
• Using onBackgroundMessage for foreground events
• Disabling onMessage and missing notifications