Here’s How To Create Push Notifications For Your Next Web Application.

You might come across situations where you need to send users a reminder or a newsletter email. today we’ll be building a system running in the background of your Node js app to send users notifications.

We’ll be working with queues specifically BullMQ, a library that solves many problems in an elegant way. I already have an app installed in React and Node js connected to a MongoDB database, We’ll try to send the user a notification to let them know he has todos today. You can work around this to suit your needs however you want.

• Setting up Firebase Project

Create a new Firebase project and in our case, we’ll be selecting the web option to register our new web app.

In Your React App, install Firebase by running the below command in your terminal:

npm install firebase

Create a file call it firebase.js and paste your SDK setup and configuration code.

Note: hide your keys by storing them in .env file for app security. I’m not going to hide mine because I’m deleting the app after this article is published lol. :)

• Enabling Cloud Messaging

There are two steps we need to do before enabling Firebase Cloud Messaging:

• Cloud Messaging API server key
• Web Push certificates key

In your project settings, click on “Manage API in Google Cloud Console” this will redirect you to the Firebase Cloud messaging console click enable to enable using its API, and here is where we will be tracking user requests.

Click on enable.

Now that we have the first key which is the server key, we’ll use it to do a post request to the FCM API.

Scroll down on the same page, the next step is to click on “Generate key pair” this key is used as the second parameter of the getToken function as vapidKey.

Head over to firebase.js file and paste this code.

In your public directory create a file called firebase-messaging-sw.js and paste this code and change firebaseConfig variable.

Here, I’m storing the user token after the user login, you can change this however you like, but in my case, I’ll call getToken on login and register. notifyToken will have the token state.

Now when a user logs in, the browser should promote a box asking the user to allow notifications. click on allow.

Let’s test our cloud messaging by sending this user a test message.

Copy the user token from the console dev tools and navigate to the Firebase cloud console and tap on the Messaging option then click on “Create your first campaign”.

Check the first option, because we want users to receive alerts outside of our app.

Add the title and text body to your message and hit “Send test message”.

Add the user token as a new device and hit “Test”.

The received message should look like this.

Now that we setup out cloud messaging and stored a unique token for every user, we are going to create our scheduler, we’ll be using BullMQ.

In your node js application, you need to have Redis installed on your machine first in order to use BullMQ.

here’s a source for ubuntu users to install Redis.

https://www.digitalocean.com/community/tutorials/how-to-install-and-secure-redis-on-ubuntu-20-04

Install BullMQ with this command:

npm install bullmq

Create a module call it taskQueue.js and paste the above code. Here I have every todo in the database with the user who created it as userToken and a notification, isNotified, and state open are properties in the Todo model, we update these properties after the message send succeeds.

The Last step is we need to run the taskQueue.js head over to app.js and require the module.

app.get(require('./taskQueue'));

It’s my practice and note, If this was useful, please click the clap 👏 button down below a few times to show your support! Any mistakes feel free to point them out any and let me know, thanks!