Notification handling in foreground in Firebase - Step-by-Step Execution

Process Flow - Notification handling in foreground

App receives notification

↓

Is app in foreground?

No→Show system notification

Yes↓

Handle notification in app

↓

Update UI or alert user

↓

End

When a notification arrives, the app checks if it is active (foreground). If yes, it handles the notification internally without showing a system alert.

Execution Sample

Firebase

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

This code listens for messages when the app is open and shows an alert with the notification title.

Process Table

Step	Event	App State	Action Taken	Output
1	Notification received	Foreground	Call onMessage handler	Console logs message, alert shown
2	User sees alert	Foreground	User reads alert	UI updated with message info
3	Notification received	Background	System shows notification	Notification appears in system tray
4	User taps notification	Background	App opens to relevant screen	App UI updated
5	No more notifications	-	-	Waiting for next notification

💡 Execution stops waiting for new notifications or user actions.

Status Tracker

Variable	Start	After Step 1	After Step 2	After Step 4	Final
payload	null	{notification: {title: 'Hello'}}	{notification: {title: 'Hello'}}	{notification: {title: 'Hello'}}	null
appState	Foreground	Foreground	Foreground	Background	Background
alertShown	false	true	true	false	false

Key Moments - 2 Insights

Why does the app show an alert only when in foreground?

Because onMessage handler triggers only when app is active, as shown in execution_table step 1 and 2.

What happens if the app is in background when notification arrives?

The system shows the notification automatically, no alert from app code, as in step 3.

Visual Quiz - 3 Questions

Look at the execution_table, what action happens at step 3?

A App shows alert with message

B App logs message to console

C System shows notification in tray

D User taps notification

💡 Hint

Check the 'Action Taken' column in step 3 of execution_table.

At which step does the app update the UI after user interaction?

A Step 2

B Step 4

C Step 1

D Step 5

💡 Hint

Look for 'App UI updated' in the 'Output' column.

If the app never goes to background, which steps will NOT occur?

A Steps 3 and 4

B Step 5 only

C Steps 1 and 2

D All steps occur

💡 Hint

Steps 3 and 4 involve background state as per 'App State' column.

Concept Snapshot

Notification handling in foreground:
- Use onMessage listener to catch notifications when app is active.
- Show custom UI or alerts inside app.
- System notifications appear only if app is backgrounded.
- Helps avoid duplicate alerts and improves user experience.
- Always check app state before deciding notification display.

Full Transcript

When a notification arrives, the app first checks if it is in the foreground. If yes, it uses the onMessage handler to process the notification internally, such as showing an alert or updating the UI. If the app is in the background, the system automatically displays the notification in the system tray. The user can tap the notification to open the app and see relevant content. This approach prevents duplicate notifications and ensures a smooth user experience.