Aprenda a utilizar o recurso Firebase Cloud Messaging (FCM) para incorporar notificações push em um aplicativo React.

As notificações por push permitem que os aplicativos enviem atualizações, alertas ou mensagens personalizadas diretamente aos dispositivos dos usuários, independentemente do uso ativo do aplicativo. Essas notificações garantem o envolvimento contínuo do usuário e a conectividade instantânea.

No caso de aplicativos da web, o navegador captura essas notificações inicialmente e, posteriormente, as encaminha para o aplicativo correspondente.

Configurar um projeto do Firebase

Siga as etapas abaixo para começar e configurar um projeto do Firebase:

  1. Dirija-se a Firebase Developer Console, faça login usando seu endereço de e-mail do Google e clique no botão Ir para o console para navegar até a página de visão geral do console.
  2. Na página de visão geral do console, clique no botão Criar um projeto botão para criar um novo projeto. Em seguida, forneça o nome do projeto.
  3. Depois que o projeto for criado com sucesso, navegue até a página de visão geral do projeto. Você precisa registrar um aplicativo no Firebase para gerar chaves de API. Para registrar um aplicativo, clique no botão
    instagram viewer
    Rede ícone, forneça o nome do aplicativo e clique no ícone Registrar aplicativo botão.
  4. Copie o código de configuração do Firebase depois de registrar seu aplicativo React.

Configurar o serviço Firebase Cloud Messaging (FCM)

Depois de registrar seu aplicativo no Firebase, o próximo passo é configurar o serviço Firebase Cloud Messaging (FCM).

  1. Navegue até o Configurações do projeto página.
  2. A seguir, clique no Mensagens na nuvem guia no Configurações do projeto página. O Firebase Cloud Messaging usa pares de chaves de identidade de aplicativo para se conectar com serviços push externos. Por esse motivo, você precisa gerar sua chave de identidade exclusiva.
  3. No Mensagens na nuvem configurações, navegue até o configuração web seção e clique no botão Gerar par de chaves botão para gerar sua chave exclusiva.

Configurar o aplicativo React

Primeiro, criar um aplicativo React. Uma vez instalado, vá em frente e instale o base de fogo e reagir-quente-torrada pacotes que você usará para implementar notificações push no aplicativo React.

npm install firebase react-hot-toast

Você pode encontrar o código-fonte deste projeto neste Repositório GitHub.

Configurar o Firebase e o Cloud Messaging Service

Dirija-se ao seu Configurações do projeto page no console do desenvolvedor e copie o objeto de configuração Firebase fornecido. No origem diretório, crie um novo firebase.js arquivo e adicione o seguinte código.

importar {inicializarAplicativo} de"firebase/aplicativo";
importar { getMessaging, getToken, onMessage } de'firebase/mensagens';
const firebaseConfig = {
 Chave API: "",
 domínio de autenticação: "",
 ID do projeto: "",
 armazenamentoBalde: "",
 messageSenderId: "",
 appId: ""
};
const app = initializeApp (firebaseConfig);
const mensagens = getMessaging (aplicativo);

Substitua o acima firebaseConfig objeto com o que você copiou do Configurações do projeto página. Esse código configurará a instância do Firebase e inicializará o objeto de mensagens em nuvem para habilitar a funcionalidade FCM em seu aplicativo.

Gerenciar solicitações de permissão do usuário de notificações

Para permitir que os aplicativos React recebam notificações push do serviço Cloud Messaging do Firebase, você precisa lidar com as permissões do usuário.

Isso envolve definir e chamar o requestPermission método fornecido pelo objeto de mensagens, que você configurou anteriormente. Ele garante que você trate adequadamente as respostas do usuário às solicitações de permissão das notificações.

Adicione o seguinte código ao firebase.js após inicializar o objeto de mensagens.

exportarconst solicitaçãoPermissão = () => {
console.registro("Solicitando permissão de usuário...");
 Notification.requestPermission().then((permissão) => {


se (permissão "garantido") {


console.registro("Permissão de usuário de notificação concedida."); 
retornar getToken (mensagem, { vapidKey: `Notification_key_pair` })
 .então((currentToken) => {


se (token atual) {


console.registro('Token do cliente: ', currentToken);
 } outro {

console.registro('Falha ao gerar o token de registro do aplicativo.');
 }
 })
 .pegar((errar) => {


console.registro('Ocorreu um erro ao solicitar o recebimento do token.', erro);
 });
 } outro {


console.registro("Permissão do usuário negada.");
 }
 });


 }
solicitaçãoPermissão();

O código fornecido solicita permissão do usuário para notificações e manipula a resposta de permissão. Se a permissão for concedida, ele obtém um token de registro para o aplicativo usando o getToken função.

O token de registro serve como um identificador para o dispositivo ou navegador que recebe as notificações. Você pode então utilizar esse token para configurar uma campanha de notificação na página de configurações do Firebase Cloud Messaging.

Certifique-se de substituir o espaço reservado Notification_key_pair com o par de chaves real que você gerou anteriormente no Configuração Web seção.

Definir ouvintes de notificação

Para lidar com qualquer tipo de notificação recebida, é necessário configurar ouvintes de mensagens para rastrear notificações recebidas e funções de retorno de chamada para acionar qualquer evento de mensagem.

Na tua firebase.js arquivo, adicione o seguinte código.

exportarconst onMessageListener = () =>
novoPromessa((resolver) => {
 onMessage (mensagem, (payload) => {
 resolver (carga útil);
 });
});

Esta função configura um ouvinte de mensagem especificamente para notificações push. O na mensagem função dentro onMessageListener é acionado sempre que o aplicativo recebe uma notificação por push e está em foco.

Quando uma notificação é recebida, o payload da mensagem conterá dados relevantes associados à notificação, como o título e o corpo da mensagem.

Definir um Firebase Messaging Service Worker

O FCM requer um Firebase Messaging trabalhador de serviço para lidar com notificações push recebidas.

O service worker é um arquivo JavaScript executado em segundo plano e lida com notificações push - ele permite que a web aplicativo para receber e exibir notificações, mesmo que o usuário tenha fechado o aplicativo ou mudado para uma guia diferente ou janela.

No /public diretório, crie um novo firebase-messaging-sw.js arquivo e inclua o código a seguir.

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");
//o objeto de configuração do Firebase 
const firebaseConfig = {
"informações de configuração"
 };


firebase.initializeApp (firebaseConfig);
const mensagens = firebase.messaging();


mensagens.onBackgroundMessage(função(carga útil) {
console.registro('Mensagem de fundo recebida', carga);
const notificationTitle = payload.notification.title;
const opções de notificação = {
 corpo: payload.notification.body,
 };
 self.registration.showNotification (notificationTitle,
 opções de notificação);
});

Este código configura um service worker para Firebase Cloud Messaging no aplicativo React, permitindo o tratamento e exibição de notificações.

Criar um componente de notificação

Crie um novo componentes/Notification.js arquivo no /src diretório e adicione o seguinte código.

importar Reagir, { useState, useEffect } de'reagir';
importar { Torradeira, torrada } de'reagir-quente-brinde';
importar { requestPermission, onMessageListener } de'../base de fogo';
funçãoNotificação() {
const [notificação, setNotificação] = useState({ título: '', corpo: '' });
 useEffect(() => {
 solicitaçãoPermissão();
const cancelar assinatura = onMessageListener().then((carga útil) => {
 setNotification({
 título: carga?.notificação?.título,
 body: payload?.notification?.body,
 });
 brinde.sucesso(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
 duração: 60000, 
 posição: 'canto superior direito', seção de a página do navegador
 });
});
retornar() => {
 unsubscribe.catch((errar) =>console.registro('fracassado: ', erro));
 };
 }, []);
retornar (



 </div>
 );
}
exportarpadrão Notificação;

Este código define um componente que lida com notificações push. Ele utiliza o reagir-quente-torrada biblioteca para exibir notificações para o usuário.

O componente solicita permissão do usuário, escuta as mensagens recebidas usando onMessageListener função e, por padrão, exibe uma notificação toast com o título e o corpo recebidos por um minuto na seção superior direita da página do navegador. Você pode personalizar ainda mais a notificação com a ajuda do oficial reagir-quente-torrada documentação e a propriedade de posição CSS.

Por fim, atualize o App.js arquivo para importar o Notificação componente.

importar'./App.css';
importar Notificação de'./componentes/Notificação';
funçãoAplicativo() {
retornar (
"Aplicativo">
"Cabeçalho do aplicativo"> 

 </header> 
 </div>
 );
}
exportarpadrão Aplicativo;

Teste o recurso de notificação por push

Vá em frente e gire o servidor de desenvolvimento e abra http://locahlhost: 3000 no seu navegador para acessar o aplicativo. Você deve obter o seguinte pop-up para permitir que o aplicativo receba notificações.

Clique Permitir. O token do cliente deve ser gerado e registrado no console do navegador. Você usará o token para enviar campanhas de notificação para seu aplicativo React.

Copie o token do cliente e acesse o console do desenvolvedor do Firebase Visão Geral do Projeto página. Clique no Mensagens na nuvem cartão sob o Cresça e envolva seu público seção.

Clique Crie sua primeira campanha, selecione Mensagens de notificação do Firebasee forneça um título e uma mensagem para sua notificação. Debaixo de Visualização do dispositivo seção, clique Enviar mensagem de teste.

Cole e adicione o token do cliente na janela pop-up a seguir e clique em Teste para enviar a notificação push.

Se você estiver no aplicativo, receberá uma notificação por push. Caso contrário, você receberá uma notificação em segundo plano.

Envio de notificações push usando o Firebase Cloud Messaging Service

As notificações por push são um recurso valioso para aprimorar a experiência do usuário para aplicativos da Web e móveis. Este guia destacou as etapas para integrar notificações push usando o Firebase, incluindo o tratamento de permissões de usuário e a configuração de ouvintes de mensagens.

Aproveitando as APIs do Firebase Cloud Messaging, você pode fornecer atualizações oportunas e mensagens personalizadas de forma eficaz para seus aplicativos React.