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

Need a 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

Need a 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

Need a 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

Need a hint?

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