FCM setup in Firebase - Commands & Configuration

Introduction

Firebase Cloud Messaging (FCM) helps you send notifications and messages to users' devices. It solves the problem of reaching users instantly with updates or alerts.

When you want to notify users about new messages in a chat app.

When you need to send alerts about app updates or promotions.

When you want to remind users about upcoming events or deadlines.

When you want to send silent data messages to update app content in the background.

When you want to engage users by sending personalized 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: "my-app.firebaseapp.com",
  projectId: "my-app",
  storageBucket: "my-app.appspot.com",
  messagingSenderId: "123456789012",
  appId: "1:123456789012:web:abcdef123456",
  measurementId: "G-ABCDEFGHJK"
});

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 for Firebase Cloud Messaging.

It imports Firebase scripts needed for messaging.

The firebase.initializeApp call sets up your Firebase project credentials.

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

Commands

Log in to your Firebase account to access your projects and use Firebase CLI commands.

Terminal

firebase login

Expected Output

✔  Success! Logged in as [e-mail]

Initialize Firebase Cloud Messaging in your project. This sets up necessary files and configurations.

Terminal

firebase init messaging

Expected Output

=== Project Setup

You're about to initialize Firebase Messaging in your project.

✔  Firebase Messaging setup complete.

Deploy your Firebase Cloud Messaging setup and any related cloud functions to Firebase servers.

Terminal

firebase deploy --only functions,messaging

Expected Output

=== Deploying to 'my-app'...

✔  functions: Finished running predeploy script.

✔  functions: All functions deployed successfully.

✔  messaging: Messaging configuration deployed.



✔  Deploy complete!

→

--only - Deploy only specified Firebase features to save time.

Send a test notification to a device using its FCM token to verify your setup works.

Terminal

firebase messaging:send --token eXampleToken1234567890 --notification-title "Hello" --notification-body "Welcome to our app!"

Expected Output

Message sent successfully to token eXampleToken1234567890

→

--token - Specify the device token to send the message to.

→

--notification-title - Set the title of the notification.

→

--notification-body - Set the body text of the notification.

Key Concept

If you remember nothing else from this pattern, remember: the service worker file handles background messages and must be correctly configured and deployed.

Common Mistakes

Not including the service worker file in the web app.

Without the service worker, background notifications won't show when the app is closed or in the background.

Always add and register the firebase-messaging-sw.js file in your web app root.

Using an incorrect or expired device token when sending test messages.

Messages will fail to deliver because the token is invalid or no longer active.

Always get the latest token from the client app before sending messages.

Not logging in to Firebase CLI before running commands.

Commands will fail due to lack of authentication.

Run 'firebase login' first to authenticate your CLI session.

Summary

Use 'firebase login' to authenticate your Firebase CLI session.

Initialize messaging with 'firebase init messaging' to set up necessary files.

Deploy your messaging setup using 'firebase deploy --only functions,messaging'.

Send test notifications with 'firebase messaging:send' using a valid device token.

The service worker file 'firebase-messaging-sw.js' handles background notifications.

Practice

1. What is the main purpose of Firebase Cloud Messaging (FCM)?

easy

A. To host web applications

B. To store user data securely in the cloud

C. To create user authentication systems

D. To send notifications and messages to users' devices

Solution

1. Step 1: Understand FCM's role

   FCM is designed to send notifications and messages to devices.

2. Step 2: Compare with other Firebase features

   Other options describe different Firebase services, not FCM.

3. Final Answer:

   To send notifications and messages to users' devices -> Option D

4. Quick Check:

   FCM = Messaging service [OK]

Hint: FCM = Firebase messaging to devices [OK]

Common Mistakes:

• Confusing FCM with data storage
• Thinking FCM handles authentication
• Assuming FCM hosts websites

2. Which Firebase method is used to request permission for notifications in a web app?

easy

A. Notification.requestPermission()

B. firebase.messaging().getToken()

C. firebase.initializeApp()

D. firebase.auth().signIn()

Solution

1. Step 1: Identify permission request method

   Web notifications require calling Notification.requestPermission() to ask user consent.

2. Step 2: Differentiate from other Firebase methods

   getToken() retrieves the token after permission; initializeApp() sets up Firebase; signIn() is for authentication.

3. Final Answer:

   Notification.requestPermission() -> Option A

4. Quick Check:

   Permission request = Notification.requestPermission() [OK]

Hint: Permission uses browser Notification API, not Firebase method [OK]

Common Mistakes:

• Using getToken() to request permission
• Confusing initializeApp() with permission request
• Thinking signIn() handles notifications

3. Given this code snippet, what will console.log(token) output if permission is granted and token is retrieved successfully?

const messaging = firebase.messaging();
Notification.requestPermission().then(() => {
  return messaging.getToken();
}).then(token => {
  console.log(token);
}).catch(err => {
  console.error('Error:', err);
});

medium

A. undefined

B. A string token representing the device registration

C. An error message

D. null

Solution

1. Step 1: Analyze permission and token retrieval

   If permission is granted, messaging.getToken() returns a string token.

2. Step 2: Understand console.log output

   console.log(token) prints the token string, not undefined or null.

3. Final Answer:

   A string token representing the device registration -> Option B

4. Quick Check:

   Successful getToken() = string token [OK]

Hint: getToken() returns string token on success [OK]

Common Mistakes:

• Expecting undefined or null instead of token
• Assuming error logs on success
• Confusing token with permission status

4. You wrote this code to get an FCM token but always get an error. What is the likely mistake?

const messaging = firebase.messaging();
const token = messaging.getToken();
console.log(token);

medium

A. Missing permission request before calling getToken()

B. firebase.messaging() is not initialized

C. getToken() returns a promise, not a direct value

D. console.log() cannot print tokens

Solution

1. Step 1: Verify permission requirement

   The code calls getToken() without first requesting notification permission using Notification.requestPermission().

2. Step 2: Consequence of missing permission

   Without granted permission, messaging.getToken() rejects the promise with an error, leading to an unhandled promise rejection error.

3. Final Answer:

   Missing permission request before calling getToken() -> Option A

4. Quick Check:

   Permission before getToken() [OK]

Hint: Request permission with Notification.requestPermission() before getToken() [OK]

Common Mistakes:

• Not using .then() or await with getToken()
• Forgetting to initialize Firebase
• Thinking console.log() cannot print tokens

5. You want to ensure your app always sends notifications to the correct device even if the FCM token changes. What is the best practice to handle token updates?

hard

A. Generate a new token manually every time the app starts

B. Store the token once and never update it

C. Listen for token refresh events and update your server with the new token

D. Ignore token changes because they rarely happen

Solution

1. Step 1: Understand token lifecycle

   FCM tokens can change, so apps must detect and handle updates.

2. Step 2: Use token refresh listener

   Listening for token refresh events lets the app send new tokens to the server to keep messaging accurate.

3. Final Answer:

   Listen for token refresh events and update your server with the new token -> Option C

4. Quick Check:

   Handle token refresh = update server [OK]

Hint: Always update server on token refresh events [OK]

Common Mistakes:

• Storing token once without updates
• Manually generating tokens incorrectly
• Ignoring token changes