Nowadays one of the stable part of web, NOTIFICATIONS have occupied its place that it is very common to ask permission for sending notification to your browser when you visited sites. Push API is most modern and valuable insertion in web browser to handle push notification. According to caniuse , API bear a great assistance among modern chrome browers and Firefox browser.
Pusher and Firebase are the another implementing notification services for web. In this article, we will see the implementation of Firebase Cloud Messaging ( FCM) service, which give you a reliable and free messaging solution.
Let us assume that the reader has some intimacy with writing back-end application in Express.js and/some intimacy with React. If you have good knowledge in either of these technologies, then you could work with either frontend or backend, one should implement the backend first, followed by frontend. Thus, you can use more applicable section.
So let’s get started.
Classification of Firebase Messages
The requirement of Firebase documentation is that there are two component necessary for an FCM implementation.
- An environment for implementation like Cloud Functions for Firebase or an app server on which to build, target and send message.
- Message recipient client app like an ios, Android, or web (Java Script) from the corresponding platform with specific transport service.
We will take care of item 1 and item 2 in our express back-end app and front-end app respectively.
There are two types of message that FCM usually used.
- Notification or display message that are usually handled by FCM SDK automatically used by optional data payload from client app.
- Data message handled by client app.
In this tutorial we will learn about sending and receiving message from client app which is very affordable.
Setting Up A Firebase Project
- The first thing is to set a Firebase Project, where FCM is a service and one should about some API keys. First create a Goggle account clicking here (ignore if you already have).
- Setting a Google account head on Firebase console.
In Firebase console the following steps should carried out.
1. Click on add project.
2. After entering a name click on continue.
3. From the Analytical menu of web page you can always turn it on.
4. Click continue and wait few minute for creating the project.
5. Click continue to open the project.
6. Getting necessary key to complete the project, a complete configuration step for the frontend and backend separately.
FRONTEND
1. On the project page, click on the icon to add Firebase to your web app.
2. Give your app a nick name
3. Click on Resister app and wait few second for completion.
4. On the next screen, you have to open app credential to store it somewhere and leave the window open to check it later.
5. To return to your console click on continue to console.
BACKEND
1. A service account is needed to connect with our Firebase project from backend.
2. In the project page click on the gear icon next to Project Overview to create a service account to use with Express backend.
3. In this picture step 1 to 4 is indicated.
4. A JSON file is downloaded.
5. Don’t download it until you ready to use.
6. Come back to this sections if a refresher is needed.
A successful set up of a Firebase project is done and it is added to the web page. A fronted and backend is important for credentials.
Let’s observe how sending push notification is done by express backend.
Getting Started
I have set a project on Github with both server and a client.
Steps of Getting started:
- Fork the repo and check out the 01-get-started branch.
- Open the project in your code editor of choice and observe the contents.
- In the project root, we have two folders, client/ and server/.There’s also a .editorconfig file, a .gitignore, and a README.md.
- The client folder contains a React app. This is where we will listen for notifications.
- The server folder contains an express app. This is where we’ll send notifications from. The app is from the project we built in my other article.
- Open a terminal and navigate to the client/ folder. Run the yarn install command to install the project dependencies. Then run yarn start to start the project. Visit http://localhost:3000 to see the live app.
- Create a .env file inside the server/ folder and add the CONNECTION_STRING environment variable. This variable is a database connection URL pointing to a PostgreSQL database. If you need help with this, check out the Connecting The PostgreSQL Database And Writing A Model section of my linked article. You should also provide the PORT environment variable since React already runs on port 3000. I set PORT=3001 in my .env file.
- Open a separate terminal and navigate to the server/ folder. Run the yarn install command to install the project dependencies. Run yarn runQuery to create the project database. Run yarn startdev to start the project. Visit http://localhost:3001/v1/messages and you should see some messages in a JSON format.
We will be happy to answer your questions on designing, developing, and deploying comprehensive enterprise web, mobile apps and customized software solutions that best fit your organization needs.
As a reputed Software Solutions Developer we have expertise in providing dedicated remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to get in touch with us!
