How to Implement Push Notifications With Firebase in PWAs

How to Implement Push Notifications With Firebase in PWAs

Progressive Web Apps (PWAs) offer a native-like experience to users, and implementing push notifications is a key feature that enhances user engagement. Firebase, a platform developed by Google, simplifies the implementation of push notifications in PWAs. This article will walk you through the steps to implement push notifications in your PWA using Firebase.

Step 1: Set Up Firebase Project

The first step is to create a Firebase project. Go to the Firebase Console and click on "Add Project." Follow the prompts to create your project, making sure to enable Google Analytics if you want detailed tracking.

Step 2: Add Firebase to Your PWA

After your project is set up, you need to add Firebase to your PWA. Click on the "Web" icon to create a web app within your Firebase project. Firebase will provide you with a configuration script which includes keys and identifiers that you will need to integrate Firebase into your application.

Include the Firebase JavaScript SDK in your index.html file:

<script src="https://www.gstatic.com/firebasejs/9.x.x/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.x.x/firebase-messaging.js"></script>

Then, initialize Firebase in your service worker file:

import { initializeApp } from "firebase/app";
import { getMessaging, onMessage } from "firebase/messaging";
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",
};
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

Step 3: Request User Permissions

To send push notifications, you must first request permission from the user. This is how to do it:

Notification.requestPermission().then((permission) => {
  if (permission === "granted") {
    console.log("Notification permission granted.");
  } else {
    console.log("Unable to get permission to notify.");
  }
});

Step 4: Generate FCM Token

Once permissions are granted, you need to generate a Firebase Cloud Messaging (FCM) token that uniquely identifies the device:

messaging.getToken({ vapidKey: "YOUR_PUBLIC_VAPID_KEY" }).then((currentToken) => {
  if (currentToken) {
    console.log("FCM Token:", currentToken);
    // Send this token to your server
  } else {
    console.log("No registration token available. Request permission to generate one.");
  }
}).catch((err) => {
  console.log("An error occurred while retrieving token. ", err);
});

Step 5: Handle Messages

You need to handle incoming messages in both your service worker and main JavaScript file. For the service worker, listen for incoming messages like this:

onMessage(messaging, (payload) => {
  console.log("Message received. ", payload);
  // Display notification using payload data
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: payload.notification.icon,
  };
new Notification(notificationTitle, notificationOptions);
});

Step 6: Send Notifications

To send notifications, you can use the Firebase Console or send them programmatically from your backend server. For sending messages from your server, use Firebase Admin SDK or any HTTP client. Here’s an example using Node.js:

const admin = require("firebase-admin");
admin.initializeApp({
  credential: admin.credential.applicationDefault(),
});
const message = {
  notification: {
    title: "Hello World!",
    body: "This is a Firebase push notification.",
  },
  token: "USER_FCM_TOKEN",
};
admin.messaging().send(message)
  .then((response) => {
    console.log("Successfully sent message:", response);
  })
  .catch((error) => {
    console.log("Error sending message:", error);
  });

Step 7: Testing Push Notifications

To test push notifications, deploy your