valtech-components 2.0.687 → 2.0.689

package/src/lib/services/firebase/messaging.service.ts

@@ -0,0 +1,672 @@
+/**
+ * Messaging Service (FCM)
+ *
+ * Servicio para Firebase Cloud Messaging (Push Notifications).
+ * Permite solicitar permisos, obtener tokens, escuchar mensajes y manejar
+ * navegación (deep linking) cuando el usuario toca una notificación.
+ */
+
+import { Inject, Injectable, Injector, NgZone, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { Messaging, getToken, deleteToken, onMessage } from '@angular/fire/messaging';
+import { Observable, Subject, BehaviorSubject } from 'rxjs';
+
+import { VALTECH_FIREBASE_CONFIG } from './config';
+import {
+  NotificationAction,
+  NotificationClickEvent,
+  NotificationPayload,
+  NotificationPermission,
+  ValtechFirebaseConfig,
+} from './types';
+
+/**
+ * Estado interno del servicio de messaging
+ */
+interface MessagingState {
+  token: string | null;
+  permission: NotificationPermission;
+  isSupported: boolean;
+}
+
+/**
+ * Servicio para Firebase Cloud Messaging (FCM).
+ *
+ * Permite recibir notificaciones push en la aplicación web.
+ * Requiere VAPID key configurada en ValtechFirebaseConfig.
+ *
+ * @example
+ * ```typescript
+ * @Component({...})
+ * export class NotificationComponent {
+ *   private messaging = inject(MessagingService);
+ *
+ *   token = signal<string | null>(null);
+ *
+ *   async enableNotifications() {
+ *     // Solicitar permiso y obtener token
+ *     const token = await this.messaging.requestPermission();
+ *
+ *     if (token) {
+ *       this.token.set(token);
+ *       // Enviar token a tu backend para almacenarlo
+ *       await this.backend.registerDeviceToken(token);
+ *     }
+ *   }
+ *
+ *   // Escuchar mensajes en foreground
+ *   messages$ = this.messaging.onMessage();
+ * }
+ * ```
+ */
+@Injectable({ providedIn: 'root' })
+export class MessagingService {
+  private messageSubject = new Subject<NotificationPayload>();
+  private notificationClickSubject = new Subject<NotificationClickEvent>();
+  private stateSubject = new BehaviorSubject<MessagingState>({
+    token: null,
+    permission: 'default',
+    isSupported: false,
+  });
+
+  private unsubscribeOnMessage?: () => void;
+
+  /** Flag para persistir mensajes FCM en localStorage (debugging) */
+  private readonly debugPersistence: boolean;
+  /** Key para localStorage de mensajes FCM (debugging) */
+  private readonly DEBUG_STORAGE_KEY = 'fcm_debug_messages';
+
+  constructor(
+    private injector: Injector,
+    @Inject(VALTECH_FIREBASE_CONFIG) private config: ValtechFirebaseConfig,
+    @Inject(PLATFORM_ID) private platformId: Object,
+    private ngZone: NgZone
+  ) {
+    this.debugPersistence = this.config?.debugMessagePersistence ?? false;
+    this.initializeMessaging();
+  }
+
+  /**
+   * Obtiene la instancia de Messaging de forma perezosa.
+   * Esto evita el error de APP_INITIALIZER de AngularFire.
+   */
+  private getMessagingInstance(): Messaging | null {
+    try {
+      return this.injector.get(Messaging, null);
+    } catch {
+      return null;
+    }
+  }
+
+  // ===========================================================================
+  // INICIALIZACIÓN
+  // ===========================================================================
+
+  /**
+   * Inicializa el servicio de messaging
+   */
+  private async initializeMessaging(): Promise<void> {
+    if (!isPlatformBrowser(this.platformId)) {
+      return;
+    }
+
+    const supported = await this.checkSupport();
+    const permission = this.getPermissionState();
+
+    this.stateSubject.next({
+      ...this.stateSubject.value,
+      isSupported: supported,
+      permission,
+    });
+
+    // Si ya tiene permiso, configurar listeners
+    if (supported && permission === 'granted') {
+      this.setupMessageListener();
+    }
+
+    // Escuchar mensajes del Service Worker (clicks en notificaciones background)
+    this.setupServiceWorkerListener();
+  }
+
+  /**
+   * Configura listener para mensajes del Service Worker.
+   * Recibe eventos cuando el usuario hace click en una notificación background.
+   */
+  private setupServiceWorkerListener(): void {
+    if (!isPlatformBrowser(this.platformId) || !('serviceWorker' in navigator)) {
+      return;
+    }
+
+    navigator.serviceWorker.addEventListener('message', (event) => {
+      // Verificar que es un mensaje de notificación click
+      if (event.data?.type === 'NOTIFICATION_CLICK') {
+        this.ngZone.run(() => {
+          const notification = event.data.notification as NotificationPayload;
+          const action = this.extractActionFromData(notification.data);
+
+          this.notificationClickSubject.next({
+            notification,
+            action,
+            timestamp: new Date(),
+          });
+        });
+      }
+    });
+  }
+
+  /**
+   * Verifica si FCM está soportado en el navegador actual
+   */
+  private async checkSupport(): Promise<boolean> {
+    if (!isPlatformBrowser(this.platformId)) {
+      return false;
+    }
+
+    // Verificar APIs necesarias
+    if (!('Notification' in window)) {
+      return false;
+    }
+
+    if (!('serviceWorker' in navigator)) {
+      return false;
+    }
+
+    // Verificar que messaging esté disponible
+    if (!this.getMessagingInstance()) {
+      return false;
+    }
+
+    return true;
+  }
+
+  // ===========================================================================
+  // PERMISOS Y TOKEN
+  // ===========================================================================
+
+  /**
+   * Solicita permiso de notificaciones y obtiene el token FCM.
+   *
+   * @returns Token FCM si se otorgó permiso, null si se denegó
+   *
+   * @example
+   * ```typescript
+   * const token = await messaging.requestPermission();
+   * if (token) {
+   *   console.log('Token FCM:', token);
+   *   // Enviar a backend
+   * } else {
+   *   console.log('Permiso denegado o no soportado');
+   * }
+   * ```
+   */
+  async requestPermission(): Promise<string | null> {
+    if (!await this.isSupported()) {
+      console.warn('FCM no está soportado en este navegador');
+      return null;
+    }
+
+    try {
+      // Solicitar permiso de notificaciones
+      const permission = await Notification.requestPermission();
+
+      this.stateSubject.next({
+        ...this.stateSubject.value,
+        permission: permission as NotificationPermission,
+      });
+
+      if (permission !== 'granted') {
+        console.warn('Permiso de notificaciones denegado');
+        return null;
+      }
+
+      // Obtener token FCM
+      const token = await this.getToken();
+
+      if (token) {
+        // Configurar listener de mensajes
+        this.setupMessageListener();
+      }
+
+      return token;
+    } catch (error) {
+      console.error('Error solicitando permiso de notificaciones:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Obtiene el token FCM actual (sin solicitar permiso).
+   *
+   * @returns Token FCM si está disponible, null si no
+   *
+   * @example
+   * ```typescript
+   * const token = await messaging.getToken();
+   * ```
+   */
+  async getToken(): Promise<string | null> {
+    const messaging = this.getMessagingInstance();
+    if (!messaging) {
+      return null;
+    }
+
+    const vapidKey = this.config.messagingVapidKey;
+    if (!vapidKey) {
+      console.warn('VAPID key no configurada. FCM no funcionará.');
+      return null;
+    }
+
+    try {
+      // Registrar SW personalizado antes de obtener token
+      // Esto es necesario cuando usamos un SW custom (firebase-messaging-sw.js)
+      const registration = await navigator.serviceWorker.register('/firebase-messaging-sw.js');
+      // Esperar a que el SW esté activo
+      await navigator.serviceWorker.ready;
+
+      const token = await getToken(messaging, {
+        vapidKey,
+        serviceWorkerRegistration: registration,
+      });
+
+      this.stateSubject.next({
+        ...this.stateSubject.value,
+        token,
+      });
+
+      return token;
+    } catch (error) {
+      console.error('Error obteniendo token FCM:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Elimina el token FCM actual (unsubscribe de notificaciones).
+   *
+   * @example
+   * ```typescript
+   * await messaging.deleteToken();
+   * console.log('Token eliminado, no recibirá más notificaciones');
+   * ```
+   */
+  async deleteToken(): Promise<void> {
+    const messaging = this.getMessagingInstance();
+    if (!messaging) {
+      return;
+    }
+
+    try {
+      await deleteToken(messaging);
+
+      this.stateSubject.next({
+        ...this.stateSubject.value,
+        token: null,
+      });
+
+      // Limpiar listener de mensajes
+      if (this.unsubscribeOnMessage) {
+        this.unsubscribeOnMessage();
+        this.unsubscribeOnMessage = undefined;
+      }
+    } catch (error) {
+      console.error('Error eliminando token FCM:', error);
+      throw new Error('No se pudo eliminar el token de notificaciones');
+    }
+  }
+
+  // ===========================================================================
+  // MENSAJES
+  // ===========================================================================
+
+  /**
+   * Observable de mensajes recibidos en foreground.
+   *
+   * IMPORTANTE: Los mensajes en background son manejados por el Service Worker.
+   *
+   * @returns Observable que emite cuando llega un mensaje en foreground
+   *
+   * @example
+   * ```typescript
+   * messaging.onMessage().subscribe(payload => {
+   *   console.log('Mensaje recibido:', payload);
+   *   // Mostrar notificación custom o actualizar UI
+   * });
+   * ```
+   */
+  onMessage(): Observable<NotificationPayload> {
+    return this.messageSubject.asObservable();
+  }
+
+  /**
+   * Configura el listener de mensajes en foreground
+   */
+  private setupMessageListener(): void {
+    const messaging = this.getMessagingInstance();
+    if (!messaging || this.unsubscribeOnMessage) {
+      return;
+    }
+
+    this.unsubscribeOnMessage = onMessage(messaging, (payload) => {
+      const notification: NotificationPayload = {
+        title: payload.notification?.title,
+        body: payload.notification?.body,
+        image: payload.notification?.image,
+        data: payload.data as Record<string, string>,
+        messageId: payload.messageId,
+      };
+
+      this.messageSubject.next(notification);
+
+      // Persistir en localStorage para debugging si está habilitado
+      if (this.debugPersistence) {
+        this.persistMessageForDebug(notification);
+      }
+    });
+  }
+
+  /**
+   * Persiste un mensaje FCM en localStorage para debugging.
+   * Solo se usa cuando debugMessagePersistence está habilitado.
+   * Mantiene los últimos 50 mensajes.
+   */
+  private persistMessageForDebug(message: NotificationPayload): void {
+    try {
+      const stored = localStorage.getItem(this.DEBUG_STORAGE_KEY);
+      const messages = stored ? JSON.parse(stored) : [];
+      messages.unshift({ ...message, receivedAt: new Date().toISOString() });
+      // Mantener solo últimos 50
+      localStorage.setItem(this.DEBUG_STORAGE_KEY, JSON.stringify(messages.slice(0, 50)));
+    } catch (e) {
+      console.warn('[Messaging] Debug persistence failed:', e);
+    }
+  }
+
+  // ===========================================================================
+  // ESTADO Y UTILIDADES
+  // ===========================================================================
+
+  /**
+   * Obtiene el estado actual del permiso de notificaciones.
+   *
+   * @returns 'granted' | 'denied' | 'default'
+   *
+   * @example
+   * ```typescript
+   * const permission = messaging.getPermissionState();
+   * if (permission === 'granted') {
+   *   // Ya tiene permiso
+   * } else if (permission === 'default') {
+   *   // Puede solicitar permiso
+   * } else {
+   *   // Denegado, debe habilitar manualmente
+   * }
+   * ```
+   */
+  getPermissionState(): NotificationPermission {
+    if (!isPlatformBrowser(this.platformId)) {
+      return 'default';
+    }
+
+    if (!('Notification' in window)) {
+      return 'denied';
+    }
+
+    return Notification.permission as NotificationPermission;
+  }
+
+  /**
+   * Verifica si FCM está soportado en el navegador actual.
+   * Usa lógica inteligente para evitar falsos negativos por timing del Injector.
+   *
+   * @returns true si FCM está soportado
+   *
+   * @example
+   * ```typescript
+   * if (await messaging.isSupported()) {
+   *   // Puede usar notificaciones push
+   * } else {
+   *   // Navegador no soporta o no tiene Service Worker
+   * }
+   * ```
+   */
+  async isSupported(): Promise<boolean> {
+    // Si ya tenemos token en estado, claramente FCM funciona
+    if (this.stateSubject.value.token) {
+      return true;
+    }
+
+    // Si ya calculamos soporte exitosamente, usarlo
+    if (this.stateSubject.value.isSupported) {
+      return true;
+    }
+
+    // Verificaciones básicas que no dependen del Injector
+    if (!isPlatformBrowser(this.platformId)) {
+      return false;
+    }
+    if (!('Notification' in window) || !('serviceWorker' in navigator)) {
+      return false;
+    }
+
+    // Si el navegador soporta las APIs pero el Injector no está listo,
+    // podríamos tener un falso negativo. Intentar checkSupport de todas formas.
+    return this.checkSupport();
+  }
+
+  /**
+   * Obtiene el token actual sin hacer request.
+   *
+   * @returns Token almacenado o null
+   */
+  get currentToken(): string | null {
+    return this.stateSubject.value.token;
+  }
+
+  /**
+   * Observable del estado completo del servicio de messaging.
+   */
+  get state$(): Observable<MessagingState> {
+    return this.stateSubject.asObservable();
+  }
+
+  /**
+   * Verifica si el usuario ya otorgó permiso de notificaciones.
+   */
+  get hasPermission(): boolean {
+    return this.stateSubject.value.permission === 'granted';
+  }
+
+  /**
+   * Hidrata el estado del token desde un valor externo (ej: localStorage).
+   * Útil cuando el token ya existe pero el MessagingService no lo tiene en memoria.
+   *
+   * @param token Token FCM a setear
+   *
+   * @example
+   * ```typescript
+   * const storedToken = localStorage.getItem('fcm_token');
+   * if (storedToken) {
+   *   messaging.setTokenFromStorage(storedToken);
+   * }
+   * ```
+   */
+  setTokenFromStorage(token: string): void {
+    if (!token) return;
+
+    this.stateSubject.next({
+      ...this.stateSubject.value,
+      token,
+      isSupported: true, // Si hay token, claramente FCM funciona
+    });
+  }
+
+  // ===========================================================================
+  // DEEP LINKING / NAVEGACIÓN
+  // ===========================================================================
+
+  /**
+   * Observable de clicks en notificaciones.
+   *
+   * Emite cuando el usuario hace click en una notificación (foreground o background).
+   * Usa este observable para navegar a la página correspondiente.
+   *
+   * @returns Observable que emite NotificationClickEvent
+   *
+   * @example
+   * ```typescript
+   * @Component({...})
+   * export class AppComponent {
+   *   private messaging = inject(MessagingService);
+   *   private router = inject(Router);
+   *
+   *   constructor() {
+   *     this.messaging.onNotificationClick().subscribe(event => {
+   *       if (event.action.route) {
+   *         this.router.navigate([event.action.route], {
+   *           queryParams: event.action.queryParams
+   *         });
+   *       }
+   *     });
+   *   }
+   * }
+   * ```
+   */
+  onNotificationClick(): Observable<NotificationClickEvent> {
+    return this.notificationClickSubject.asObservable();
+  }
+
+  /**
+   * Extrae la acción de navegación de los datos de una notificación.
+   *
+   * Busca campos específicos en el payload de datos:
+   * - `route`: Ruta interna de la app (ej: '/orders/123')
+   * - `url`: URL externa (ej: 'https://example.com')
+   * - `action_type`: Tipo de acción personalizada
+   * - Campos con prefijo `action_`: Datos adicionales
+   *
+   * @param data - Datos del payload de la notificación
+   * @returns Acción de navegación extraída
+   *
+   * @example
+   * ```typescript
+   * // Payload desde el backend:
+   * // { route: '/orders/123', action_type: 'view_order', action_orderId: '123' }
+   *
+   * const action = messaging.extractActionFromData(notification.data);
+   * // { route: '/orders/123', actionType: 'view_order', actionData: { orderId: '123' } }
+   * ```
+   */
+  extractActionFromData(data?: Record<string, string>): NotificationAction {
+    if (!data) {
+      return {};
+    }
+
+    const action: NotificationAction = {};
+
+    // Ruta interna
+    if (data['route']) {
+      action.route = data['route'];
+    }
+
+    // URL externa
+    if (data['url']) {
+      action.url = data['url'];
+    }
+
+    // Tipo de acción
+    if (data['action_type']) {
+      action.actionType = data['action_type'];
+    }
+
+    // Query params (puede venir como JSON string)
+    if (data['query_params']) {
+      try {
+        action.queryParams = JSON.parse(data['query_params']);
+      } catch {
+        // Si no es JSON válido, intentar parsear como key=value
+        action.queryParams = this.parseQueryString(data['query_params']);
+      }
+    }
+
+    // Datos adicionales con prefijo action_
+    const actionData: Record<string, unknown> = {};
+    for (const [key, value] of Object.entries(data)) {
+      if (key.startsWith('action_') && key !== 'action_type') {
+        const cleanKey = key.replace('action_', '');
+        // Intentar parsear JSON si es posible
+        try {
+          actionData[cleanKey] = JSON.parse(value);
+        } catch {
+          actionData[cleanKey] = value;
+        }
+      }
+    }
+
+    if (Object.keys(actionData).length > 0) {
+      action.actionData = actionData;
+    }
+
+    return action;
+  }
+
+  /**
+   * Emite manualmente un evento de click en notificación.
+   *
+   * Útil para manejar clicks en notificaciones foreground donde
+   * la app decide mostrar un banner custom.
+   *
+   * @param notification - Payload de la notificación
+   *
+   * @example
+   * ```typescript
+   * messaging.onMessage().subscribe(notification => {
+   *   // Mostrar banner custom
+   *   this.showBanner(notification, () => {
+   *     // Usuario hizo click en el banner
+   *     messaging.handleNotificationClick(notification);
+   *   });
+   * });
+   * ```
+   */
+  handleNotificationClick(notification: NotificationPayload): void {
+    const action = this.extractActionFromData(notification.data);
+
+    this.notificationClickSubject.next({
+      notification,
+      action,
+      timestamp: new Date(),
+    });
+  }
+
+  /**
+   * Verifica si una notificación tiene acción de navegación.
+   *
+   * @param data - Datos del payload
+   * @returns true si tiene route o url
+   */
+  hasNavigationAction(data?: Record<string, string>): boolean {
+    if (!data) return false;
+    return !!(data['route'] || data['url']);
+  }
+
+  /**
+   * Parsea un query string en un objeto.
+   */
+  private parseQueryString(queryString: string): Record<string, string> {
+    const params: Record<string, string> = {};
+
+    if (!queryString) return params;
+
+    // Remover ? inicial si existe
+    const cleanQuery = queryString.startsWith('?') ? queryString.slice(1) : queryString;
+
+    for (const pair of cleanQuery.split('&')) {
+      const [key, value] = pair.split('=');
+      if (key) {
+        params[decodeURIComponent(key)] = decodeURIComponent(value || '');
+      }
+    }
+
+    return params;
+  }
+}