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

Process Flow - Notification handling in background

App receives notification

↓

Is app in background?

No→Show notification in foreground

Yes↓

Background handler triggered

↓

Process notification data

↓

Show notification or update data silently

↓

User taps notification?

No→Wait

Yes↓

Open app or specific screen

When a notification arrives, the app checks if it is in background. If yes, a background handler processes it, showing notification or updating data silently. User interaction opens the app.

Execution Sample

Firebase

firebase.messaging().setBackgroundMessageHandler(async payload => {
  console.log('Message handled in the background!', payload);
  // Show notification or update data
});

This code sets a handler to process incoming notifications when the app is in the background.

Process Table

Step	App State	Notification Received	Action Taken	Result
1	Foreground	Yes	Show notification directly	User sees notification immediately
2	Background	Yes	Trigger background handler	Handler runs to process message
3	Background	Yes	Handler processes data	Notification shown or data updated
4	Background	User taps notification	Open app or specific screen	App opens to relevant content
5	Background	User does not tap	Wait	No immediate app action

💡 Notification handled based on app state; background handler stops after processing.

Status Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
App State	Foreground	Background	Background	Background	Foreground (after open)
Notification Received	No	Yes	Yes	Yes	Yes
Handler Triggered	No	Yes	Yes	Yes	No (after open)
Notification Shown	No	No	Yes	Yes	Yes
App Opened	No	No	No	Yes	Yes

Key Moments - 3 Insights

Why doesn't the notification show immediately when the app is in the background?

Because the background handler must first process the notification (see execution_table step 2 and 3), then it decides to show or update silently.

What happens if the user does not tap the notification?

The app stays in background and waits (execution_table step 5), no immediate action occurs until user interaction.

How does the app know to open a specific screen when the notification is tapped?

The background handler or notification payload includes data to navigate; tapping triggers app open with that data (step 4).

Visual Quiz - 3 Questions

Look at the execution table, what action is taken when the app is in the foreground and a notification arrives?

A Trigger background handler

B Show notification directly

C Wait silently

D Open app screen

💡 Hint

Check step 1 in the execution_table where App State is Foreground.

At which step does the background handler process the notification data?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at the Action Taken column in execution_table for processing data.

If the user never taps the notification, what is the app's state after step 5?

A Foreground

B Closed

C Background

D Unknown

💡 Hint

See execution_table step 5: app remains in Background.

Concept Snapshot

Notification handling in background:
- App checks if it is in foreground or background on notification arrival.
- Foreground: show notification immediately.
- Background: trigger background handler to process.
- Handler can show notification or update data silently.
- User tap opens app or specific screen.

Full Transcript

When a notification arrives, the app first checks if it is in the foreground or background. If the app is in the foreground, it shows the notification immediately. If the app is in the background, it triggers a background handler that processes the notification data. This handler can show a notification or update app data silently without user interaction. If the user taps the notification, the app opens to the relevant screen. If the user does not tap, the app remains in the background waiting for further action.

Practice

1. What is the main purpose of using onBackgroundMessage in Firebase Cloud Messaging?

easy

A. To authenticate users before sending notifications

B. To send messages from the client to the server

C. To handle notifications when the app is not open or in the background

D. To delete old notifications from the device

Solution

1. Step 1: Understand the role of onBackgroundMessage

   This function is designed to catch messages when the app is not active or open.

2. Step 2: Compare with other options

   Sending messages, authentication, or deleting notifications are unrelated to background message handling.

3. Final Answer:

   To handle notifications when the app is not open or in the background -> Option C

4. Quick Check:

   Background message handling = To handle notifications when the app is not open or in the background [OK]

Hint: Remember: background means app closed or hidden [OK]

Common Mistakes:

• Confusing sending messages with receiving them
• Thinking it manages user authentication
• Assuming it deletes notifications automatically

2. Which of the following is the correct way to import and use onBackgroundMessage in a Firebase service worker?

easy

A. import { onBackgroundMessage } from 'firebase/messaging/sw'; onBackgroundMessage(handler);

B. import { onBackgroundMessage } from 'firebase/messaging/sw'; onBackgroundMessage(messaging, handler);

C. import { onBackgroundMessage } from 'firebase/messaging'; messaging.onBackgroundMessage(handler);

D. import { onBackgroundMessage } from 'firebase/messaging'; onBackgroundMessage(messaging, handler);

Solution

1. Step 1: Identify correct import path

   The correct import for service worker usage is from 'firebase/messaging/sw'.

2. Step 2: Use correct function signature

   onBackgroundMessage requires only the handler function as argument (no messaging instance needed).

3. Final Answer:

   import { onBackgroundMessage } from 'firebase/messaging/sw'; onBackgroundMessage(handler); -> Option A

4. Quick Check:

   Correct import and call signature = import { onBackgroundMessage } from 'firebase/messaging/sw'; onBackgroundMessage(handler); [OK]

Hint: Remember: import from 'firebase/messaging/sw' and pass handler only [OK]

Common Mistakes:

• Importing from wrong path like 'firebase/messaging'
• Passing messaging instance to onBackgroundMessage
• Using messaging.onBackgroundMessage(handler)

3. Given this service worker code snippet, what will happen when a background message arrives?

import { onBackgroundMessage } from 'firebase/messaging/sw';
import { messaging } from './firebase-config';

onBackgroundMessage((payload) => {
  console.log('Received background message ', payload);
  self.registration.showNotification(payload.notification.title, {
    body: payload.notification.body
  });
});

medium

A. Only the message payload is logged, no notification is shown

B. The notification shows but the payload is not logged

C. An error occurs because showNotification is not a valid method

D. The message payload is logged and a notification with title and body is shown

Solution

1. Step 1: Analyze the callback function

   The callback logs the payload and calls showNotification with title and body from the payload.

2. Step 2: Confirm method validity

   self.registration.showNotification is the correct way to show notifications in service workers.

3. Final Answer:

   The message payload is logged and a notification with title and body is shown -> Option D

4. Quick Check:

   Payload logged + notification shown = The message payload is logged and a notification with title and body is shown [OK]

Hint: Check if both console.log and showNotification are called [OK]

Common Mistakes:

• Thinking showNotification is invalid in service workers
• Assuming logging disables notification
• Ignoring the payload content usage

4. You wrote this service worker code but notifications do not appear when the app is in background:

import { onBackgroundMessage } from 'firebase/messaging';
import { messaging } from './firebase-config';

onBackgroundMessage((payload) => {
  self.registration.showNotification(payload.notification.title, {
    body: payload.notification.body
  });
});

What is the main issue?

medium

A. Using self.registration.showNotification instead of Notification.show

B. Wrong import path for onBackgroundMessage ('firebase/messaging' instead of 'firebase/messaging/sw')

C. Not importing messaging from Firebase

D. Payload does not contain notification object

Solution

1. Step 1: Check onBackgroundMessage usage

   The import path is wrong for service worker; must be from 'firebase/messaging/sw'.

2. Step 2: Verify notification method and imports

   self.registration.showNotification is correct and messaging is imported but not needed.

3. Final Answer:

   Wrong import path for onBackgroundMessage ('firebase/messaging' instead of 'firebase/messaging/sw') -> Option B

4. Quick Check:

   Service worker import path = Wrong import path for onBackgroundMessage ('firebase/messaging' instead of 'firebase/messaging/sw') [OK]

Hint: Remember: import from 'firebase/messaging/sw' [OK]

Common Mistakes:

• Using wrong import path for onBackgroundMessage
• Confusing notification API names
• Assuming payload structure is always wrong

5. You want to ensure your Firebase app shows a notification with a custom icon and vibrates when a background message arrives. Which code snippet correctly adds these features inside onBackgroundMessage?

hard

A. onBackgroundMessage((payload) => { self.registration.showNotification(payload.notification.title, { body: payload.notification.body, icon: '/icon.png', vibrate: [100, 50, 100] }); });

B. onBackgroundMessage((payload) => { self.showNotification(payload.notification.title, { body: payload.notification.body, icon: '/icon.png', vibrate: [100, 50, 100] }); });

C. onBackgroundMessage((payload) => { Notification.show(payload.notification.title, { body: payload.notification.body, icon: '/icon.png', vibrate: [100, 50, 100] }); });

D. onBackgroundMessage((payload) => { self.registration.showNotification(payload.title, { body: payload.body, icon: '/icon.png', vibrate: [100, 50, 100] }); });

Solution

1. Step 1: Use correct notification method and parameters

   self.registration.showNotification is correct. The notification title and body come from payload.notification.

2. Step 2: Add icon and vibrate options properly

   Options icon and vibrate are correctly included in the options object.

3. Final Answer:

   onBackgroundMessage((payload) => { self.registration.showNotification(payload.notification.title, { body: payload.notification.body, icon: '/icon.png', vibrate: [100, 50, 100] }); }); -> Option A

4. Quick Check:

   Correct method, payload fields, and options = onBackgroundMessage((payload) => { self.registration.showNotification(payload.notification.title, { body: payload.notification.body, icon: '/icon.png', vibrate: [100, 50, 100] }); }); [OK]

Hint: Use self.registration.showNotification with full payload.notification fields [OK]

Common Mistakes:

• Using wrong notification method like self.showNotification
• Accessing payload.title instead of payload.notification.title
• Omitting icon or vibrate options