Firebase onMessage() Not Firing in the Background: A Comprehensive Guide to Managing Background Notifications

When building modern web applications, receiving push notifications is crucial for delivering real-time updates. Firebase Cloud Messaging (FCM) is widely used to send push notifications, but one challenge many developers face is ensuring that messages are received even when the app is in the background or not in focus.

By default, FCM’s onMessage() event handler works perfectly when the app is in the foreground. However, it doesn’t trigger when the app goes into the background or the tab becomes inactive. So, how can we handle background notifications and keep our web apps in sync across multiple tabs or windows?

In this post, we’ll walk through the solution, covering background message handling with service workers, using the BroadcastChannel API for cross-tab communication, and ensuring your app stays responsive even when it’s not in focus.

Why onMessage() Doesn't Fire in the Background

Firebase’s onMessage() event is specifically designed to work when the app is active and in the foreground. This event listens for push notifications when the app is open and focused on the user's screen. However, when the app goes into the background or another tab/window takes focus, browsers often limit JavaScript execution to save resources, which results in the onMessage() event not firing.

onMessage() Example (Foreground)

Here’s a typical setup for listening to messages while the app is in the foreground:

import { getMessaging, onMessage } from 'firebase/messaging';

const messaging = getMessaging();

// Listen for messages when the app is in the foreground
onMessage(messaging, (payload) => {
  console.log('Message received in the foreground:', payload);
  // logic
});

This works great when the app is focused, but the onMessage() event won’t trigger if the user switches tabs or minimizes the browser. So, how do we manage background notifications?

Solution: Using Service Workers for Background Notifications

When the app is in the background, Firebase Cloud Messaging relies on a Service Worker to intercept push notifications and handle them. This ensures that even when the app is not in the foreground, the messages are processed correctly.

Background Message Handling in Service Worker

In the Service Worker (firebase-messaging-sw.js), we use the onBackgroundMessage() handler to listen for messages even when the app is backgrounded. Here’s how to set it up:

import { getMessaging, onBackgroundMessage } from 'firebase/messaging';

const messaging = getMessaging();

// Handle background messages (when the app is not focused)
onBackgroundMessage(messaging, (payload) => {
  console.log('Message received in the background:', payload);
  
  // You can perform background tasks here, like showing notifications
});

The onBackgroundMessage() event will fire when the app is not in focus, allowing you to handle the notification as needed, such as showing a browser notification or performing background tasks like syncing data.

Cross-Tab Communication Using BroadcastChannel

If your app has multiple tabs open, you may want to keep all tabs in sync when a background message is received. This is where the BroadcastChannel API comes in handy. It allows different tabs or windows of the same origin to communicate with each other.

Broadcasting the Message from Service Worker to Other Tabs

Once the service worker receives a background message, it can send that message to all open tabs using a BroadcastChannel. Here’s an example:

onBackgroundMessage(messaging, (payload) => {
  console.log('Received background message:', payload);
  
  // Create a BroadcastChannel and send the message to all open tabs
  const channel = new BroadcastChannel('notification_broadcast_channel');
  channel.postMessage(payload.data); // Send data to other tabs
});

Receiving Messages in Other Tabs

In any open tab, you can set up an event listener on the BroadcastChannel to listen for messages and update the DOM accordingly:

const channel = new BroadcastChannel('notification_broadcast_channel');

channel.onmessage = (event) => {
  console.log('Broadcast message received:', event.data);
  // Update the DOM or trigger other actions based on the received message
};

This ensures that when a background message is received in one tab, it gets broadcasted to all open tabs, and each tab can act on the message, such as by updating the UI or triggering actions.

Conclusion

Handling push notifications in a web application can be challenging when the app is in the background. However, by using Firebase’s service worker for background messages, combined with the BroadcastChannel API to sync multiple tabs, you can ensure that your app remains responsive and stays in sync, even when it’s not in focus.

By setting up background message handling, broadcasting messages between tabs, and updating the DOM when the app regains focus, you can create a seamless and user-friendly experience for users, whether they’re actively using your app or not.

Conclusion

Handling push notifications in a web application can be challenging when the app is in the background. However, by using Firebase’s service worker for background messages, combined with the BroadcastChannel API to sync multiple tabs, you can ensure that your app remains responsive and stays in sync, even when it’s not in focus.

By setting up background message handling, broadcasting messages between tabs, and updating the DOM when the app regains focus, you can create a seamless and user-friendly experience for users, whether they’re actively using your app or not.

References

1. Firebase Cloud Messaging Documentation
   https://firebase.google.com/docs/cloud-messaging
2. Service Workers — MDN Web Docs
   https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
3. BroadcastChannel API — MDN Web Docs
   https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel
4. Focus and Blur Events — MDN Web Docs
   https://developer.mozilla.org/en-US/docs/Web/API/Window/focus_event
   https://developer.mozilla.org/en-US/docs/Web/API/Window/blur_event
5. Firebase Service Worker Setup
   https://firebase.google.com/docs/cloud-messaging/js/receive#setup

Happy coding!