How to Add Push Notifications to Your Web Application Using Google Firebase

Displaying push notifications on a website or in a web application is a great way to interact with users. Push notifications tell users about important events, offer them customized content, and allow them to interact with an application in one click. However, since there’s a wide selection of push notification tools, it may be challenging to choose the right one.

The majority of push notification services are paid, offering free plans only for a limited number of subscribers and for limited functionality. This is why, in this article, we discuss the Google Firebase platform that allows you to configure push notifications for free without limits.

You can use this article as a step by step guide to adding web push notifications to your web application using Firebase.

What are push notifications and how do they work?

Push notifications pop up on a user’s screen after being pushed from a server. In contrast to traditional notifications, push notifications get displayed even when the target application is running in the background.

Push notifications allow you to establish communication between your application’s server and a website or your client in real time without needing to reload the web page. For instance, push notifications can help users receive customized content and opt in to timely updates by simply clicking on a pop-up window.

 

Example of a push notification

Modern web applications and websites should enable push technology, since it allows you to:

• Alert users about important events like upcoming sales or updates
• Remind users about abandoned carts in online shops or offer discount codes
• Quickly receive confirmation of users’ actions
• Display clickable icons and texts
• Enable users to interact with your site or app without going back to it

Let’s take a look at the push notification workflow.

When a web application is launched, a client’s user interface (UI) sends a request containing user data to the message server. The message server then saves all necessary user data in its database, generates a session ID token for the user, and sends this token to the client’s UI, which in turn sends the token to the application backend. The web application’s back end will use the token to send notifications to the user.

 

Push notification workflow

1. The UI sends a registration request to the message server.
2. The message server returns a response with a unique token (session ID).
3. The UI shares the token with the application’s back end.
4. The back end can raise a notification event anytime it wants using the token by calling the message server notification endpoint. The message server will then push new events to the client UI.

Tools for enabling push notifications in a web application

There are a lot of tools for configuring push notifications for web applications. The most popular are:

• Webpushr. This tool is free for up to 10,000 subscribers. For more than that, the price starts at $28 per month. Webpushr offers a WordPress plugin and supports all popular browsers such as Chrome, Firefox, Safari (macOS only), Microsoft Edge, and Opera.
• Pushnami. This platform offers web push notification functionality with pricing starting at $0.01 per subscriber. Pushnami supports all major browsers (Chrome, Firefox, Safari , Microsoft Edge, and Opera) and Android devices.
• OneSignal. This tool allows you to send messages through desktop and mobile browsers. It supports all major browsers including Chrome, Firefox, Safari, Microsoft Edge, and Opera. OneSignal offers a free plan with limited functionality and the opportunity to send notifications to up to 10,000 recipients per message. Paid plans start from $9 per month.
• Pushbots. This tool offers push notification functionality with a free plan available for up to 1,000 subscribers and no credit card or other commitment required. Commercial plans start from $29 per month for up to 5,000 subscribers. Pushbots also offers an SDK for WordPress and supports major browsers like Chrome, Firefox, and Safari.
• Google Firebase. This is a comprehensive platform for creating mobile and web applications that can also be used for sending push notifications. Firebase allows you to group up to 500 messages into a single batch and send them all in a single API call. The tool is free irrespective of the number of subscribers, but it only supports Firefox, Chrome, and Edge (version 17+). Unfortunately, it doesn’t support IE11 or Safari. You can check supported environments for the Firebase JavaScript SDK on the official website.

For this article, we use Firebase as our messaging server. Firebase offers lots of functionality, including a server, database, hosting, Firebase Cloud Messaging (FCM) server, and authentication. Let’s take a look at its pros and cons.

Now let’s explore how you can add push notifications to a web application with Firebase.

Adding push notifications to a web application

In this article, we show you how to enable push notifications in your web application using Firebase in four steps:

Step 1: Create a Firebase project

Start with building a new project in the Firebase platform. Here’s what you need to do:

1. Register with Firebase. You can use your Google account for this.

2. Go to the Firebase console page.

3. Click Create a project (or Add a project if you’ve worked with Firebase before).

4. Specify the project name, choose a location, and wait for your project to be created.

5. Wait for the application console to open.

6. Click the button to create a web project.

 

Button for creating a project

7. Type in your web application’s name and wait for the configuration file to be generated. It will look like this:

 

Firebase configuration file

8. Copy the configuration code. You’ll need it during the following steps.

Note: Your web application or website must support the HTTPS protocol. Otherwise, you won’t be able to launch push notifications.

Read also

How to Implement the Places API in Your Web Application

Discover how to implement location-based features, enhance user experience, and create new engagement opportunities in our guide! 

Learn more

Step 2: Create a service worker

A service worker is a script that runs separately from your website in the background. When working with push notifications, a service worker is responsible for configuring the background notification handler for situations when a browser is in background mode. In all cases, for push notifications to work, a web page should handle the onMessage callback.

Note: In the examples below, we use the index.html page.

Now that you have the Firebase configuration file, you can add a service worker and the Firebase SDK to the client’s UI:

1. Add the following to your web application’s HTML code and place it where you want to initialize the message:

<script src = "https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js" > </script> 
<script src = "https://www.gstatic.com/firebasejs/8.3.2/firebase-analytics.js" > </script>

This code is responsible for adding JS scripts. You can find it in the configuration file code generated in Step 1.

2. In your web application’s root, create a service worker and name it firebase-messaging-sw.js. You’ll need this service worker to receive and handle incoming messages.

3. The content structure of the service worker will look something like this:

'use strict';
 
importScripts("https://www.gstatic.com/firebasejs/8.2.4/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/8.2.4/firebase-messaging.js");
 
const FIREBASE_CONFIG = {
	apiKey: "",
	authDomain: "",
	projectId: "",
	storageBucket: "",
	messagingSenderId: "",
	appId: "",
	measurementId: ""
};
 
// Initialize the firebase in the service worker.
firebase.initializeApp(FIREBASE_CONFIG);
 
self.addEventListener('push', function (event) {
	var data = event.data.json();
 
	const title = data.Title;
	data.Data.actions = data.Actions;
	const options = {
		body: data.Message,
		data: data.Data
	};
	event.waitUntil(self.registration.showNotification(title, options));
});
 
self.addEventListener('notificationclick', function (event) {});
 
self.addEventListener('notificationclose', function (event) {});

4. Update the FIREBASE_CONFIG constant according to your configuration file.

5. Register the new firebase-messaging-sw.js service worker in your application.

Let’s explore the structure of the newly created service worker in detail:

• importScripts — Section for adding scripts to the web application
• firebase.initializeApp(FIREBASE_CONFIG) — Method for initializing Firebase with given parameters
• self.addEventListener('push', function (event) { ... }) — Event that occurs on the client side when a new notification is received. Usually, displaying the notification to the client occurs in the body of this method.
• event.waitUntil(self.registration.showNotification(title, options)) — Event that is in charge of displaying the notification window. The title parameter holds the notifiction’s title and the options parameter contains a set of parameters that can consist of body, data, and actions.
• self.addEventListener('notificationclick', function (event) { … }) — Event triggered when a user clicks on the notification
• self.addEventListener('notificationclose', function (event) { … }) — Event triggered when a user closes the notification

Read also

Building a Cross-Platform Mobile Web Application with Ionic and Angular

Leverage cross-platform frameworks to create responsive, feature-rich apps that reach a wider audience. 

Learn more

Step 3: Set messaging subscriptions

Now, let’s configure messaging subscriptions between the UI and the Firebase message server:

• The firebase.initializeApp(FIREBASE_CONFIG) line in the service worker is responsible for registering the client in the message server. The FIREBASE_CONFIG parameter is responsible for Firebase configuration parameters. Basically, this line is responsible for user registration in the message server.
• You’ll also need the firebase.messaging().GetToken() line to receive a token (session ID), which you’ll later send to the back end and save to the database to generate new notifications.

We can logically divide the firebase.messaging().GetToken() line into two operations:

1. firebase.messaging() — Calling the messaging() method for the firebase object retrieves a Messaging service that provides access to the FCM functionality.
2. getToken() — Calling this method for the Messaging service allows you to receive the token (session ID).

Step 4: Send notifications

At this step, all elements are ready. Let’s explore how exactly you can send a notification to the end user when you already know their token.

First, you need to get a service key. To do that, you need to perform the following steps:

1. Open the Firebase console.
2. Go to the project settings.
3. Open the Cloud Messaging section.
4. Copy the contents of the Server key field.

 

Copying a server key

Let’s use the Postman platform to practice sending push notifications. Here’s what you need to do:

1. Set the POST request type.

2. Enter the following URL: https://fcm.googleapis.com/fcm/send

3. Add two Headers:

• Authorization: serverKey, which is the key you copied earlier
• Content-Type: application/json

 

Adding headers

4. Add the Body option to your request, where User token is the token that Firebase retrieved during user registration in Step 3. The request will look something like this:

{
 "notification": {
   "title": "Notification title", 
   "body": "Notification body"
 },
 "to" : "User token (session id)"
}

5. Finally, you can send the request.

After that, the server will push notifications and they will be displayed on a user’s screen.

Note: During a client’s first attempt to receive a notification, the web browser will ask the user for permission to receive notifications. It looks like this:

 

Request for permission to receive notifications

If the user refuses to receive notifications, then upon the next attempt to send a push notification, the message won’t be shown. The only way for push notifications to be displayed in this case is if the user changes the corresponding permissions in the web page’s configuration.

As you can see, using Firebase Cloud Messaging as a messaging server for configuring push notifications is straightforward and easy. You can find more information on its functionality in the Firebase documentation.

Related project

Developing and Supporting a CRM System for a Medical Transportation Company

Discover how Apriorit helped streamline workflows, enhance customer interactions, and drive growth for our client with our tailored CRM development and support services.

Project details

Conclusion

Configuring and using push notifications is quite a simple process that doesn’t require too many resources. Meanwhile, it covers a significant number of client–server interactions.

Implementing push notifications in web applications using Firebase is fast and easy. Also, continuous use of push notifications with this tool doesn’t influence the cost for your web application or website maintenance, which is a great plus for your project’s budget.

At Apriorit, we have an experienced team of web application developers ready to help you with projects of any complexity.