Configura una app cliente de Firebase Cloud Messaging en JavaScript

La API de JavaScript de FCM te permite recibir mensajes de notificación en las apps web que se ejecutan en navegadores que admiten la API de Push. Esto incluye las versiones de navegadores que aparecen en esta matriz de compatibilidad y las extensiones de Chrome a través de la API de Push.

El SDK de FCM solo es compatible con las páginas que se transmiten a través de HTTPS. Esto se debe a que usa service workers que solo están disponibles en sitios con este protocolo. Si necesitas un proveedor, te recomendamos Firebase Hosting, ya que proporciona un nivel sin costo para el hosting HTTPS en tu propio dominio.

Para comenzar con la API de JavaScript de FCM, debes agregar Firebase a tu app web y la lógica necesaria para acceder a los tokens de registro.

Agrega y, luego, inicializa el SDK de FCM

  1. Si aún no lo has hecho, instala el SDK de Firebase JS y, luego, inicializa Firebase.

  2. Agrega el SDK de Firebase Cloud Messaging JS y, luego, inicializa Firebase Cloud Messaging:

Web 

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = getMessaging(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = firebase.messaging();

Si actualmente usas FCM para la Web y quieres actualizar a la versión 6.7.0 del SDK o una versión posterior, debes habilitar la API de FCM Registration para tu proyecto en la consola de Google Cloud. Cuando la habilites, asegúrate de haber accedido a la consola de Cloud con la misma Cuenta de Google que usas para Firebase. Además, debes seleccionar el proyecto correcto. Los nuevos proyectos que agreguen el SDK de FCM tienen habilitada esta API de forma predeterminada.

Configura las credenciales web con FCM

La interfaz web de FCM usa credenciales web llamadas "Identificación voluntaria del servidor de aplicaciones" (o claves "VAPID") para autorizar solicitudes de envío a servicios push web compatibles. Para suscribir tu app a las notificaciones push, debes asociar un par de claves a tu proyecto de Firebase. Puedes generar un nuevo par de claves o importar uno existente a través de Firebase console.

Genera un par de claves nuevo

  1. Abre la pestaña Cloud Messaging del panel Configuración de Firebase console y desplázate hasta la sección Configuración web.
  2. En la pestaña Certificados push web, haz clic en Generar par de claves. En la consola, se muestra un aviso de que se generó el nuevo par de claves, así como la cadena de la clave pública y la fecha de creación.

Importa un par de claves existente

Si tienes un par de claves que ya estás utilizando con tu app web, puedes importarlo a FCM para llegar a las instancias existentes de tu app web a través de las APIs de FCM. Para importar claves, debes tener acceso como propietario al proyecto de Firebase. Importa tus claves públicas y privadas existentes en forma de una URL base64 con codificación segura:

  1. Abre la pestaña Cloud Messaging del panel Configuración de Firebase console y desplázate hasta la sección Configuración web.
  2. En la pestaña Certificados push web, encuentra y selecciona el texto del vínculo “importar un par de claves existente”.
  3. En el cuadro de diálogo Importar un par de claves, ingresa tus claves públicas y privadas en los campos correspondientes y haz clic en Importar. En la consola, se muestran la cadena de la clave pública y la fecha de creación.

Si quieres obtener instrucciones para agregar la clave a tu app, consulta Configura credenciales web en tu app. Para obtener más información sobre el formato de las claves y cómo generarlas, consulta Claves para servidor de aplicaciones.

Configura credenciales web en tu app

El método getToken(): Promise<string> le permite a FCM usar la credencial de la clave VAPID cuando envía solicitudes de mensajes a distintos servicios push. Después de que se recupere el objeto de mensajería, agrega a tu código la clave que generaste o importaste según las instrucciones que aparecen en Configura las credenciales web con FCM.

import { getMessaging, getToken } from "firebase/messaging";

const messaging = getMessaging();
// Add the public key generated from the console here.
getToken(messaging, {vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

Accede al token de registro

Cuando necesites recuperar el token de registro actual de una instancia de app, primero solicita los permisos de notificación del usuario con Notification.requestPermission(). Cuando se realiza la llamada como en el ejemplo, se muestra un token si se otorga el permiso o se rechaza la promesa si se niega: 

function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');

FCM requiere un archivo firebase-messaging-sw.js. A menos que ya tengas un archivo firebase-messaging-sw.js, crea un archivo vacío con ese nombre y guárdalo en la raíz de tu dominio antes de recuperar un token. Puedes agregar contenido significativo al archivo en etapas posteriores del proceso de configuración del cliente.

Para recuperar el token actual, sigue este ejemplo:

Web

import { getMessaging, getToken } from "firebase/messaging";

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
const messaging = getMessaging();
getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});
messaging_get_token.js

Web

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken({ vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});
index.js

Después de obtener el token, envíalo a tu servidor de apps y almacénalo con el método que prefieras.

Próximos pasos

Una vez que hayas completado los pasos de configuración, aquí se mencionan algunas opciones para seguir adelante con FCM para Web (JavaScript):