Why push notifications engage users in Firebase - Why It Works

Introduction

Push notifications send timely messages to users even when they are not actively using an app. They help keep users informed and encourage them to return to the app by delivering relevant updates or offers.

When you want to remind users about new messages or updates in your app

When you want to alert users about special promotions or discounts

When you want to encourage users to complete an action they started but did not finish

When you want to keep users engaged with fresh content or features

When you want to send important alerts like security warnings or account activity

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: "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 a service worker script that runs in the background to handle push notifications when the app is not open.

The firebase.initializeApp function sets up Firebase with your project details.

The messaging.onBackgroundMessage listens for incoming push notifications and displays them using the browser's notification system.

Commands

Log in to your Firebase account to access your projects and deploy configurations.

Terminal

firebase login

Expected Output

✔  Success! Logged in as [e-mail]

Initialize Firebase Cloud Messaging in your project to set up necessary files and permissions.

Terminal

firebase init messaging

Expected Output

✔  Firebase Messaging setup complete.

✔  Created firebase-messaging-sw.js in your project directory.

Deploy your app and the service worker file to Firebase Hosting so push notifications can work in the browser.

Terminal

firebase deploy --only hosting

Expected Output

✔  Deploy complete!

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

→

--only hosting - Deploy only the hosting part without affecting other Firebase services

Send a test push notification to a specific device token to verify notifications are working.

Terminal

firebase messaging:send --token dXJzX3VzZXJfdG9rZW4= --title "Hello!" --body "You have a new message."

Expected Output

Message sent successfully to token dXJzX3VzZXJfdG9rZW4=

→

--token - Specify the device token to receive the notification

→

--title - Set the notification title

→

--body - Set the notification message body

Key Concept

If you remember nothing else, remember: push notifications keep users connected by delivering timely, relevant messages that bring them back to your app.

Common Mistakes

Not setting up the service worker file correctly

Without the service worker, the browser cannot receive or display push notifications when the app is closed.

Create and deploy the firebase-messaging-sw.js file with proper Firebase initialization and message handling.

Sending notifications without valid device tokens

Notifications will not reach any device if the token is missing or incorrect.

Always use the correct device token obtained from the client app to target notifications.

Deploying without including the service worker file

The service worker must be hosted so browsers can register it and receive background messages.

Include the service worker file in your hosting deployment.

Summary

Initialize Firebase Cloud Messaging with a service worker to handle background notifications.

Deploy the service worker and app to Firebase Hosting to enable push notifications in browsers.

Send test notifications using the Firebase CLI to verify users receive timely messages.

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