0

Estoy usando FCM de firebase para notificaciones push, tengo un proyecto de next js con typescript, la implementación de código para recibir notificaciones desde mi api esta correcta pero no logro poner en pantalla la notificación dado que typescript me manda ese error (Property 'registration' does not exist on type 'Window & typeof globalThis') al usar self.registration.showNotification(title, { body, }), anexo el codigo.

// Función para solicitar permiso de notificación y obtener el token
async function requestPermission() {
  console.log("Requesting permission...");
  const permission = await Notification.requestPermission();

  if (permission === "granted") {
    console.log("Notification permission granted.");

    const app = initializeApp({
      //omito las credenciales, pero en el codigo original son correctas
    });

    const messaging = getMessaging(app);

    // Manejar los mensajes de notificación en primer plano
    onMessage(messaging, (payload) => {
      const title = payload.data?.title as string;
      const body = payload.data?.body as string;

      //aqui es donde se me muestra el error con registration
      self.registration.showNotification(title, { body, });

    });

    try {
      const currentToken = await getToken(messaging, {
        vapidKey: "credencial_omitida",
      });

      if (currentToken) {
        console.log('old token', currentToken);
        setTokenPush(currentToken);
      } else {
        console.log("Can not get token");
      }
    } catch (error) {
      console.log("Error getting token:", error);
    }
  } else {
    console.log("Do not have permission!");
  }
}

todo esta función es ejecutada en un useEffect en el archivo _app.tsx del proyecto, lo único que me falla es el registration dentro de onMessage. como arreglo este error de tipos o que solución debería tomar?. la variables self si es leída bien y es de tipo Window & typeof globalThis

1 respuesta 1

0

Tu componente está adosando registration al espacio global, y lo hace explícitamente al usar self para evitar problemas en contextos que declaren su propio this. Digo todo esto para recalcar que la implementación no tiene errores pero sí se toma algunos atajos como usar el espacio global de store.

Como sea, Window y globalThis son interfaces, y las interfaces se mergean implícitamente si las redeclaras en ambient modules. Para este ejemplo ese ambient module se llama global.d.ts y va en src/js/ o donde sea que tengas tus js.

En ese archivo pondrías

sexport declare global {
    
    interface Window {
        registration: ServiceWorkerRegistration

    }
    interface globalThis {
        registration: ServiceWorkerRegistration
    }
}

Ese archivo no necesitas llamarlo desde otros sino en tsconfig.js incluirlos . Asegúate de incluir la libretía ServiceWorker .

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.