onTokenRefresh: renovar tokens en Firebase

Asegura una entrega confiable de notificaciones web con Firebase Messaging, registrando cada token en Firestore y gestionando alertas en foreground y background. Aquí verás cómo reaccionar al refresco de token, cómo mostrar un mensaje cuando el usuario está en la aplicación y cómo configurar el service worker para notificaciones del sistema.

¿Cómo asegurar el token actualizado en Firestore?

Mantener el token vigente es clave: puede cambiar si el usuario cierra el navegador o se limpia la caché. Cuando el token se refresca, hay que obtener el nuevo valor y reenviarlo a Firestore para conservar la capacidad de envío.

¿Qué hace onTokenRefresh en Messaging?

• Detecta cuando el token se renueva.
• Recupera el nuevo token con la misma lógica usada antes.
• Permite volver a registrarlo en Firestore.

// Escucha el refresco del token
messaging.onTokenRefresh(() => {
  console.log('Token se ha renovado.');
  messaging.getToken().then((token) => {
    console.log('Token nuevo:', token);
    // Reenviar a Firestore.
    // registrarTokenEnFirestore(token);
  });
});

¿Cómo registrar el nuevo token en la base de datos?

• Envía el token a Firestore tras el then.
• Informa en consola que el token cambió para facilitar la depuración por parte de developers.

function registrarTokenEnFirestore(token) {
  // Ejemplo genérico: persiste el token en Firestore.
  // firebase.firestore().collection('tokens').doc(token).set({ token });
}

¿Cómo recibir notificaciones en foreground con Messaging?

Cuando el usuario está activo en la app, las alertas se manejan con onMessage. El payload trae la información enviada por el servidor. La idea es mostrar un mensaje tipo toast con el título del nuevo post y una duración mayor para que se lea con calma.

¿Cómo usar onMessage para mostrar un toast?

• Captura el payload y muéstralo en UI.
• Mensaje recomendado: “Ya tenemos un nuevo post, revísalo. Se llama [título]”.
• Duración sugerida: 6 segundos.

messaging.onMessage((payload) => {
  console.log('Mensaje en foreground:', payload);
  const titulo = payload?.notification?.title || payload?.data?.title || '';
  // Muestra *toast* por 6000 ms.
  mostrarToast(`Ya tenemos un nuevo post, revísalo. Se llama ${titulo}`, 6000);
});

function mostrarToast(mensaje, duracionMs) {
  // Implementación del toast propia de tu UI.
}

¿Cómo configurar notificaciones en background en el service worker?

En background, el proceso corre en un hilo distinto. Por eso el service worker debe inicializar Firebase y obtener su propia instancia de Messaging. Luego, con setBackgroundMessageHandler, se define el contenido de la notificación del sistema que aparece en la barra donde están la hora y la fecha (uso de Push API definida por la W3C).

¿Qué inicializar en Firebase dentro del service worker?

• Importa los scripts de Firebase App y Messaging.
• Inicializa con las variables necesarias: projectId y messagingSenderId tomadas del archivo de configuración del proyecto.

// sw.js
importScripts('https://www.gstatic.com/firebasejs/X.Y.Z/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/X.Y.Z/firebase-messaging.js');

firebase.initializeApp({
  projectId: 'TU_PROJECT_ID',
  messagingSenderId: 'TU_MESSAGING_SENDER_ID'
});

const messaging = firebase.messaging();

¿Cómo usar setBackgroundMessageHandler y showNotification?

• Define un título fijo: “Ya tenemos un nuevo post”.
• Usa options con body tomado del payload (por ejemplo, el título), icon del proyecto y click_action hacia la URL del sitio.
• Muestra la tarjeta con self.registration.showNotification.

messaging.setBackgroundMessageHandler((payload) => {
  const title = 'Ya tenemos un nuevo post';
  const options = {
    body: payload?.data?.title || '',
    icon: '/icon-new-post.png',
    click_action: 'https://tu-sitio.com'
  };

  return self.registration.showNotification(title, options);
});

¿Tienes dudas sobre el manejo del token, el toast en foreground o la notificación del sistema en background? Cuéntame qué parte quieres profundizar o qué flujo necesitas probar con tu servidor.