valtech-components 4.0.228 → 4.0.230

package/src/lib/services/firebase/firebase-messaging-sw.js

@@ -1,145 +1,90 @@
 /**
- * Firebase Messaging Service Worker
+ * firebase-messaging-sw.js — Service Worker estatico de valtech-components.
  *
- * Service Worker estático para Firebase Cloud Messaging.
- * Carga la configuración dinámicamente desde /firebase-config.js.
+ * NO EDITAR en el consumer. Este archivo se publica con la libreria y se copia a
+ * la raiz del sitio via el glob de angular.json:
  *
- * CONFIGURACIÓN:
- * 1. Crea firebase.config.json con tu configuración de Firebase
- * 2. Ejecuta: npm run generate:firebase-config
- *    Esto genera /firebase-config.js con: self.FIREBASE_CONFIG = {...}
- * 3. Agrega este SW y firebase-config.js a los assets de angular.json
+ *   { "glob": "firebase-messaging-sw.js",
+ *     "input": "node_modules/valtech-components/src/lib/services/firebase",
+ *     "output": "/" }
  *
- * Ver README.md para documentación completa.
+ * Lee la config de Firebase desde /firebase-config.js (self.FIREBASE_CONFIG),
+ * generado en build-time por `npx valtech-firebase-config`. Maneja:
+ *   - mensajes en background (FCM) → muestra la notificacion del sistema.
+ *   - click en la notificacion → enfoca/abre la app y postMessage NOTIFICATION_CLICK
+ *     al cliente (lo consume MessagingService.onNotificationClick()).
  */
 
-// Importar Firebase scripts
-importScripts('https://www.gstatic.com/firebasejs/10.7.0/firebase-app-compat.js');
-importScripts('https://www.gstatic.com/firebasejs/10.7.0/firebase-messaging-compat.js');
+/* eslint-disable no-undef */
 
-// Importar configuración desde archivo externo (generado en build)
-// Este archivo define: self.FIREBASE_CONFIG = { ... }
+// SDK compat de Firebase (debe coincidir con la major del peer dep firebase ^10).
+importScripts(
+  'https://www.gstatic.com/firebasejs/10.14.1/firebase-app-compat.js'
+);
+importScripts(
+  'https://www.gstatic.com/firebasejs/10.14.1/firebase-messaging-compat.js'
+);
+
+// Config inyectada en build-time (self.FIREBASE_CONFIG).
 try {
   importScripts('/firebase-config.js');
-} catch (e) {
-  console.error('[SW] No se pudo cargar firebase-config.js:', e);
+} catch (err) {
+  // Sin config no se puede inicializar; los push no funcionaran pero el SW
+  // no debe romper el registro de la app.
+  console.error('[firebase-messaging-sw] no se pudo cargar /firebase-config.js', err);
 }
 
-// Verificar que la configuración existe
-if (!self.FIREBASE_CONFIG) {
-  console.error('[SW] FIREBASE_CONFIG no está definido.');
-  console.error('[SW] Ejecuta: npm run generate:firebase-config');
-} else {
-  // Inicializar Firebase
+if (self.FIREBASE_CONFIG) {
   firebase.initializeApp(self.FIREBASE_CONFIG);
-
-  // Obtener instancia de messaging
   const messaging = firebase.messaging();
 
-  /**
-   * Handler para mensajes en background.
-   */
+  // Mensaje recibido con la app en background o cerrada.
   messaging.onBackgroundMessage((payload) => {
-    console.log('[SW] Mensaje recibido en background:', payload);
-
-    // Web push usa mensajes data-only (sin bloque `notification`) para que el
-    // navegador NO auto-muestre una notificación duplicada — el SW es el único
-    // que la pinta. Title/body/icon llegan dentro de `data`. Se mantiene el
-    // fallback a `payload.notification` por compatibilidad con mensajes
-    // legacy o nativos que sí traen el bloque.
+    const notification = payload.notification || {};
     const data = payload.data || {};
-    const notificationTitle =
-      payload.notification?.title || data.title || 'Nueva notificación';
-    const notificationBody = payload.notification?.body || data.body || '';
-    const notificationIcon =
-      payload.notification?.icon || data.icon || '/assets/icon/favicon.ico';
-
-    const notificationOptions = {
-      body: notificationBody,
-      icon: notificationIcon,
-      image: payload.notification?.image,
-      badge: '/assets/icon/badge.png',
-      tag: payload.messageId || data.messageId || 'default',
-      data: {
-        ...data,
-        messageId: payload.messageId || data.messageId,
-        title: notificationTitle,
-        body: notificationBody,
-      },
-      vibrate: [200, 100, 200],
-      requireInteraction: data.require_interaction === 'true',
+    const title = notification.title || data.title || 'Notificacion';
+    const options = {
+      body: notification.body || data.body || '',
+      icon: notification.icon || data.icon || '/assets/icons/icon-192.png',
+      badge: '/assets/icons/icon-96.png',
+      data,
     };
-
-    return self.registration.showNotification(notificationTitle, notificationOptions);
+    self.registration.showNotification(title, options);
   });
+}
 
-  /**
-   * Handler para clicks en notificaciones.
-   */
-  self.addEventListener('notificationclick', (event) => {
-    console.log('[SW] Click en notificación:', event);
-    event.notification.close();
-
-    const data = event.notification.data || {};
-    let targetUrl = '/';
-
-    if (data.route) {
-      targetUrl = data.route;
-    } else if (data.url) {
-      targetUrl = data.url;
-    }
-
-    if (data.query_params) {
-      const separator = targetUrl.includes('?') ? '&' : '?';
-      targetUrl += separator + data.query_params;
-    }
-
-    const notificationPayload = {
-      type: 'NOTIFICATION_CLICK',
-      notification: {
-        title: data.title,
-        body: data.body,
-        data: data,
-        messageId: data.messageId,
-      },
-    };
-
-    event.waitUntil(
-      clients
-        .matchAll({ type: 'window', includeUncontrolled: true })
-        .then((clientList) => {
-          // Siempre enviar postMessage para que la app pueda reaccionar
-          for (const client of clientList) {
-            client.postMessage(notificationPayload);
-          }
-
-          // Navegar si hay route o url
-          if (targetUrl !== '/') {
-            for (const client of clientList) {
-              if ('navigate' in client) {
-                return client.navigate(targetUrl).then((c) => c?.focus());
-              }
-            }
-            // Si no hay cliente abierto, abrir nueva ventana
-            if (clients.openWindow) {
-              return clients.openWindow(targetUrl);
-            }
-          }
-
-          // Solo hacer focus si no hay navegación
-          for (const client of clientList) {
-            if ('focus' in client) {
-              return client.focus();
-            }
+// Click en la notificacion: enfocar un cliente existente (o abrir uno nuevo) y
+// avisarle para que navegue. El cliente resuelve la ruta desde data.route.
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close();
+
+  const data = event.notification.data || {};
+  const route = data.route || data.actionRoute || '/';
+
+  event.waitUntil(
+    self.clients
+      .matchAll({ type: 'window', includeUncontrolled: true })
+      .then((clientList) => {
+        const message = {
+          type: 'NOTIFICATION_CLICK',
+          notification: {
+            title: event.notification.title,
+            body: event.notification.body,
+            data,
+          },
+        };
+
+        for (const client of clientList) {
+          if ('focus' in client) {
+            client.postMessage(message);
+            return client.focus();
           }
-          if (clients.openWindow) {
-            return clients.openWindow('/');
-          }
-        })
-    );
-  });
-
-  self.addEventListener('notificationclose', (event) => {
-    console.log('[SW] Notificación cerrada:', event.notification.tag);
-  });
-}
+        }
+
+        if (self.clients.openWindow) {
+          return self.clients.openWindow(route);
+        }
+        return undefined;
+      })
+  );
+});