A Next.js application demonstrating Firebase Cloud Messaging (FCM) push notifications with browser-based configuration.

• ✅ Browser-based Firebase Configuration - Configure Firebase settings directly from the browser UI
• ✅ Firebase v10+ Support - Uses the latest Firebase modular SDK
• ✅ Next.js 14 - Upgraded to the latest Next.js version
• ✅ Push Notifications - Receive and display push notifications from Firebase Console
• ✅ Service Worker Support - Background notifications even when the app is closed
• ✅ Token Management - Easy FCM token copying for testing

First, install the dependencies:

npm install
# or
yarn install

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

1. Go to Firebase Console
2. Create a new project or select an existing one
3. Navigate to Project Settings → General tab
4. Scroll down to Your apps section
5. Click on the Web app icon (</>) to add a web app if you haven't already
6. Copy the Firebase configuration values:
   • API Key
   • Auth Domain
   • Project ID
   • Storage Bucket
   • Messaging Sender ID
   • App ID
   • Measurement ID (optional)

1. In Firebase Console, go to Project Settings → Cloud Messaging tab
2. Scroll down to Web Push certificates section
3. If no key exists, click Generate key pair
4. Copy the Key pair value (this is your VAPID key)

1. Navigate to the Settings page (/settings) in the app
2. Fill in all the Firebase configuration fields
3. Click Save Configuration
4. The app will reload and initialize Firebase with your configuration

1. After configuring Firebase, copy your FCM token from the home page
2. Go to Firebase Console → Cloud Messaging
3. Click Send test message
4. Paste your FCM token in the FCM registration token field
5. Enter a notification title and message
6. Click Test
7. You should receive the notification in your browser!

You can also send notifications programmatically using the Firebase Admin SDK from your backend.

├── components/
│   ├── FirebaseConfigForm.js    # Firebase configuration form component
│   └── PushNotificationLayout.js # Push notification handler wrapper
├── pages/
│   ├── index.js                 # Home page
│   ├── settings.js              # Firebase configuration page
│   ├── offers.js                 # Example page with notifications
│   └── _app.js                  # App wrapper
├── public/
│   └── firebase-messaging-sw.js # Service worker for background notifications
├── utils/
│   └── firebase.js              # Firebase initialization utilities
└── next.config.js               # Next.js configuration

• Next.js 14 - React framework
• Firebase 10.7+ - Firebase Cloud Messaging
• React Toastify - Toast notifications
• LocalForage - Local storage for configuration and tokens
• next-offline - Service worker support

This app requires a browser that supports:

• Service Workers
• Push Notifications API
• IndexedDB (for LocalForage)

Modern browsers (Chrome, Firefox, Edge, Safari 16+) are supported.

1. Make sure you've granted notification permissions in your browser
2. Verify your Firebase configuration is correct
3. Check that your VAPID key is correct
4. Ensure the service worker is registered (check browser DevTools → Application → Service Workers)
5. Check the browser console for any errors

1. Make sure you're accessing the app via HTTPS (or localhost for development)
2. Clear your browser cache and reload
3. Check browser DevTools → Application → Service Workers for errors

• Next.js Documentation
• Firebase Cloud Messaging Documentation
• Web Push Notifications Guide

MIT