type NotificationStatus = 'enabled' | 'disabled' | 'pending' | 'error'; /** * PushNotificationConfig contains all the information required to connect the web application * to a Firebase project and enable Firebase Cloud Messaging (FCM) for push notifications. * * All Firebase-related fields are obtained from the Firebase Console. * * How to get these values: * * 1. Go to https://console.firebase.google.com * 2. Select your Firebase project * 3. Click on the gear icon (⚙️) → "Project settings" * 4. Scroll to the "Your apps" section * 5. Register a new Web App () or select an existing one * 6. Firebase will show you a configuration object like: * * const firebaseConfig = { * apiKey: "AIza...", * authDomain: "my-project.firebaseapp.com", * projectId: "my-project", * storageBucket: "my-project.appspot.com", * messagingSenderId: "1234567890", * appId: "1:1234567890:web:abcdef..." * }; * * Map those values to PushNotificationConfig as follows: * * - apiKey -> firebaseConfig.apiKey * - authDomain -> firebaseConfig.authDomain * - projectId -> firebaseConfig.projectId * - storageBucket -> firebaseConfig.storageBucket * - messagingSenderId -> firebaseConfig.messagingSenderId * - appId -> firebaseConfig.appId * - measurementId -> (optional, only if present in Firebase config) * * The vapidKey is required for Web Push authentication and is obtained from: * * Project settings → Cloud Messaging → Web configuration → Web Push certificates → Public key * * Map it as: * * - vapidKey -> the "Public key" shown in the Web Push certificates section * * The apiUrl is the base URL of your backend that exposes the FCM endpoints: * * - POST {apiUrl}/fcm/register → registers the FCM token for the logged user * - DELETE {apiUrl}/fcm/{token} → removes a previously registered token * * Example configuration: * * const config: PushNotificationConfig = { * apiKey: "AIza...", * authDomain: "my-project.firebaseapp.com", * projectId: "my-project", * storageBucket: "my-project.appspot.com", * messagingSenderId: "1234567890", * appId: "1:1234567890:web:abcdef...", * vapidKey: "BD3pR...your-public-vapid-key...", * apiUrl: "https://api.myapp.com" * }; * * This configuration is then passed to the hook: * * usePushNotifications(config) * * Once provided, the hook will: * - Initialize Firebase * - Register the service worker for background notifications * - Obtain and manage the FCM token * - Register/remove the token on the backend * - Enable browser notifications even when the app is closed */ type PushNotificationConfig = { apiKey: string; authDomain: string; projectId: string; storageBucket: string; messagingSenderId: string; appId: string; measurementId?: string; vapidKey: string; apiUrl: string; }; /** * usePushNotifications * * React hook for managing push notifications using Firebase Cloud Messaging (FCM). * Allows enabling/disabling push notifications, tracking activation status, * listening to foreground messages, and handling errors. * * Main features: * - Requests user permission and registers the FCM token with the backend * - Disables and deregisters the token and service worker * - Exposes the current notification status ('enabled', 'disabled', 'pending', 'error') * - Allows listening to messages received while the app is in the foreground * * @param {PushNotificationConfig} config - Firebase and backend configuration (see dedicated type) * @returns { * status: NotificationStatus, // current status ('enabled', 'disabled', 'pending', 'error') * error: string | null, // error message if any * enable: () => Promise,// enables notifications (requests permission and registers token) * disable: () => Promise,// disables notifications (deregisters token and SW) * toggle: () => void, // enables/disables based on current status * listen: (onMsg) => () => void // listens for foreground messages, returns cleanup function * } * * @example * const { status, enable, disable, toggle, listen } = usePushNotifications(config); * * useEffect(() => { * const unsubscribe = listen(({ title, message, url }) => { * // Show custom notification or update UI * }); * return unsubscribe; * }, [listen]); * * // In a button: * // */ declare function usePushNotifications(config: PushNotificationConfig): { status: NotificationStatus; error: string | null; enable: () => Promise; disable: () => Promise; toggle: () => void; listen: (onMsg: (data: { title?: string; message?: string; url?: string; }) => void) => () => void; }; export type { NotificationStatus, PushNotificationConfig }; export { usePushNotifications }; //# sourceMappingURL=usePushNotifications.d.ts.map