Configurar una aplicación cliente JavaScript Firebase Cloud Messaging

La API de JavaScript de FCM le permite recibir mensajes de notificación en aplicaciones web que se ejecutan en navegadores que admiten Push API . Esto incluye las versiones de navegador enumeradas en esta matriz de soporte y las extensiones de Chrome a través de Push API.

El SDK de FCM solo se admite en páginas publicadas a través de HTTPS. Esto se debe al uso de trabajadores de servicios, que sólo están disponibles en sitios HTTPS. Si necesita un proveedor, se recomienda Firebase Hosting , que proporciona un nivel sin costo para alojamiento HTTPS en su propio dominio.

Para comenzar con la API de JavaScript de FCM, deberá agregar Firebase a su aplicación web y agregar lógica para acceder a los tokens de registro.

Agregar e inicializar el SDK de FCM

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

  2. Agregue el SDK JS de Firebase Cloud Messaging e inicialice Firebase Cloud Messaging:

API modular 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);

API con espacio de nombres 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 utiliza FCM para web y desea actualizar al SDK 6.7.0 o posterior, debe habilitar la API de registro de FCM para su proyecto en Google Cloud Console. Cuando habilites la API, asegúrate de haber iniciado sesión en Cloud Console con la misma cuenta de Google que usas para Firebase y asegúrate de seleccionar el proyecto correcto. Los nuevos proyectos que agregan el SDK de FCM tienen esta API habilitada de forma predeterminada.

Configurar credenciales web con FCM

La interfaz web de FCM utiliza credenciales web denominadas "Identificación voluntaria del servidor de aplicaciones" o claves "VAPID" para autorizar el envío de solicitudes a servicios web push compatibles. Para suscribir su aplicación para recibir notificaciones automáticas, debe asociar un par de claves con su proyecto de Firebase. Puede generar un nuevo par de claves o importar su par de claves existente a través de Firebase Console.

Generar un nuevo par de claves

  1. Abra la pestaña Mensajería en la nube del panel Configuración de Firebase console y desplácese hasta la sección Configuración web .
  2. En la pestaña Certificados Web Push , haga clic en Generar par de claves . La consola muestra un aviso de que se generó el par de claves y muestra la cadena de clave pública y la fecha en que se agregó.

Importar un par de claves existente

Si tiene un par de claves existente que ya está utilizando con su aplicación web, puede importarlo a FCM para poder acceder a las instancias de su aplicación web existente a través de las API de FCM. Para importar claves, debes tener acceso de nivel de propietario al proyecto de Firebase. Importe su clave pública y privada existente en formato codificado de forma segura en URL base64:

  1. Abra la pestaña Mensajería en la nube del panel Configuración de Firebase console y desplácese hasta la sección Configuración web .
  2. En la pestaña Certificados Web Push , busque y seleccione el texto del enlace "importar un par de claves existente".
  3. En el cuadro de diálogo Importar un par de claves , proporcione sus claves públicas y privadas en los campos correspondientes y haga clic en Importar . La consola muestra la cadena de clave pública y la fecha en que se agregó.

Para obtener instrucciones sobre cómo agregar la clave a su aplicación, consulte Configurar credenciales web en su aplicación . Para obtener más información sobre el formato de las claves y cómo generarlas, consulte Claves del servidor de aplicaciones .

Configure las credenciales web en su aplicación

El método getToken(): Promise<string> permite a FCM utilizar la credencial de clave VAPID al enviar solicitudes de mensajes a diferentes servicios push. Usando la clave que generó o importó de acuerdo con las instrucciones en Configurar credenciales web con FCM , agréguela en su código después de recuperar el objeto de mensajería:

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 necesite recuperar el token de registro actual para una instancia de aplicación, primero solicite permisos de notificación al usuario con Notification.requestPermission() . Cuando se llama como se muestra, devuelve un token si se concede el permiso o rechaza la promesa si se deniega:

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 tenga un archivo firebase-messaging-sw.js , cree un archivo vacío con ese nombre y colóquelo en la raíz de su dominio antes de recuperar un token. Puede agregar contenido significativo al archivo más adelante en el proceso de configuración del cliente.

Para recuperar el token actual:

Web modular API

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 namespaced API

// 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

Una vez que haya obtenido el token, envíelo a su servidor de aplicaciones y guárdelo utilizando su método preferido.

Próximos pasos

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