feat: push notifications

Signed-off-by: Omar Sánchez Pizarro <omar.sanchez@pistacero.net>

web/frontend/src/services/pushNotifications.js

@@ -0,0 +1,195 @@
+// Servicio para manejar notificaciones push
+class PushNotificationService {
+  constructor() {
+    this.registration = null;
+    this.subscription = null;
+  }
+
+  // Registrar Service Worker
+  async registerServiceWorker() {
+    if ('serviceWorker' in navigator) {
+      try {
+        const registration = await navigator.serviceWorker.register('/sw.js', {
+          scope: '/'
+        });
+        this.registration = registration;
+        console.log('Service Worker registrado:', registration.scope);
+        return registration;
+      } catch (error) {
+        console.error('Error registrando Service Worker:', error);
+        return null;
+      }
+    } else {
+      console.warn('Service Workers no están soportados en este navegador');
+      return null;
+    }
+  }
+
+  // Solicitar permisos de notificación
+  async requestPermission() {
+    if (!('Notification' in window)) {
+      console.warn('Este navegador no soporta notificaciones');
+      return 'denied';
+    }
+
+    if (Notification.permission === 'granted') {
+      return 'granted';
+    }
+
+    if (Notification.permission === 'denied') {
+      return 'denied';
+    }
+
+    try {
+      const permission = await Notification.requestPermission();
+      return permission;
+    } catch (error) {
+      console.error('Error solicitando permiso:', error);
+      return 'denied';
+    }
+  }
+
+  // Suscribirse a notificaciones push
+  async subscribe() {
+    if (!this.registration) {
+      await this.registerServiceWorker();
+    }
+
+    if (!this.registration) {
+      throw new Error('No se pudo registrar el Service Worker');
+    }
+
+    try {
+      // Verificar si ya existe una suscripción
+      this.subscription = await this.registration.pushManager.getSubscription();
+      
+      if (this.subscription) {
+        console.log('Ya existe una suscripción push');
+        return this.subscription;
+      }
+
+      // Obtener la clave pública del servidor
+      const response = await fetch('/api/push/public-key');
+      const { publicKey } = await response.json();
+
+      // Convertir la clave pública a formato ArrayBuffer
+      const applicationServerKey = this.urlBase64ToUint8Array(publicKey);
+
+      // Crear nueva suscripción
+      this.subscription = await this.registration.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: applicationServerKey
+      });
+
+      console.log('Suscripción push creada:', this.subscription);
+
+      // Enviar la suscripción al servidor
+      await this.sendSubscriptionToServer(this.subscription);
+
+      return this.subscription;
+    } catch (error) {
+      console.error('Error suscribiéndose a push:', error);
+      throw error;
+    }
+  }
+
+  // Enviar suscripción al servidor
+  async sendSubscriptionToServer(subscription) {
+    try {
+      const response = await fetch('/api/push/subscribe', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(subscription),
+      });
+
+      if (!response.ok) {
+        throw new Error('Error enviando suscripción al servidor');
+      }
+
+      console.log('Suscripción enviada al servidor');
+      return await response.json();
+    } catch (error) {
+      console.error('Error enviando suscripción:', error);
+      throw error;
+    }
+  }
+
+  // Cancelar suscripción
+  async unsubscribe() {
+    if (this.subscription) {
+      try {
+        await this.subscription.unsubscribe();
+        await fetch('/api/push/unsubscribe', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(this.subscription),
+        });
+        this.subscription = null;
+        console.log('Suscripción cancelada');
+        return true;
+      } catch (error) {
+        console.error('Error cancelando suscripción:', error);
+        return false;
+      }
+    }
+    return false;
+  }
+
+  // Verificar estado de suscripción
+  async checkSubscription() {
+    if (!this.registration) {
+      await this.registerServiceWorker();
+    }
+
+    if (!this.registration) {
+      return false;
+    }
+
+    try {
+      this.subscription = await this.registration.pushManager.getSubscription();
+      return !!this.subscription;
+    } catch (error) {
+      console.error('Error verificando suscripción:', error);
+      return false;
+    }
+  }
+
+  // Convertir clave pública de base64 URL a Uint8Array
+  urlBase64ToUint8Array(base64String) {
+    const padding = '='.repeat((4 - base64String.length % 4) % 4);
+    const base64 = (base64String + padding)
+      .replace(/\-/g, '+')
+      .replace(/_/g, '/');
+
+    const rawData = window.atob(base64);
+    const outputArray = new Uint8Array(rawData.length);
+
+    for (let i = 0; i < rawData.length; ++i) {
+      outputArray[i] = rawData.charCodeAt(i);
+    }
+    return outputArray;
+  }
+
+  // Inicializar todo el proceso
+  async init() {
+    const permission = await this.requestPermission();
+    if (permission === 'granted') {
+      await this.registerServiceWorker();
+      try {
+        await this.subscribe();
+        return true;
+      } catch (error) {
+        console.error('Error inicializando notificaciones push:', error);
+        return false;
+      }
+    }
+    return false;
+  }
+}
+
+// Exportar instancia singleton
+export default new PushNotificationService();