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