Notification handling in foreground in Firebase - Commands & Configuration

Introduction

When your app is open and running, it needs to show notifications differently than when it is closed. Handling notifications in the foreground means your app can decide how to show alerts or messages while the user is actively using it.

When you want to show a custom alert or message inside the app while the user is using it.

When you want to update the app's screen immediately after receiving a notification.

When you want to prevent the default system notification from showing while the app is open.

When you want to log or track notifications received during active app use.

When you want to play a sound or vibrate the device only when the app is in the foreground.

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: "1234567890",
  appId: "1:1234567890: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 the service worker that handles background notifications when the app is closed or in the background.

It initializes Firebase with your app's config and listens for background messages to show system notifications.

Foreground notifications are handled inside the app code, not here.

Commands

Install the Firebase JavaScript SDK version 9.22.1 to use Firebase services including messaging.

Terminal

npm install firebase@9.22.1

Expected Output

added 1 package, and audited 2 packages in 1s



found 0 vulnerabilities

Check the installed Firebase SDK version to confirm the correct version is installed.

Terminal

node -e "console.log(require('firebase/app').SDK_VERSION)"

Expected Output

9.22.1

Deploy Firebase Cloud Messaging and related functions to enable notification handling in your app.

Terminal

firebase deploy --only functions,messaging

Expected Output

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



✔  functions: Finished running predeploy script.



✔  functions: All functions deployed successfully!



✔  hosting: Hosting files deployed successfully



✔  messaging: Messaging deployed successfully



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



Deployment complete!

→

--only - Deploy only specified Firebase services to save time and avoid deploying unrelated parts.

Run your app locally to test notification handling in the foreground using Firebase Messaging SDK.

Terminal

node app.js

Expected Output

App started on http://localhost:3000

Listening for foreground notifications...

Notification received: { title: 'Hello', body: 'Welcome to the app!' }

Key Concept

If you remember nothing else from this pattern, remember: foreground notifications require your app to listen and handle messages directly to control how alerts appear while the app is open.

Common Mistakes

Relying only on the service worker to show notifications when the app is open.

Service workers handle background notifications, so foreground messages won't show unless handled in app code.

Use Firebase Messaging's onMessage listener inside your app to handle notifications when the app is active.

Not initializing Firebase Messaging properly in the app before listening for messages.

Without proper initialization, the app cannot receive or handle messages correctly.

Initialize Firebase with your config and create a messaging instance before setting up message listeners.

Ignoring user permission requests for notifications.

Without permission, the app cannot receive or display notifications.

Always request and check notification permission before subscribing to messages.

Summary

Install Firebase SDK and initialize it with your app's configuration.

Use a service worker file to handle background notifications when the app is closed.

Inside your app, listen for foreground messages using Firebase Messaging's onMessage method to show custom alerts.

Deploy Firebase messaging services and test your app to confirm notifications appear correctly in foreground and background.

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