Web Push Notifications Firebase: Implementation Guide

Whether you want to boost user interaction, stay in touch with your customers, or improve retention, push notifications are a clever way to increase engagement. There’s no need to go to the expense of creating a native iOS or Android app: with the proper setup, you can start sending notifications to your customers through their browsers, also known as web push notifications.

Firebase, an app development platform from Google, is one of the most popular ways to set up web app push notifications. Push notification implementation with Firebase simplifies the process for both web and mobile applications. Learn why Firebase is a popular choice and how to simplify the notification process using Firebase.

In this article:

• Why Use Firebase for Web Push Notifications?
• How To Set up Web Push Notifications with Firebase
• Scaling Push Notifications Beyond Firebase’s Capabilities
• Frequently Asked Questions

Introduction to Web Push Notifications

Web push notifications are a key feature of modern web applications, allowing developers to engage with users in real-time. They enable developers to send notifications to users even when they are not actively using the application. Web push notifications are supported by most browsers, including Google Chrome, Mozilla Firefox, and Microsoft Edge. To implement web push notifications, developers need to use a service worker, which is a script that runs in the background and allows the application to receive push notifications. Firebase Cloud Messaging (FCM) is a popular platform for implementing web push notifications, providing a scalable and secure infrastructure for sending messages to users.

Why Use Firebase for Web Push Notifications?

Firebase is a suite of development tools to help developers build apps more efficiently. You can use Firebase to build native apps as well as web push notifications. Many developers love working with this suite because it integrates everything they need for databases, analytics, storage, and hosting without jumping between separate solutions.

Firebase Cloud Messaging (FCM) is a powerful built-in service for managing app notifications. While it requires some technical knowledge, FCM simplifies the notification process. It integrates seamlessly with other Firebase services, making it a cinch for developers to take more advanced actions, like targeting push notifications based on user behavior using the Firebase SDK.

How To Set up Web Push Notifications with Firebase

Setting up web push notifications with Firebase is much easier than creating them from scratch. Follow these steps to start sending notifications that boost subscriber engagement.

2.2 Initialize Firebase in Your Project

To initialize Firebase in your project, use the following code:

// Your web app's Firebase configuration
var firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.appspot.com",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

2.3 Set Up Firebase Cloud Messaging

To handle push notifications, you need to set up a service worker file named firebase messaging sw.js. This file will manage background processes and ensure proper notification handling.

First, create an empty file named firebase-messaging-sw.js at the project root. This is a foundational step in setting up a Progressive Web App (PWA).

Next, add the following code to your firebase-messaging-sw.js file:

importScripts('https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.14.6/firebase-messaging.js');

firebase.initializeApp({
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID"
});

const messaging = firebase.messaging();

1. Set up and Add Firebase to Your Web App

If you haven’t already, visit your Firebase Console to add a new project. After naming your project, add the Firebase code to initialize and configure your Firebase app. Firebase will give you an SDK snippet, which you’ll need to add to your website.

2. Set up Push Notifications in Your App

Take the SDK and add it to your website HTML file using the following code snippet. The HTML should look like this:

< script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js">< /script>
< script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging.js">< /script>
< script>
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.appspot.com",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
< /script>

Once that’s in place, add the FCM code to your website using JavaScript:

const messaging = firebase.messaging();

3. Set up the Service Worker

You can’t send web app notifications without a service worker. Service workers are crucial for managing push notifications and background tasks within web applications. To set one up, create a service worker file titled ‘firebase-messaging-sw.js.’ to handle incoming notifications. The JavaScript will look something like this:

importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging.js');
 
// Initialize Firebase in the service worker
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};
firebase.initializeApp(firebaseConfig);
 
const messaging = firebase.messaging();
 
// Handle background messages
messaging.onBackgroundMessage(function(payload) {
  console.log('Received background message ', payload);
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/firebase-logo.png'
  };
 
  self.registration.showNotification(notificationTitle, notificationOptions);
});

4. Request Permission

All push notifications must have the user's permission to send messages. You can set this up in your web app’s main JavaScript file:

messaging.requestPermission()
  .then(function() {
    console.log('Notification permission granted.');
    return messaging.getToken();
  })
  .then(function(token) {
    console.log('FCM Token:', token);
    // Save the token to your server or use it to send notifications
  })
  .catch(function(err) {
    console.error('Unable to get permission to notify.', err);
  });

5. Send Notifications From Firebase

Go to Firebase > Engage > Cloud Messaging. Click “Send your first message” and fill out the message details. You’re free to push out the message manually, but if you want to send them automatically, you can set this up using Firebase Cloud Messaging (FCM) REST API. The registration token, obtained after user permission, serves as a unique identifier for clients when sending notifications from the server:

POST https://fcm.googleapis.com/fcm/send
Content-Type: application/json
Authorization: key=YOUR_SERVER_KEY
 
{
  "notification": {
    "title": "Hello World",
    "body": "This is a notification"
  },
  "to": "FCM_DEVICE_TOKEN"
}

Finally, add this code to your JavaScript file to handle incoming foreground notifications:

messaging.onMessage(function(payload) {
  console.log('Message received. ', payload);
  // Customize notification UI here
});

Don’t forget to test your push notifications before you send them to your users to ensure they look and function as you intended across all devices. With webpushtest.com, you can demo standards-based web push notifications across all platforms, including iOS.

Handling Incoming Messages

Handling incoming messages is a crucial step in implementing web push notifications. When a message is received from the server, the service worker is responsible for handling the message and displaying a notification to the user. The service worker can use the Notification API to display a notification, which can include a title, message, and icon. The service worker can also use the Push API to receive push notifications and handle incoming messages. To handle incoming messages, developers need to add an event listener to the service worker, which will listen for incoming messages and handle them accordingly. The event listener can be used to display a notification, update the application’s UI, or perform other actions.

Customizing Push Notification Display

Customizing the display of push notifications is an important aspect of implementing web push notifications. Developers can use the Notification API to customize the display of notifications, including the title, message, and icon. The Notification API provides a range of options for customizing notifications, including the ability to add buttons, images, and other interactive elements. Developers can also use the Push API to customize the display of push notifications, including the ability to specify the notification’s title, message, and icon. Additionally, developers can use CSS to customize the display of notifications, including the ability to change the notification’s background color, text color, and other visual elements. By customizing the display of push notifications, developers can enhance the user experience and increase engagement with their application.

Scaling Push Notifications Beyond Firebase's Capabilities

Using a solution like Firebase Cloud Messaging is easier than building your own web app notification system from scratch. Implementing push notifications with FCM simplifies the entire process, allowing you to make a scalable notification solution with less hassle.

However, as popular as FCM is, it certainly isn’t the only way to send notifications. It is, hands down, the easiest way to send push notifications to your subscribers. Our real-time notification inbox unifies all subscriber alerts, from Slack to the web. Sign up for MagicBell to send notifications in as little as an hour.

Frequently Asked Questions

Do I need a server to send Firebase push notifications?

No. You can send web push notifications from the Firebase Console without your own server. However, you may need a server for more advanced features, like personalized triggers. You can set this up using the Firebase Cloud Messaging API.

How do I handle user token updates in Firebase Cloud Messaging (FCM)?

Firebase handles all user token updates for you. Even so, it’s a best practice to store any token updates on your server when Firebase generates a new one. This ensures your system sends notifications to the right device and helps maintain a log of token changes for better tracking and configuration management.

Is there a limit to the number of notifications I can send through Firebase Cloud Messaging?

No. You can send as many notifications as you’d like, although too many will overwhelm your users and lead to more unsubscribes. Firebase limits payloads to 4KB, though, so keep your messages lightweight to avoid errors or delays in handling the data.