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
- Go to Firebase Console
- Click "Create a new project"
- Enter project name:
livehealth-notifications - Enable Google Analytics (optional)
- Click "Create project"
Get Firebase Configuration
- Go to Project Settings
- Navigate to "Service Accounts" tab
- Copy the service account key (JSON)
- Store securely in your backend
Web App Configuration
- In Firebase Console, click "Add app"
- Select "Web" platform
- Copy the configuration object
- 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
| Browser | Version | Support |
|---|---|---|
| Chrome | 75+ | ✅ Full |
| Firefox | 67+ | ✅ Full |
| Safari | 12.1+ | ✅ Full |
| Edge | 79+ | ✅ Full |
| Opera | 62+ | ✅ Full |
| IE | All | ❌ Not supported |
Service Worker Support
| Browser | Version | Support |
|---|---|---|
| Chrome | 40+ | ✅ Full |
| Firefox | 44+ | ✅ Full |
| Safari | 11.1+ | ✅ Full |
| Edge | 17+ | ✅ 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