Notification handling in foreground in Firebase - Deep Dive

Overview - Notification handling in foreground

What is it?

Notification handling in foreground means managing messages that arrive while an app is open and active on the screen. Instead of showing a system alert or banner, the app decides how to display or react to the message. This lets the app provide a smooth experience without interrupting the user unexpectedly. It is common in apps that use Firebase Cloud Messaging to send updates or alerts.

Why it matters

Without foreground notification handling, users might miss important messages or get interrupted by default system alerts that don't fit the app's style. Proper handling lets apps show messages in a friendly way, like updating the screen or showing a custom popup. This improves user engagement and keeps the app feeling responsive and polished.

Where it fits

Learners should first understand basic Firebase Cloud Messaging concepts and how notifications work in general. After mastering foreground handling, they can learn background notification handling and advanced topics like message data payloads and user interaction tracking.

Mental Model

Core Idea

When the app is open, it catches incoming messages itself and decides how to show them instead of relying on the system.

Think of it like...

It's like receiving a phone call while you're already talking to someone; instead of the phone ringing loudly, you quietly listen and decide when to mention the new caller.

┌─────────────────────────────┐
│ Firebase Cloud Messaging (FCM) │
└─────────────┬───────────────┘
              │
      Incoming Notification
              │
┌─────────────▼───────────────┐
│ Is app in foreground?        │
│ ┌───────────────┐           │
│ │ Yes           │           │
│ │               │           │
│ │ App handles   │           │
│ │ notification  │           │
│ │ (custom UI)   │           │
│ └───────────────┘           │
│                             │
│ ┌───────────────┐           │
│ │ No            │           │
│ │               │           │
│ │ System shows  │           │
│ │ notification  │           │
│ └───────────────┘           │
└─────────────────────────────┘

Build-Up - 6 Steps

1

Foundation

What is a foreground notification?

Concept: Introduces the idea that notifications can arrive while the app is open and active.

Notifications are messages sent to your app. When your app is open and visible, these are called foreground notifications. Unlike background notifications, they don't automatically show system alerts. The app must decide what to do with them.

Result

You understand that notifications behave differently depending on whether the app is open or not.

Knowing that notifications behave differently in foreground helps you plan how to keep users informed without annoying them.

2

Foundation

Firebase Cloud Messaging basics

Concept: Explains how Firebase sends notifications and how apps receive them.

Firebase Cloud Messaging (FCM) sends messages to devices. Apps register to receive these messages. When a message arrives, the app can react. If the app is closed, the system shows the notification. If open, the app can handle it directly.

Result

You can explain how FCM delivers messages and the difference between system and app handling.

Understanding FCM's delivery method is key to controlling notification behavior in your app.

3

Intermediate

Setting up foreground message listener

🤔Before reading on: do you think the app automatically shows notifications when in foreground, or do you need to write code to handle them? Commit to your answer.

Concept: Shows how to write code that listens for messages when the app is active.

In your app code, you add a listener for messages received while the app is open. For example, in Firebase for JavaScript, you use messaging.onMessage(callback). This callback runs when a message arrives, letting you decide what to do.

Result

Your app can catch messages in real time and run custom code like showing a popup or updating the screen.

Knowing you must explicitly listen for foreground messages prevents missing important updates when the app is active.

4

Intermediate

Custom UI for foreground notifications

🤔Before reading on: do you think the app should always show a system notification in foreground, or can it show a custom message inside the app? Commit to your answer.

Concept: Explains how to create user-friendly messages inside the app instead of default alerts.

Instead of system alerts, apps often show banners, modals, or update parts of the screen. This keeps the experience smooth. For example, a chat app might add a new message bubble instantly without interrupting the user.

Result

Users see notifications in a way that fits the app's style and flow, improving experience.

Custom UI lets apps communicate without breaking user focus or causing annoyance.

5

Advanced

Handling data-only messages in foreground

🤔Before reading on: do you think data-only messages trigger system notifications automatically, or must the app handle them? Commit to your answer.

Concept: Introduces messages that carry only data and require app logic to display anything.

Data-only messages contain no notification text. They are silent and let the app decide what to do. When received in foreground, the app must parse the data and show something meaningful, like updating content or showing a custom alert.

Result

You can handle flexible messages that do not rely on system notifications, giving full control.

Understanding data-only messages unlocks advanced notification strategies and richer user experiences.

6

Expert

Avoiding notification duplication pitfalls

🤔Before reading on: do you think the system and app can both show notifications for the same message in foreground? Commit to your answer.

Concept: Explains how to prevent the app and system from showing duplicate notifications when the app is active.

If a message has both notification and data payloads, the system may show a notification automatically even if the app also shows one. To avoid duplicates, use data-only messages for foreground or suppress system notifications by handling messages properly.

Result

Your app avoids confusing users with repeated alerts and maintains a clean notification flow.

Knowing how to prevent duplicates is crucial for professional, user-friendly notification handling.

Under the Hood

When a notification arrives, Firebase Cloud Messaging delivers it to the device. If the app is in the background or closed, the system displays the notification automatically. If the app is in the foreground, the message is passed directly to the app's message handler code. The app then decides how to process or display the message. This happens because the operating system defers notification display to the app when it is active, giving full control to the app.

Why designed this way?

This design lets apps provide a seamless user experience. Automatically showing system notifications while the app is open could interrupt or confuse users. By handing control to the app, developers can create custom, context-aware displays. Alternatives like always showing system notifications would reduce flexibility and user experience quality.

┌───────────────┐
│ Firebase FCM  │
└───────┬───────┘
        │
        ▼
┌───────────────┐
│ Device OS     │
│ Notification  │
│ Manager       │
└───────┬───────┘
        │
  App in Foreground?
     ┌───────┴───────┐
     │               │
    Yes             No
     │               │
     ▼               ▼
┌───────────────┐  ┌───────────────┐
│ App Message   │  │ System shows  │
│ Handler Code  │  │ Notification  │
└───────────────┘  └───────────────┘

Myth Busters - 3 Common Misconceptions

Quick: Does the system automatically show notifications when the app is open? Commit to yes or no.

Common Belief: The system always shows notifications, even if the app is open.

Reality: When the app is open, the system does NOT show notifications automatically; the app must handle them.

Why it matters: Assuming the system shows notifications can cause missed messages or duplicate alerts if the app also tries to show them.

Quick: Do data-only messages trigger system notifications by themselves? Commit to yes or no.

Common Belief: Data-only messages automatically show notifications like normal messages.

Reality: Data-only messages do NOT trigger system notifications; the app must process and display them.

Why it matters: Misunderstanding this leads to silent messages and confused users who never see updates.

Quick: Can the app and system both show notifications for the same message in foreground? Commit to yes or no.

Common Belief: Both the app and system can show notifications simultaneously without issues.

Reality: If not handled carefully, both can show notifications causing duplicates and user annoyance.

Why it matters: Ignoring this causes poor user experience and can make users disable notifications.

Expert Zone

1

Foreground notification handling must consider app state changes to avoid missing messages during quick switches between foreground and background.

2

Using data-only messages with custom handling allows richer interactions but requires careful design to maintain reliability and user trust.

3

Some platforms have subtle differences in how foreground notifications behave, so cross-platform apps must implement platform-specific logic.

When NOT to use

Foreground notification handling is not suitable when the app is closed or in the background; in those cases, rely on system notifications. Also, for very simple apps, default system notifications may suffice without custom handling.

Production Patterns

In production, apps often combine data-only messages with foreground handlers to update UI instantly, while using notification payloads for background alerts. They implement debounce logic to avoid duplicate notifications and use analytics to track user interaction with notifications.

Connections

Event-driven programming

Foreground notification handling builds on event-driven patterns where the app reacts to incoming messages as events.

Understanding event-driven programming helps grasp how apps listen and respond to notifications dynamically.

User experience design

Notification handling directly impacts user experience by controlling how and when users see messages.

Knowing UX principles guides developers to design notifications that inform without annoying users.

Interrupt handling in operating systems

Foreground notification handling is similar to how OS interrupts are managed, deciding when to notify the user or defer handling.

Recognizing this connection helps understand the balance between system control and app control in notifications.

Common Pitfalls

#1 Showing system notifications and app notifications simultaneously in foreground.

Wrong approach:

Send notification payload with data payload; app shows custom alert and system also shows notification automatically.

Correct approach:

Use data-only messages for foreground and handle display entirely in app code to avoid duplicates.

Root cause:

Not understanding that notification payload triggers system alerts even if the app is active.

#2 Ignoring data-only messages in foreground, causing silent updates.

Wrong approach:

No listener for foreground messages; app does nothing when data-only message arrives.

Correct approach:

Implement onMessage listener to process data-only messages and update UI accordingly.

Root cause:

Assuming all messages show notifications automatically.

#3 Not handling app state changes, missing messages during quick foreground/background switches.

Wrong approach:

Set up listener only once at app start without considering lifecycle events.

Correct approach:

Manage listeners with app lifecycle to ensure messages are caught whenever app is active.

Root cause:

Overlooking app lifecycle complexity and message timing.

Key Takeaways

Foreground notification handling lets apps control how messages appear when the app is open, improving user experience.

Firebase Cloud Messaging delivers messages differently depending on app state; the app must listen and handle foreground messages explicitly.

Using data-only messages in foreground gives full control but requires custom code to show notifications or update UI.

Avoiding duplicate notifications requires careful message design and handling to prevent system and app alerts overlapping.

Understanding app lifecycle and platform differences is essential for reliable and user-friendly notification handling.

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