Notification handling in background in Firebase - Commands & Configuration

Introduction

When your app is not open or running in the background, it still needs to receive and show notifications. This concept helps your app handle notifications even when users are not actively using it.

When you want to alert users about new messages even if the app is closed.

When you need to update app content silently in the background.

When you want to show reminders or alerts without opening the app.

When your app needs to react to notifications while running in the background.

When you want to improve user engagement by timely notifications.

Config File - firebase-messaging-sw.js

firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/9.22.1/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.22.1/firebase-messaging-compat.js');

firebase.initializeApp({
  apiKey: "AIzaSyExampleKey1234567890",
  authDomain: "example-app.firebaseapp.com",
  projectId: "example-app",
  storageBucket: "example-app.appspot.com",
  messagingSenderId: "123456789012",
  appId: "1:123456789012:web:abcdef123456"
});

const messaging = firebase.messaging();

messaging.onBackgroundMessage(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});

This file is a service worker script that runs in the background.

It initializes Firebase with your app's config.

The onBackgroundMessage function listens for messages when the app is in the background and shows notifications.

The notification includes a title, body, and icon.

Commands

Deploys your service worker file and other hosting files to Firebase so the background notifications can work.

Terminal

firebase deploy --only hosting

Expected Output

=== Deploying to 'example-app'...



i  deploying hosting



✔  hosting: example-app



✔  Deploy complete!



Project Console: https://console.firebase.google.com/project/example-app/overview

→

--only hosting - Deploy only the hosting part, including the service worker.

Sends a test notification to a specific device token to verify background notification handling.

Terminal

firebase messaging:send --token eXampleDeviceToken123456 --notification-title "Hello" --notification-body "You have a new message"

Expected Output

Successfully sent message: projects/example-app/messages/1234567890123456789

→

--token - Specifies the device token to send the notification to.

→

--notification-title - Sets the notification title.

→

--notification-body - Sets the notification body text.

Opens a live preview URL to test your deployed service worker and background notifications.

Terminal

firebase hosting:channel:open live

Expected Output

✔  Hosting URL: https://live--example-app.web.app



You can now view your site in the browser.

Key Concept

If you remember nothing else from this pattern, remember: the service worker script handles notifications when the app is not active.

Common Mistakes

Not registering the service worker file in the app's main code.

Without registration, the browser won't run the background script, so notifications won't appear.

Add code in your app to register 'firebase-messaging-sw.js' as a service worker.

Using incorrect Firebase config in the service worker.

Wrong config prevents Firebase from initializing, so messages won't be received.

Copy the exact Firebase config from your Firebase console into the service worker.

Sending notifications without the notification payload.

Without notification fields, background messages may not show visible alerts.

Always include 'notification' with 'title' and 'body' in your message payload.

Summary

Create a service worker file 'firebase-messaging-sw.js' to handle background notifications.

Deploy the service worker using 'firebase deploy --only hosting'.

Send test notifications using Firebase CLI to verify background handling.

Remember to register the service worker in your app for it to work.

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