Web-Based Notifications with Firebase: A Comprehensive Guide

yash nerkar — Sat, 03 Feb 2024 06:55:56 +0000

In the era of web development, user engagement plays a crucial role. One effective way to enhance user experience in web-apps is through web-based notifications. Firebase, a mobile and web application development platform, provides a robust solution for implementing push notifications seamlessly.

Overview

Web-based notifications use the capabilities of service workers to deliver real-time updates to users, even when the application is not open. Firebase Cloud Messaging (FCM) is the go-to service for implementing push notifications.

Prerequisites

Before implementation, make sure you have the following prerequisites:

Firebase Account: Create a Firebase account if you don’t have one already. Set up a new project in the Firebase Console.
Node.js and npm: Ensure Node.js and npm are installed on your development machine.
React App: Set up a React application using Create React App or any other preferred method.

Server-Side (Node.js)

1. Install Firebase Admin SDK

To enable server-side communication with FCM, you need to install the Firebase Admin SDK. Run the following command in your server-side project:

npm install firebase-admin

2. Initialize Firebase Admin

In your server-side code (e.g., server.js), initialize Firebase Admin using your Firebase project credentials:

const admin = require('firebase-admin');

const serviceAccount = require('path/to/your/firebase-credentials.json');

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
});

3. Create a Function for Sending Notifications

Now, create a function that sends notifications to the FCM token:

export async function sendPushNotification(deviceToken: string, title: string, body: string, data: { url: string }) {
  return new Promise((resolve, reject) => {
    try {
      const message: admin.messaging.Message = {
        notification: {
          title: title,
          body: body,
        },
        token: deviceToken,
        data
      };

      admin.messaging().send(message)
        .then((response: any) => {
          console.log("response send to", response);
          return resolve('Push notification sent');
        })
        .catch((error: any) => {
          console.log("error from index push", error);
          return reject('Error sending push notification');
        });
    } catch (error) {
      console.error("error from index push catch", error);
      throw error;
    }
  })
};

Client-Side (React)

1. Set Up Firebase in React

Install the Firebase package in your React project

npm install firebase

Initialize Firebase in your firebase.js file or other appropriate file.

import { initializeApp } from "firebase/app";
import {
  FIREBASE_APP_ID,
  FIREBASE_MEASUREMENT_ID,
  FIREBASE_PROJECT_ID,
  FIREBASE_STORAGE_BUCKET,
  FIREBASE_MESSAGING_SENDER_ID,
  FIREBASE_AUTH_DOMAIN,
  FIREBASE_API_KEY,
} from "../config/environment";

// Your web app's Firebase configuration

export const firebaseConfig = {
  apiKey: FIREBASE_API_KEY,
  authDomain: FIREBASE_AUTH_DOMAIN,
  projectId: FIREBASE_PROJECT_ID,
  storageBucket: FIREBASE_STORAGE_BUCKET,
  messagingSenderId: FIREBASE_MESSAGING_SENDER_ID,
  appId: FIREBASE_APP_ID,
  measurementId: FIREBASE_MEASUREMENT_ID,
};

export const app = initializeApp(firebaseConfig);

// by exporting you can use your app anywhere in the react app..

2. Request Notification Permission

Request permission from the user to receive notifications:

const requestPermission = async () => {
    const permission = await Notification.requestPermission();
    if (permission === "granted") {
      console.log("Notification permission granted.");
    } else if (permission === "denied") {
      console.log("Permission denied.");
    }
  };

To Get Device Token :

import { getMessaging, getToken } from "firebase/messaging";
import { app } from "../../../src/utils/firebase/firebase";
import { VAPID_KEY } from "../../../src/utils/config/environment";

const [deviceToken, setDeviceToken] = React.useState("");

React.useEffect(() => {
    if (
      "Notification" in window &&
      "serviceWorker" in navigator &&
      "PushManager" in window
    ) {
      requestPermission();
      const messaging = getMessaging(app);
      const getFCMToken = async () => {
        try {
          const token = await getToken(messaging, {
            vapidKey: VAPID_KEY,
          });
          if (token) {
            console.log("token", token);
            setDeviceToken(token);
          } else {
            console.log("No FCM token received.");
          }
        } catch (error) {
          console.error("Error getting FCM token:", error);
        }
      };
      getFCMToken();
    } else {
      console.log("FCM not supported");
    }
  }, []);

getMessaging : The getMessaging sets up FCM and returns an object for managing notifications, subscriptions, incoming messages, and device tokens.
getToken : The getToken method is used to retrieve the Firebase Cloud Messaging (FCM) token assigned to the current user.
VAPID_KEY : To retrive vapid_key :
Go to your Firebase project settings in the Firebase Console.
Find and click on the "Cloud Messaging" tab.
Look for Web Push Certificates or Web Configuration.
If a key is present, copy it. Otherwise, generate a new pair using the "Update Pair" or similar action.
The generated device token send to the backend to store in a database.

3. Setup Firebase-messaging-service worker

//firebase-messaging-sw.js
import firebaseConfig from "./firebase";


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

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

messaging.onBackgroundMessage((payload) => {
  console.log(  
    "[firebase-messaging-sw.js] Received background message ",
    payload
  );
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/images/myna-logo.jpg',
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});

_Note: This file should be stored in the public folder of your react or next js application, because Service workers are registered using a relative path , adding in public folder, the registration path would be simply./firebase-messaging-sw.js.
_

4. To Register firebase messaging service worker

React.useEffect(() => {
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker
        .register("/firebase-messaging-sw.js")
        .then(function (registration) {
          console.log("Registration successful, scope is:", registration.scope);
        })
        .catch(function (err) {
          console.log("Service worker registration failed, error:", err);
        });
    }
  }, []);

After registering the service worker (to check the worker has registered or not, go to the service workers in the application inside the developer console). To test notifications, you can send them either from your server using the FCM token or directly from the Firebase console.

Navigate to the Firebase Console, click on the ‘Messaging’ tab on the left side, and then select ‘Create your first campaign’ to send a push notification, then you have to check on the Firebase Notification Message, so the below window will open up.

By clicking on send test message you have to add your FCM token in the pop up and then you can receive notifications in the background mode.

My GitHub Account got Banned!

yash nerkar — Tue, 27 Sep 2022 10:14:10 +0000

On September 15th, 2022, my GitHub account got banned. The reason was that I violated GitHub rules.

Behind The Scenes

Our college had a technical event called “Technitude.” As I am the technical head of CSI(computer society of India)DMCE, I have to organize some technical events. We developed a website and deployed it on Heroku. In the event’s morning, I got word that the deployed site is down due to an internal server error. I had to log in to my GitHub account on my college PC to push the local changes to GitHub again. Unfortunately, even the GitHub site was down. That day, we had to postpone our event. In the evening, my GitHub account got banned without prior notice or any mail. And it was a disaster for me. My repos, projects, contributions, and deployed sites, everything was gone in a flash.

Solutions I tried

-There is reinstatement support at GitHub where you can appeal if your account gets hidden or disabled by GitHub.
GitHub support. I emailed GitHub and explained the issue in detail. GitHub’s response process is a bit slow as it has plenty of users. It’s saying that you don’t have to spam emails to GitHub as it results only in further delay. But my placements were coming and the account was necessary at that time, So I had sent more than one message. In fact, I was sending an email per day. Don’t repeat this mistake. because even if it's a slow process, it’s totally trustworthy. GitHub truly cares for its customers.

I searched for GitHub’s official discord server but I didn’t find it, so I asked other open source communities, but most of them didn’t know that even GitHub accounts can be banned.
p.s. (Even I had no idea how my GitHub account got banned).
Someone suggested tweeting by tagging GitHub and communities. I tried that too.
but nothing helps.
[Tweet]!(https://twitter.com/yashnerkar81/status/1570611519729332226)
I also contacted the officials of GitHub on Twitter with zero expectations of getting a reply. And, I got a message from Juan Pa, who is the student program manager at GitHub Education, that he had reached out to the team for a review. And I was relieved by seeing his message.
As my interviews were coming, I had to create a new account and upload the projects and portfolio which I had backed up on the local.

GitHub released my account

After a week, GitHub finally responded to my first ever mail.
The mail :-

I was shocked because I didn’t make any such comment through my account on GitHub discussions. I believe someone commented from my account from the college PC. I don’t know if the person who did this was doing a prank or if he knew this would be a violation of GitHub policy. But the damage was done. God knows what happened. But I got my account back! The only suggestion I can give is that you have to keep your patience. You have to wait until GitHub does not respond back. The GitHub team will surely get back to you.
Thank you GitHub and the fellows who helped me through this difficult time!

DEV Community: yash nerkar