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.