Why push notifications engage users in Firebase - See It in Action

Why push notifications engage users

📖 Scenario: You are building a simple mobile app that sends push notifications to users. These notifications help keep users interested and coming back to the app by giving them timely updates and reminders.

🎯 Goal: Create a Firebase Cloud Messaging setup that sends a push notification to a user device. This will show how push notifications engage users by delivering relevant messages directly to their phones.

📋 What You'll Learn

Create a Firebase Cloud Messaging configuration object

Set up a notification message with a title and body

Send the notification using Firebase messaging API

Add a final configuration to handle notification display on the client

💡 Why This Matters

🌍 Real World

Push notifications are used by apps to keep users informed and engaged by sending timely messages directly to their devices.

💼 Career

Understanding how to configure and send push notifications is important for roles in mobile app development, cloud engineering, and user engagement management.

1

Create Firebase messaging configuration

Create a variable called firebaseConfig with these exact keys and values: apiKey: 'AIzaSyExampleKey', authDomain: 'example-app.firebaseapp.com', projectId: 'example-app', storageBucket: 'example-app.appspot.com', messagingSenderId: '1234567890', appId: '1:1234567890:web:abcdef123456'.

Firebase

# Your code here

Hint

Use an object with the exact keys and values for Firebase setup.

2

Create notification message object

Create a variable called notificationMessage with keys title set to 'Welcome Back!' and body set to 'Check out new features in the app.'.

Firebase

const firebaseConfig = {
  apiKey: 'AIzaSyExampleKey',
  authDomain: 'example-app.firebaseapp.com',
  projectId: 'example-app',
  storageBucket: 'example-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

// Your code here

Hint

Use an object with title and body keys for the notification.

3

Send notification using Firebase messaging

Write a function called sendNotification that takes message as a parameter and calls firebase.messaging().send(message) to send the notification.

Firebase

const firebaseConfig = {
  apiKey: 'AIzaSyExampleKey',
  authDomain: 'example-app.firebaseapp.com',
  projectId: 'example-app',
  storageBucket: 'example-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

const notificationMessage = {
  title: 'Welcome Back!',
  body: 'Check out new features in the app.'
};

// Your code here

Hint

Define a function that calls Firebase messaging's send method with the message.

4

Add client notification display configuration

Add a configuration object called notificationOptions with click_action set to 'https://example-app.com' to handle notification clicks on the client side.

Firebase

const firebaseConfig = {
  apiKey: 'AIzaSyExampleKey',
  authDomain: 'example-app.firebaseapp.com',
  projectId: 'example-app',
  storageBucket: 'example-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

const notificationMessage = {
  title: 'Welcome Back!',
  body: 'Check out new features in the app.'
};

function sendNotification(message) {
  firebase.messaging().send(message);
}

// Your code here

Hint

Add an object with click_action to define what happens when users tap the notification.

Practice

1. Why do push notifications help keep users engaged with an app?

easy

A. They only work when the app is open

B. They slow down the app performance

C. They require users to open the app every time

D. They send timely alerts that remind users about the app

Solution

1. Step 1: Understand the purpose of push notifications

   Push notifications send messages to users even if they are not actively using the app.

2. Step 2: Identify how notifications keep users engaged

   By sending timely alerts, they remind users about updates or actions, encouraging app use.

3. Final Answer:

   They send timely alerts that remind users about the app -> Option D

4. Quick Check:

   Push notifications = timely alerts [OK]

Hint: Push notifications remind users even when app is closed [OK]

Common Mistakes:

• Thinking notifications only work when app is open
• Believing notifications slow down the app
• Assuming users must open app every time

2. Which Firebase service is used to send push notifications to users?

easy

A. Firebase Authentication

B. Firebase Cloud Messaging

C. Firebase Realtime Database

D. Firebase Hosting

Solution

1. Step 1: Identify Firebase services related to messaging

   Firebase Cloud Messaging (FCM) is designed for sending notifications and messages.

2. Step 2: Exclude unrelated services

   Authentication manages users, Realtime Database stores data, Hosting serves web content, none send notifications.

3. Final Answer:

   Firebase Cloud Messaging -> Option B

4. Quick Check:

   Push notifications = Firebase Cloud Messaging [OK]

Hint: FCM stands for Firebase Cloud Messaging [OK]

Common Mistakes:

• Confusing Authentication with messaging
• Choosing Realtime Database for notifications
• Selecting Hosting as notification service

3. What will happen if you send a push notification using Firebase Cloud Messaging when the app is closed?

medium

A. The notification will not be delivered

B. The app will open automatically

C. The notification will be delivered and shown to the user

D. The notification will be delayed until the app opens

Solution

1. Step 1: Understand FCM behavior when app is closed

   Firebase Cloud Messaging can deliver notifications even if the app is not running.

2. Step 2: Identify user experience

   The notification appears on the device, alerting the user without opening the app automatically.

3. Final Answer:

   The notification will be delivered and shown to the user -> Option C

4. Quick Check:

   FCM delivers notifications even if app closed [OK]

Hint: Notifications show even if app is closed [OK]

Common Mistakes:

• Thinking app must be open to receive notifications
• Assuming app opens automatically on notification
• Believing notifications get delayed

4. You wrote this Firebase Cloud Messaging code but users do not receive notifications. What is the likely error?

const message = {
  notification: {
    title: "Sale Alert",
    body: "50% off today!"
  },
  token: userToken
};

admin.messaging().send(message);

medium

A. Missing return or await before admin.messaging().send

B. Notification title is too long

C. Token variable name should be 'user_token'

D. Notification body cannot contain numbers

Solution

1. Step 1: Check asynchronous call usage

   admin.messaging().send returns a promise and should be awaited or returned to ensure delivery.

2. Step 2: Verify other options

   Title length is fine, token variable name is correct, and body can contain numbers.

3. Final Answer:

   Missing return or await before admin.messaging().send -> Option A

4. Quick Check:

   Async send needs await or return [OK]

Hint: Always await or return async Firebase calls [OK]

Common Mistakes:

• Ignoring async nature of send()
• Changing variable names unnecessarily
• Thinking notification text rules are strict

5. You want to increase user engagement by sending personalized push notifications using Firebase. Which approach best ensures users receive relevant alerts without spamming them?

hard

A. Use user preferences stored in Firebase to send targeted notifications at optimal times

B. Send the same notification to all users every hour

C. Send notifications only when users open the app

D. Send notifications with random messages daily

Solution

1. Step 1: Understand personalization and timing

   Using user preferences allows sending notifications that match interests and best times.

2. Step 2: Avoid spamming users

   Sending the same or random messages frequently annoys users and reduces engagement.

3. Final Answer:

   Use user preferences stored in Firebase to send targeted notifications at optimal times -> Option A

4. Quick Check:

   Personalized, timely notifications = better engagement [OK]

Hint: Target notifications using user data and timing [OK]

Common Mistakes:

• Sending identical notifications too often
• Ignoring user preferences
• Sending notifications only when app is open