Aprenda a utilizar la función Firebase Cloud Messaging (FCM) para incorporar notificaciones automáticas dentro de una aplicación React.

Las notificaciones automáticas permiten que las aplicaciones envíen actualizaciones oportunas, alertas o mensajes personalizados directamente a los dispositivos de los usuarios, independientemente de su uso activo de la aplicación. Estas notificaciones aseguran la participación continua del usuario y la conectividad instantánea.

En el caso de las aplicaciones web, el navegador capta inicialmente estas notificaciones y posteriormente las reenvía a la aplicación correspondiente.

Configurar un proyecto de Firebase

Siga los pasos a continuación para comenzar y configurar un proyecto de Firebase:

  1. Dirigirse a Consola para desarrolladores de Firebase, inicie sesión con su dirección de correo electrónico de Google y haga clic en el Ir a Consola para navegar a la página de descripción general de la consola.
  2. En la página de descripción general de la consola, haga clic en el
    instagram viewer
    crear un proyecto botón para crear un nuevo proyecto. Luego proporcione el nombre del proyecto.
  3. Una vez que el proyecto se haya creado correctamente, vaya a la página de descripción general del proyecto. Debe registrar una aplicación en Firebase para generar claves API. Para registrar una aplicación, haga clic en el Web, proporcione el nombre de la aplicación y haga clic en el Registrar aplicación botón.
  4. Copie el código de configuración de Firebase después de registrar su aplicación React.

Configurar el servicio de mensajería en la nube de Firebase (FCM)

Una vez que haya registrado su aplicación en Firebase, el siguiente paso es configurar el servicio Firebase Cloud Messaging (FCM).

  1. Navegar a la Configuración del proyecto página.
  2. A continuación, haga clic en el Mensajería en la nube pestaña en el Configuración del proyecto página. Firebase Cloud Messaging usa pares de claves de Identidad de aplicación para conectarse con servicios push externos. Por este motivo, debe generar su clave de identidad única.
  3. Sobre el Mensajería en la nube configuración, vaya a la Configuración web sección y haga clic en el Generar par de claves botón para generar su clave única.

Configurar la aplicación React

Primero, crear una aplicación React. Una vez instalado, continúe e instale el base de fuego y tostada-caliente-reaccionar paquetes que utilizará para implementar notificaciones automáticas en la aplicación React.

npm instalar firebase reaccionar-hot-toast

Puedes encontrar el código fuente de este proyecto en este repositorio GitHub.

Configurar Firebase y el servicio de mensajería en la nube

Dirígete a tu Configuración del proyecto en la consola del desarrollador y copie el objeto de configuración de Firebase proporcionado. En el origen directorio, crea un nuevo base de fuego.js archivo y agregue el siguiente código.

importar {iniciarAplicación} de"base de fuego/aplicación";
importar { getMessaging, getToken, onMessage } de'firebase/mensajería';
constante firebaseConfig = {
 Clave API: "",
 dominio de autenticación: "",
 Projecto ID: "",
 cubo de almacenamiento: "",
 Id del remitente de mensajería: "",
 ID de aplicación: ""
};
constante aplicación = initializeApp (firebaseConfig);
constante mensajería = getMessaging (aplicación);

Reemplace lo anterior FirebaseConfig objeto con el que copiaste del Configuración del proyecto página. Este código configurará la instancia de Firebase e inicializará el objeto de mensajería en la nube para habilitar la funcionalidad de FCM en su aplicación.

Administrar las solicitudes de permisos de usuario de las notificaciones

Para permitir que las aplicaciones de React reciban notificaciones automáticas del servicio de mensajería en la nube de Firebase, debe manejar los permisos de usuario.

Esto implica definir y llamar a los Pedir permiso método proporcionado por el objeto de mensajería, que ha configurado previamente. Garantiza que maneje adecuadamente las respuestas del usuario a las solicitudes de permiso de las notificaciones.

Agregue el siguiente código a la base de fuego.js después de inicializar el objeto de mensajería.

exportarconstante solicitud de permiso = () => {
consola.registro("Solicitando permiso de usuario...");
 Notificación.solicitudPermiso().entonces((permiso) => {


si (permiso "otorgada") {


consola.registro("Permiso de usuario de notificación concedido".); 
devolver getToken (mensajería, { clave insípida: `Notification_key_pair` })
 .entonces((token actual) => {


si (token actual) {


consola.registro('Token de cliente:', token actual);
 } demás {

consola.registro('Error al generar el token de registro de la aplicación.');
 }
 })
 .atrapar((errar) => {


consola.registro('Ocurrió un error al solicitar recibir el token.', error);
 });
 } demás {


consola.registro("Permiso de usuario denegado".);
 }
 });


 }
Pedir permiso();

El código proporcionado solicita el permiso del usuario para las notificaciones y maneja la respuesta del permiso. Si se otorga el permiso, se procede a obtener un token de registro para la aplicación utilizando el obtenerToken función.

El token de registro sirve como identificador para el dispositivo o navegador que recibe las notificaciones. Luego puede utilizar este token para configurar una campaña de notificación en la página de configuración de Firebase Cloud Messaging.

Asegúrese de reemplazar el marcador de posición Par_clave_de_notificación con el par de claves real que generó anteriormente en el Configuración Web sección.

Definir oyentes de notificación

Para manejar cualquier tipo de notificación entrante, es necesario configurar escuchas de mensajes para rastrear las notificaciones entrantes y las funciones de devolución de llamada para activar cualquier evento de mensajería.

En tus base de fuego.js archivo, agregue el siguiente código.

exportarconstante onMessageListener = () =>
nuevoPromesa((resolver) => {
 onMessage (mensajería, (carga útil) => {
 resolver (carga útil);
 });
});

Esta función configura un oyente de mensajes específicamente para notificaciones automáticas. El enMensaje función dentro onMessageListener se activa cada vez que la aplicación recibe una notificación automática y está enfocada.

Cuando se recibe una notificación, la carga útil del mensaje contendrá datos relevantes asociados con la notificación, como el título y el cuerpo del mensaje.

Definir un trabajador del servicio de mensajería de Firebase

FCM requiere una mensajería de Firebase trabajador del servicio para manejar las notificaciones push entrantes.

El trabajador del servicio es un archivo JavaScript que se ejecuta en segundo plano y maneja las notificaciones automáticas; permite que la web aplicación para recibir y mostrar notificaciones, incluso si el usuario ha cerrado la aplicación o cambiado a una pestaña diferente o ventana.

En el /public directorio, crea un nuevo firebase-messaging-sw.js e incluya el siguiente código.

importScripts(" https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js");
importScripts(" https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js");
//el objeto de configuración de Firebase 
constante firebaseConfig = {
"información de configuración"
 };


firebase.initializeApp (firebaseConfig);
constante mensajería = firebase.messaging();


mensajería.onBackgroundMessage(función(carga útil) {
consola.registro('Mensaje de fondo recibido', carga útil);
constante notificaciónTitle = carga útil.notificación.título;
constante opciones de notificación = {
 cuerpo: carga útil.notificación.cuerpo,
 };
 self.registration.showNotification (notificationTitle,
 opciones de notificación);
});

Este código configura un trabajador de servicio para Firebase Cloud Messaging en la aplicación React, lo que permite el manejo y la visualización de notificaciones.

Crear un componente de notificación

Crear un nuevo componentes/Notificación.js archivo en el /src directorio y agregue el siguiente código.

importar Reaccionar, { estado de uso, efecto de uso } de'reaccionar';
importar { Tostadora, tostada } de'reaccionar-tostada-caliente';
importar {solicitud de permiso, onMessageListener} de'../base de fuego';
funciónNotificación() {
constante [notificación, setNotification] = useState({ título: '', cuerpo: '' });
 usarEfecto(() => {
 Pedir permiso();
constante darse de baja = onMessageListener().then((carga útil) => {
 setNotificación({
 título: carga útil?.notificación?.título,
 cuerpo: carga útil?.notificación?.cuerpo,
 });
 brindis.éxito(`${carga útil?.notificación?.título}: ${carga útil?.notificación?.cuerpo}`, {
 duración: 60000, 
 posición: 'parte superior derecha', sección de la página del navegador
 });
});
devolver() => {
 darse de baja.atrapar((errar) =>consola.registro('fallido: ', error));
 };
 }, []);
devolver (



 </div>
 );
}
exportarpor defecto Notificación;

Este código define un componente que maneja las notificaciones push. Utiliza el tostada-caliente-reaccionar biblioteca para mostrar notificaciones al usuario.

El componente solicita permiso de usuario, escucha los mensajes entrantes usando onMessageListener y, de forma predeterminada, muestra una notificación de brindis con el título y el cuerpo recibidos durante un minuto en la sección superior derecha de la página del navegador. Puede personalizar aún más la notificación con la ayuda del funcionario tostada-caliente-reaccionar documentación y la propiedad de posición CSS.

Por último, actualice la Aplicación.js archivo para importar el Notificación componente.

importar'./Aplicación.css';
importar Notificación de'./componentes/Notificación';
funciónaplicación() {
devolver (
"Aplicación">
"Encabezado de la aplicación"> 

 </header> 
 </div>
 );
}
exportarpor defecto aplicación;

Pruebe la función de notificación automática

Continúe, active el servidor de desarrollo y abra http://locahlhost: 3000 en su navegador para acceder a la aplicación. Debería obtener la siguiente ventana emergente para permitir que la aplicación reciba notificaciones.

Hacer clic Permitir. El token de cliente debe generarse y registrarse en el consola del navegador. Utilizará el token para enviar campañas de notificación a su aplicación React.

Copia el token de cliente y dirígete a la consola para desarrolladores de Firebase Descripción del proyecto página. Haga clic en el Mensajería en la nube tarjeta debajo de la Haga crecer y atraiga a su audiencia sección.

Hacer clic Crea tu primera campaña, seleccionar Mensajes de notificación de Firebasey proporcione un título y un mensaje para su notificación. Bajo la Vista previa del dispositivo sección, haga clic en Enviar mensaje de prueba.

Pegue y agregue el token del cliente en la ventana emergente que sigue y haga clic en Prueba para enviar la notificación push.

Si está en la aplicación, recibirá una notificación automática. De lo contrario, recibirá una notificación de fondo.

Envío de notificaciones automáticas mediante el servicio de mensajería en la nube de Firebase

Las notificaciones automáticas son una función valiosa para mejorar la experiencia del usuario tanto en aplicaciones web como móviles. Esta guía destacó los pasos para integrar las notificaciones automáticas con Firebase, incluido el manejo de los permisos de los usuarios y la configuración de escuchas de mensajes.

Al aprovechar las API de Firebase Cloud Messaging, puede entregar de manera efectiva actualizaciones oportunas y mensajes personalizados a sus aplicaciones React.