Product EngineeringFeaturesNotification SystemFrontend

Prerequisites

Required dependencies, environment setup, and initial configuration for notification system

👤 Development Team📅 Updated: Mar 13, 2026📁 Services🏷️ notifications🏷️ frontend🏷️ setup🏷️ dependencies🏷️ firebase

Prerequisites

Required Dependencies

Firebase & Push Notifications

{
  "dependencies": {
    "firebase": "^9.0.0"
  }
}

2. Firebase Setup

Create Firebase Project

  1. Go to Firebase Console
  2. Click "Create a new project"
  3. Enter project name: livehealth-notifications
  4. Enable Google Analytics (optional)
  5. Click "Create project"

Get Firebase Configuration

  1. Go to Project Settings
  2. Navigate to "Service Accounts" tab
  3. Copy the service account key (JSON)
  4. Store securely in your backend

Web App Configuration

  1. In Firebase Console, click "Add app"
  2. Select "Web" platform
  3. Copy the configuration object
  4. Add to your environment variables

5. Initialize Firebase in App

Create src/utils/firebase.ts:

import { initializeApp } from "firebase/app";
import { getMessaging, onMessage } from "firebase/messaging";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);
export const messaging = getMessaging(app);

// Handle foreground messages
onMessage(messaging, (payload) => {
  console.log("Message received:", payload);
  // Dispatch Redux action or show notification
});

export default app;

Required Endpoints

Your backend API must provide these endpoints:

// GET - Fetch all notifications
GET /api-v3/notifications/all?from={date}&to={date}&page={number}&limit={number}

// POST - Mark notification as read
POST /api-v3/notifications/notification/{id}/read

// GET - Fetch notification types
GET /api-v3/notifications/notification-type/all

// POST - Save FCM token
POST /api-v3/users/fcm-token
Body: { token: string }

// POST - Subscribe to topics
POST /api-v3/notifications/subscribe
Body: { topics: string[] }

// POST - Unsubscribe from topics
POST /api-v3/notifications/unsubscribe
Body: { topics: string[] }

Browser Support

Push Notification Support

BrowserVersionSupport
Chrome75+✅ Full
Firefox67+✅ Full
Safari12.1+✅ Full
Edge79+✅ Full
Opera62+✅ Full
IEAll❌ Not supported

Service Worker Support

BrowserVersionSupport
Chrome40+✅ Full
Firefox44+✅ Full
Safari11.1+✅ Full
Edge17+✅ Full

Permission Requirements

Browser Permissions

Users must grant the following permissions:

  • Notification Permission - Required for push notifications
  • Microphone - Optional, only if audio notifications needed

Verification Checklist

  • ✅ Browser supports push notifications
  • ✅ Notification permission request works

Troubleshooting

Notification Permission Always Denied

Problem: Browser shows permission denied Solution: Clear browser cache, reset site settings, and reload


On this page