Como implementar notificações push no React usando Firebase
Aprenda como utilizar o recurso Firebase Cloud Messaging (FCM) para incorporar notificações push em um aplicativo React.
As notificações push permitem que os aplicativos enviem atualizações oportunas, alertas ou mensagens personalizadas diretamente para os 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 aplicações web, o navegador captura inicialmente essas notificações e posteriormente as encaminha para a aplicação correspondente.
Configurar um projeto Firebase
Siga as etapas abaixo para começar e configurar um projeto do Firebase:
- Acesse o 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.
Na página de visão geral do console, clique no botão Criar um projeto para criar um novo projeto. Em seguida, forneça o nome do projeto.
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 ícone Web, forneça o nome do aplicativo e clique no botão Registrar aplicativo.
- Copie o código de configuração do Firebase após registrar seu aplicativo React.
Configurar o serviço Firebase Cloud Messaging (FCM)
Depois de registrar seu aplicativo no Firebase, a próxima etapa é configurar o serviço Firebase Cloud Messaging (FCM).
Navegue até a página Configurações do projeto.
Em seguida, clique na guia Cloud Messaging na página Configurações do projeto. O Firebase Cloud Messaging usa pares de chaves de identidade do aplicativo para se conectar a serviços push externos. Por esse motivo, você precisa gerar sua chave de identidade exclusiva.
Nas configurações de Cloud Messaging, navegue até a seção Configuração da Web e clique no botão Gerar par de chaves para gerar sua chave exclusiva.
Configure o aplicativo React
Primeiro, crie um aplicativo React. Depois de instalado, instale os pacotes firebase e react-hot-toast 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.
Configure o Firebase e o serviço Cloud Messaging
Vá para a página Configurações do projeto no console do desenvolvedor e copie o objeto de configuração do Firebase fornecido. No diretório src , crie um novo arquivo firebase.js e adicione o código a seguir.
import { initializeApp } from "firebase/app";
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);
Substitua o objeto firebaseConfig acima por aquele que você copiou da página Configurações do projeto. Este código configurará a instância do Firebase e inicializará o objeto de mensagens em nuvem para ativar a funcionalidade FCM em seu aplicativo.
Gerenciar solicitações de permissão de usuário de notificações
Para permitir que os aplicativos React recebam notificações push do serviço Cloud Messaging do Firebase, você precisa gerenciar as permissões do usuário.
Isso envolve definir e chamar o método requestPermission fornecido pelo objeto de mensagens, que você configurou anteriormente. Ele garante que você lide adequadamente com as respostas do usuário às solicitações de permissão das notificações.
Adicione o código a seguir ao arquivo firebase.js após inicializar o objeto de mensagens.
export const requestPermission = () => {
console.log("Requesting User Permission......");
Notification.requestPermission().then((permission) => {
if (permission === "granted") {
console.log("Notification User Permission Granted.");
return getToken(messaging, { vapidKey: `Notification_key_pair` })
.then((currentToken) => {
if (currentToken) {
console.log('Client Token: ', currentToken);
} else {
console.log('Failed to generate the app registration token.');
}
})
.catch((err) => {
console.log('An error occurred when requesting to receive the token.', err);
});
} else {
console.log("User Permission Denied.");
}
});
}
requestPermission();
O código fornecido solicita permissão do usuário para notificações e trata da resposta de permissão. Se a permissão for concedida, ele obtém um token de registro para o aplicativo usando a função getToken.
O token de registro serve como identificador do 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 pelo par de chaves real gerado anteriormente na seção Configuração da Web.
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 quaisquer eventos de mensagens.
No arquivo firebase.js, adicione o código a seguir.
export const onMessageListener = () =>
new Promise((resolve) => {
onMessage(messaging, (payload) => {
resolve(payload);
});
});
Esta função configura um ouvinte de mensagens especificamente para notificações push. A função onMessage em onMessageListener é acionada sempre que o aplicativo recebe uma notificação push e está em foco.
Quando uma notificação é recebida, a carga útil da mensagem conterá dados relevantes associados à notificação, como o título e o corpo da mensagem.
Definir um Service Worker do Firebase Messaging
O FCM requer um service worker do Firebase Messaging para lidar com notificações push recebidas.
O service worker é um arquivo JavaScript executado em segundo plano e que lida com notificações push – ele permite que o aplicativo da web receba e exiba notificações, mesmo se o usuário tiver fechado o aplicativo ou alternado para uma guia ou janela diferente.
No diretório /public , crie um novo arquivo firebase-messaging-sw.js 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");
//the Firebase config object
const firebaseConfig = {
"configuration information"
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
messaging.onBackgroundMessage(function(payload) {
console.log('Received background message ', payload);
const notificationTitle = payload.notification.title;
const notificationOptions = {
body: payload.notification.body,
};
self.registration.showNotification(notificationTitle,
notificationOptions);
});
Este código configura um service worker para Firebase Cloud Messaging no aplicativo React, permitindo o tratamento e exibição de notificações.
Crie um componente de notificação
Crie um novo arquivo components/Notification.js no diretório /src e adicione o código a seguir.
import React, { useState, useEffect } from 'react';
import { Toaster, toast } from 'react-hot-toast';
import { requestPermission, onMessageListener } from '../firebase';
function Notification() {
const [notification, setNotification] = useState({ title: '', body: '' });
useEffect(() => {
requestPermission();
const unsubscribe = onMessageListener().then((payload) => {
setNotification({
title: payload?.notification?.title,
body: payload?.notification?.body,
});
toast.success(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
duration: 60000,
position: 'top-right', section of the browser page
});
});
return () => {
unsubscribe.catch((err) => console.log('failed: ', err));
};
}, []);
return (
<div>
<Toaster />
</div>
);
}
export default Notification;
Este código define um componente que lida com notificações push. Ele utiliza a biblioteca react-hot-toast para exibir notificações ao usuário.
O componente solicita permissão do usuário, escuta mensagens recebidas usando a função onMessageListener e, por padrão, exibe uma notificação do sistema 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 da documentação oficial do react-hot-toast e da propriedade CSS position.
Por fim, atualize o arquivo App.js para importar o componente Notificação.
import './App.css';
import Notification from './components/Notification';
function App() {
return (
<div className="App">
<header className="App-header">
<Notification />
</header>
</div>
);
}
export default App;
Teste o recurso de notificação push
Vá em frente e ative o servidor de desenvolvimento e abra http://locahlhost:3000 em seu navegador para acessar o aplicativo. Você deverá receber o seguinte pop-up para permitir que o aplicativo receba notificações.
Clique em Permitir. Otoken do cliente deve ser gerado e registrado noconsole do navegador. Você usará o token para enviar campanhas de notificação para seu aplicativo React.
Copie o token do cliente e vá para a página Visão geral do projeto do console do desenvolvedor do Firebase. Clique no cartão Cloud Messaging na seção Aumente e envolva seu público.
Clique em Criar sua primeira campanha, selecione Mensagens de notificação do Firebase e forneça um título e uma mensagem para sua notificação. Na seção Visualização do dispositivo, clique em Enviar mensagem de teste.
Cole e adicione o token do cliente na janela pop-up a seguir e clique em Testar para enviar a notificação push.
Se você estiver no aplicativo, receberá uma notificação push. Caso contrário, você receberá uma notificação em segundo plano.
Envio de notificações push usando o serviço Firebase Cloud Messaging
As notificações push são um recurso valioso para aprimorar a experiência do usuário em 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.
Ao aproveitar as APIs do Firebase Cloud Messaging, você pode entregar com eficiência atualizações oportunas e mensagens personalizadas para seus aplicativos React.