Entérate de todos los anuncios de Firebase Summit y descubre cómo Firebase puede ayudarte a acelerar el desarrollo de las apps y a ejecutarlas con confianza. Más información

Configurar una aplicación de cliente JavaScript Firebase Cloud Messaging

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

La API JavaScript de FCM le permite recibir mensajes de notificación en aplicaciones web que se ejecutan en navegadores compatibles con la API Push . 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 que se sirven a través de HTTPS. Esto se debe a su uso de trabajadores de servicio, que solo están disponibles en sitios HTTPS. Si necesita un proveedor, se recomienda Firebase Hosting y proporciona un nivel sin costo para el 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 ha hecho, instale el SDK de Firebase JS e inicialice Firebase .

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

Web version 9

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 version 8

import firebase from "firebase/app";
import "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
firebase.initializeApp(firebaseConfig);


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

Si actualmente usa FCM para la web y desea actualizar a SDK 6.7.0 o posterior, debe habilitar la API de registro de FCM para su proyecto en Google Cloud Console. Cuando habilite la API, asegúrese de haber iniciado sesión en Cloud Console con la misma cuenta de Google que usa para Firebase y asegúrese 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 los servicios web push admitidos. Para suscribir su aplicación a las 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 Cloud Messaging del panel Configuración de la consola Firebase 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 que pueda llegar a sus instancias de aplicaciones web existentes a través de las API de FCM. Para importar claves, debe tener acceso de nivel de propietario al proyecto de Firebase. Importe su clave pública y privada existente en forma codificada segura de URL base64:

  1. Abra la pestaña Cloud Messaging del panel Configuración de la consola Firebase y desplácese hasta la sección Configuración web .
  2. En la pestaña Certificados Web Push , busque y seleccione el texto del vínculo, "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 usar 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 Configure Web Credentials with FCM , agréguela a 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"});

Acceder 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 otorga 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 firebase-messaging-sw.js . A menos que ya tenga un 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 version 9

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);
  // ...
});

Web version 8

// 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);
  // ...
});

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

Próximos pasos

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