Implementación de Notificaciones en Blog con Firebase

Integra notificaciones push en la web con seguridad y claridad. Aquí verás cómo activar Firebase Cloud Messaging (FCM) en un blog: agregar el script de messaging, configurar el manifest, registrar el service worker, pedir permisos, obtener el token y guardarlo en Firestore. Todo basado en la implementación mostrada, con pasos concretos y código práctico.

¿Cómo habilitar Firebase Cloud Messaging en la app web?

Para que tu aplicación web pueda recibir notificaciones, primero debes habilitar los servicios de messaging y preparar el entorno: script del SDK, archivo de service worker y manifest.json en la raíz del proyecto. Así el navegador y Firebase sabrán cómo gestionar mensajes en segundo plano.

• Agrega el script de messaging en el index.
• Crea el service worker con los imports necesarios.
• Define el archivo manifest.json y enlázalo en el head.
• Recuerda: el service worker permite ejecutar funciones en background, incluso sin la página abierta.

¿Qué script de messaging se agrega en el index?

Copia desde la documentación oficial el script de messaging y añádelo después de inicializar Firebase.

<!-- En index.html -->
<script src="URL_DE_FIREBASE_MESSAGING_JS"></script>

¿Qué incluye el archivo manifest.json para FCM?

El manifest expone metadatos de la app al navegador. Para messaging, añade el campo de remitente y no cambies su valor.

{
  "name": "Tu app",
  "gcm_sender_id": "NO_CAMBIAR_ESTE_NUMERO"
}

Enlázalo en el head del index:

<link rel="manifest" href="/manifest.json" />

¿Qué debe contener el service worker para notificaciones?

Crea notificaciones-sw.js en la raíz y carga los scripts globales que necesita el service worker para ejecutar funciones de messaging en background.

// notificaciones-sw.js
importScripts('URL_DE_FIREBASE_APP_JS');
importScripts('URL_DE_FIREBASE_MESSAGING_JS');

¿Cómo registrar el service worker y asociarlo a Messaging?

Debes registrar el service worker desde tu archivo JS principal y decirle a Firebase Messaging que lo use. Así, cuando lleguen notificaciones, se procesarán en background con el archivo indicado.

• Registra el service worker con navigator.serviceWorker.register.
• Indica a firebase.messaging() que use ese service worker con useServiceWorker.
• Maneja la promesa: imprime confirmación o error en consola.

¿Cómo se registra el service worker en el navegador?

// general.js
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/notificaciones-sw.js')
    .then(reg => {
      const messaging = firebase.messaging();
      messaging.useServiceWorker(reg);
      console.log('Service worker registrado.');
    })
    .catch(err => console.error('Error al registrar el service worker.', err));
}

Antes de solicitar permisos, registra las credenciales web de FCM (clave pública VAPID) para asociar los mensajes a tu proyecto.

const messaging = firebase.messaging();
messaging.usePublicVapidKey('TU_PUBLIC_VAPID_KEY');

¿Cómo solicitar permisos, obtener el token y guardarlo en Firestore?

Cuando el usuario entra a la app, solicita permiso para notificaciones. Si acepta, obtén el token del dispositivo y guárdalo en Firestore dentro de una colección de tokens. Esa arquitectura permite enviar notificaciones a todos los tokens registrados.

• Pide permiso con requestPermission y confirma en consola.
• Obtén el token con getToken.
• Guarda el token en la colección "tokens" con id igual al token.
• Configura Firestore con timestampsInSnapshots y maneja errores.

¿Cómo se piden permisos y se obtiene el token?

messaging.requestPermission()
  .then(() => {
    console.log('Permiso otorgado.');
    return messaging.getToken();
  })
  .then(token => {
    // Aquí ya tienes el token.
    // Guardar en Firestore (ver siguiente bloque).
  })
  .catch(err => {
    console.error('Error al solicitar permisos u obtener el token.', err);
  });

¿Cómo se guarda el token en Firestore?

const db = firebase.firestore();
db.settings({ timestampsInSnapshots: true });

function guardarToken(token) {
  return db
    .collection('tokens')
    .doc(token)
    .set({ token })
    .catch(err => {
      console.error('Error al insertar el token en la base de datos.', err);
    });
}

Habilidades y conceptos reforzados: configuración de service worker para background, definición de manifest y metadatos, uso de Firebase Cloud Messaging, manejo de promesas en JavaScript, registro de credenciales con usePublicVapidKey, solicitud de permisos del navegador, gestión de tokens y persistencia en Firestore con control de errores.

¿Tienes dudas sobre algún paso o te gustaría ver el manejo de notificaciones recibidas en background? Deja un comentario y cuéntame qué parte quieres profundizar.