O Firebase Cloud Messaging (FCM) é conhecido principalmente por simplificar o processo de envio de notificações para dispositivos clientes. Nesta postagem, vamos aprender como usar o Firebase Cloud Messaging como um serviço de notificação push e um serviço pub/sub em um aplicativo React.
O que é um sistema pub/subs?
Um sistema de publicar/assinar consiste em duas partes: o editor responsável por enviar uma mensagem ao sistema e um assinante, que ouve ativamente a notificação do sistema e pode decidir continuar a agir sobre a mensagem.
Um caso de uso para um sistema pub/sub é a comunicação sem estado de um servidor. Ao verificar os pagamentos com cartão, é quase impossível para um servidor informar ao cliente que verificou o pagamento e concedeu o serviço solicitado pelo usuário. Podemos fazer isso facilmente usando um sistema pub/subs.
Com um sistema pub/subs, o navegador ouve um determinado tópico enquanto o servidor envia uma mensagem para o tópico. Imediatamente, o navegador recebe a mensagem e pode continuar com o resto do processamento do lado do cliente.
Configurando um serviço pub/sub com FCM no React
Neste tutorial, aprenderemos o seguinte:
Como configurar o FCM no Firebase Console e criar um novo projeto Como configurar um aplicativo React para incluir os conceitos essenciais do Firebase SDK no Firebase Cloud Messaging Como ouvir uma mensagem em um determinado topic Como publicar uma mensagem no tópico usando uma solicitação HTTP para a API do FCM
Vamos começar!
Criando um projeto FCM
Para esta parte, uma conta do Google é obrigatório.
Comece indo para https://console.firebase.google.com/ e faça login com sua conta do Google. Clique no grande botão branco Criar um projeto .
Digite o nome do projeto, aceite os termos e clique em Continuar . Selecione a conta à qual deseja que o projeto seja anexado.
Criação de um aplicativo Firebase
No console do Firebase, clique no ícone de código ( ) no círculo branco, digite o nome do aplicativo, selecione configurar Firebase Hosting e clique em Registrar aplicativo . O provisionamento do aplicativo levará algum tempo antes de solicitar a próxima etapa.
Nas etapas de Adicionar Firebase SDK e Instalar Firebase CLI , examine as instruções e clique em Continuar para o console para finalizar a configuração.
Como obter as credenciais
Vamos obter a chave de API do Firebase que dá aos navegadores a capacidade de autenticar solicitações para a Firebase API e o arquivo Firebase JSON.
No painel, clique no nome do novo aplicativo e, em seguida, clique no ícone de engrenagem para acessar as configurações.
Em seguida, role para baixo até a parte inferior da guia; na seção Instalação e configuração do SDK , clique no botão Config para revelar a configuração de envio da web. Certifique-se de copiar e salvar em algum lugar seguro.
Uma chave de servidor é necessária para executar ações autorizadas por meio das APIs do Google Firebase. Para fazer isso, vá para a guia Mensagens na nuvem em Configurações do projeto e role para baixo até Credenciais do projeto . Copie e salve a chave do servidor em um local seguro.
Configurando um aplicativo React
Nesta seção, criaremos um aplicativo React e, com ele, configuraremos o Firebase.
Digite o seguinte em seu terminal:
$ npx create-react-app pub-sub && cd pub-sub && code.
O comando acima criará um novo aplicativo React em uma pasta pub-sub do diretório atual. Em seguida, altere o diretório atual para o diretório do aplicativo React e abra o projeto no Visual Studio Code para edição.
Além disso, a partir do terminal no diretório do projeto pub-sub, você pode executar npm start to open a pasta de desenvolvimento.
Instalando o Firebase SDK no aplicativo React
Em seu terminal, execute npm i firebase–save da pasta raiz do projeto para instalar o Firebase.
Crie uma nova pasta em path-to-project/src/utils e adicione um novo arquivo, firebaseConfig.json, à pasta. Este arquivo deve ter todos os valores JSON da página de configurações de push da Web do Firebase.
O conteúdo do arquivo deve ser assim:
{apiKey:”***”, authDomain:”logrocket-pub-sub.firebaseapp.com”, projectId:”logrocket-pub-sub”, storageBucket:”logrocket-pub-sub.appspot.com”, messagingSenderId:”***”, appId:”1: ***: web: ***”, measureId:”G-G7Q3DJ5GCN”}
Criando um auxiliar Firebase
Dentro da pasta/src/utils, crie um arquivo chamado firebase.js com o conteúdo abaixo:
importe o firebase de”firebase/app”;//eslint-disable-next-line import _messaging from”firebase/messaging”; import firebaseConfig de”./firebaseConfig”; const app=firebase.initializeApp (firebaseConfig); export const fMessaging=app.messaging ();
A primeira linha importa o aplicativo Firebase. As mensagens do Firebase são importadas para adicionar e inicializar o SDK de mensagens do Firebase no aplicativo Firebase. A quarta linha importa o arquivo de configuração do Firebase que você criou acima.
A linha seis inicializa o aplicativo Firebase usando os detalhes firebaseConfig JSON. E a última linha inicializa as mensagens em nuvem no aplicativo Firebase que foi inicializado na linha acima dela.
Adicionando firebase-messaging-sw.js
Para completar a integração do Firebase, você tem para adicionar um arquivo firebase-messaging-sw.js em um caminho acessível publicamente do seu aplicativo, neste caso, no caminho para o projeto/public.
O conteúdo do arquivo deve ser o seguinte:
//Conceda ao service worker acesso ao Firebase Messaging.//Observe que você só pode usar o Firebase Messaging aqui. Outras bibliotecas do Firebase//não estão disponíveis no service worker.//eslint-disable-next-line importScripts (“https://www.gstatic.com/firebasejs/8.6.7/firebase-app.js”);//eslint-disable-next-line importScripts (“https://www.gstatic.com/firebasejs/8.6.7/firebase-messaging.js”);//Inicialize o aplicativo Firebase no service worker passando//o objeto de configuração do Firebase do seu aplicativo.//https://firebase.google.com/docs/web/setup#config-object//eslint-disable-next-line firebase.initializeApp ({apiKey:”AIzaSyCu7r3TlqiiI_3HTJft_G-SSC8 _ *******”, authDomain:”logrocket-pub-sub.firebaseapp.com”, projectId:”logrocket-pub-sub”, storageBucket:”logrocket-pub-sub.appspot.com”, messagingSenderId:”********* ****”, appId:”1: 709132711133: web: ************************”, measureId:”G-***** ****”,});//Recupere uma instância do Firebase Messaging para que ele possa lidar com mensagens//em segundo plano.//eslint-disable-next-line const messaging=firebase.messaging (); messaging.onBackgroundMessage ((mensagem)=> {return self.showNotification (message.notification.title, message.notification);});
As primeiras linhas devem ser familiares; o aplicativo Firebase e os scripts de mensagens são importados para o contexto do service worker. Em seguida, inicialize o aplicativo Firebase antes de inicializar o Firebase Messaging.
O método onBackgroundMessage no Firebase Messaging SDK captura todas as mensagens entregues a um aplicativo cliente (navegador, neste caso) enquanto o navegador, página da Web ou aplicativo está não ativo.
Aqui, o emblema de notificação é acionado para manter o usuário informado sobre as novas informações recebidas em segundo plano.
Conceitos do Firebase Cloud Messaging
Para ter uma participação total na integração, você deve entender esses conceitos essenciais do Firebase Cloud Messaging.
Mensagens em primeiro plano
São mensagens recebidas pelo cliente quando o navegador está ativo (por exemplo, o usuário está na página/guia do navegador). Isso está disponível por meio do método.onMessage ((message)=> message) no SDK de mensagens do Firebase e não pode ser chamado em um contexto de service worker.
Mensagens de fundo
Essas mensagens são entregues a um navegador do cliente enquanto inativos. Isso está disponível por meio do método.onBackgroundMessage ((message)=> message) no SDK de mensagens do Firebase e pode ser chamado apenas em um contexto de service worker.
Assinantes de um tópico
Os assinantes são um grupo-alvo para o qual as mensagens são enviadas. Aplicativos móveis podem se inscrever para receber mensagens, enquanto os navegadores não podem se inscrever para qualquer problema usando o navegador SDK. Aprenderemos como se inscrever em um tópico de um navegador posteriormente neste artigo.
Dados de mensagem/notificação
Por padrão, todas as mensagens recebidas por um cliente devem ser um objeto que parece como o seguinte:
{“notificação”: {“título”:”Este é o título”,”corpo”:”Este é o corpo”,”prioridade”:”alto | normal”}, dados: { anExtra:”Algo”, tamanho:”tem um limite de tamanho para evitar falha”}}
O objeto de notificação deve ter um mínimo de título e corpo para ser enviado com sucesso, enquanto os dados podem ser um objeto arbitrário e de acordo com Os documentos do FCM não devem ter mais de 4000 bytes.
O objeto de notificação é usado para exibir notificação nativa com base no dispositivo do cliente, e não queremos isso em nosso caso. Mais tarde, veremos como evitar que a notificação apareça quando houver uma nova mensagem do FCM.
Inscrever-se em um nome de tópico conhecido
A O sistema pub/subs lida principalmente com tópicos. Um tópico é um grupo de usuários ou clientes que podem receber um determinado conjunto de mensagens.
O SDK do Firebase para JavaScript na web não oferece suporte para assinatura de tópico, mas pode ser alcançado por meio de uma solicitação HTTP para https://iid.googleapis.com/iid/v1/‘+ accessToken +’/rel/topics/’+ topic.
O accessToken é o token de acesso atual do cliente que precisa ser inscrito. O tópico é uma sequência que contém o nome do tópico.
Para implementar a assinatura do tópico, você precisa do accessToken conforme especificado acima. Em seu aplicativo React, abra o utilitário auxiliar Firebase e adicione o código abaixo:
export const subscribeToTopic=(topicName, handler=()=> {})=> fMessaging.getToken (). Then ((currentToken)=> {if (currentToken) {const FIREBASE_API_KEY=`AAAA *******: ****************************** *************************************************** *************************************************** ********** `;//Inscrever-se no tópico const topicURL=` https://iid.googleapis.com/iid/v1/$ {currentToken}/rel/topics/`; return fetch ( {url: topicURL, method:”POST”, headers: {Authorization: `key=$ {FIREBASE_API_KEY}`,},}).then ((response)=> {fMessaging.onMessage ((payload)=> {handler ( carga útil);}, (erro)=> {console.log (erro);});}).catch (()=> {console.error (`Não é possível assinar $ {topi cNome} tópico`); }); }});
Aqui, a função getToken no SDK de mensagens retorna o token atual de um cliente; às vezes, ele falha se o usuário não tiver dado a permissão necessária para notificações push.
Em seguida, uma solicitação HTTP é feita para uma assinatura de tópico; assim que for bem-sucedido, messaging (). onMessage é usado para ouvir as mensagens para o cliente.
Para implementar subscribeToTopic em seu aplicativo React, substitua o arquivo App.js no aplicativo para conter o conteúdo abaixo:
import React, {useEffect} de”react”; import”./App.css”; importar {subscribeToTopic} de”./utils/firebase”; function App () {function topicOnMessageHandler (message) {console.log (message); } useEffect (()=> {subscribeToTopic (“LOGROCKET_PUB_SUB_TOPICS”, topicOnMessageHandler).then ();}, []); return
; } exportar aplicativo padrão;
Primeiro, a função topicOnMessageHandler é definida para lidar com quaisquer mensagens que cheguem ao tópico e processá-las; ele é registrado apenas no console.
A função subscribeToTopic é chamada em um gancho useEffect e recebe o nome do tópico como LOGROCKET_PUB_SUB_TOPICS e o topicOnMessageHandler como o manipulador.
Sempre que houver uma mensagem enviada para o tópico LOGROCKET_PUB_SUB_TOPICS, seu aplicativo React irá recebê-la e registrá-la no console.
Tratamento de mensagens em segundo plano
O arquivo do service worker firebase-messaging-sw. js implementou o método onBackgroundMessage do SDK de mensagens do Firebase. Nessa função, a mensagem é registrada no console, o que é adequado para este caso de uso.
Publicação de uma mensagem em um aplicativo React
Em um sistema pub/subs, deve haver ser um editor de mensagens; o aplicativo React que acabamos de construir foi o assinante.
Para testar essa implementação, vá para o console do Firebase, expanda o menu da barra lateral Engage e clique em Cloud Messaging para acessar o painel de mensagens em nuvem. Em seguida, clique no botão Envie sua primeira mensagem .
Na ferramenta Compor notificação , insira o título da notificação e o corpo, a seguir clique em Avançar . Na seção Destino , selecione um tópico e insira o tópico que você usou ao se inscrever. Você pode agendar a mensagem para um momento posterior ou enviá-la imediatamente. Clique em Revisar para finalizar o processo.
Assim que a notificação for enviada, você deverá ver um emblema de notificação como:
Junto com um registro de console para a mensagem recebida:
Enviando mensagens fora do console
Além do painel, você pode enviar mensagens usando solicitações HTTP para https://fcm.googleapis.com/fcm/send com um corpo contendo o objeto de notificação e um cabeçalho de autorização: key=FIREBASE_API_KEY.
O corpo da solicitação deve ser semelhante a este:
{“dados”: {“Holla”:”T rue”},”to”:”/topics/LOGROCKET_PUB_SUB_TOPICS”,”notification”: {“title”:”This is from Postman”,”body”:”hello there”}}
E um cabeçalho de autorização descrito como Autorização:”key=API_KEY”:
Como isso é útil? Com essa abordagem HTTP, é possível para uma operação remota em um servidor enviar uma notificação a um tópico específico que certos clientes assinaram.
Assim como existe em um sistema pub/subs, o cliente o navegador já está servindo como assinante; o servidor remoto pode atuar como editor da notificação.
Evitando o emblema de notificação
O FCM é conhecido por notificações. Se ele deve servir como um serviço pub/sub, a notificação geralmente é desnecessária.
Nossa abordagem neste artigo para publicar mensagens sempre causará o emblema de notificação pop-up. Você pode evitar isso omitindo o objeto de notificação da carga útil que você está enviando ao publicar uma nova mensagem, da seguinte forma:
{“data”: {“Holla”:”True”},”to”:”/topics/LOGROCKET_PUB_SUB_TOPICS”}
Dessa forma, as mensagens são entregues, o crachá de notificação não aparece e os gerenciadores de mensagens podem lidar com a mensagem de maneira eficaz.
Envio de mensagens do service worker para o principal thread do navegador
Quando uma mensagem de plano de fundo é recebida, o onBackgroundMessage é chamado em um contexto do service worker.
Você pode enviar uma mensagem do thread do service worker para o thread do navegador principal consigo mesmo.postMessage ({}), em seguida, receba a mensagem no thread principal com window.addEventListener (“onmessage”, message=> console.log (message)).
A solução acima funcionaria, mas é não é passível de manutenção neste caso em que as mensagens podem chegar em dois lugares: por meio de onMessage e onBackgroundMessage.
A maneira mais gerenciável e sustentável seria para enviar ambas as mensagens para um sistema de eventos que pode ser inscrito, que trataria as mensagens independentemente de onde a mensagem está vindo.
O BroadcastChannel API pode ser útil neste caso, como esta postagem sugere .
Dentro da função onBackgroundMessage, em vez de consolar, você pode poste a mensagem em um canal:
messaging.onBackgroundMessage ((mensagem )=> {//se os dados enviados não contiverem notificação,//nenhuma notificação será mostrada ao usuário const fcmChannel=new BroadcastChannel (“fcm-channel”); fcmChannel.postMessage (mensagem); });
Além disso, dentro do manipulador para subscribeToTopic, substitua o log do console pelo seguinte:
const fcmChannel=new BroadcastChannel (“fcm-channel”); fcmChannel.postMessage (mensagem);
Para consumir esta mensagem, em qualquer lugar dentro do aplicativo React de teste, crie outro gancho useEffect dentro do arquivo App.js e implemente o evento onmessage da API BroadcastChannel como abaixo:
useEffect (()=> {const fcmChannel=new BroadCastChannel (“fcm-channel”); fcmChannel.onmessage=(message)=> console.log (message);}, [])
Com essa mudança, o manipulador onmessage lida com todas as mensagens vindas do FCM , que os está registrando no console.
Conclusão
Como um serviço de notificação push eficaz, o FCM também pode servir como um sistema Pub/Sub e ainda aproveitar a infraestrutura disponível existente.
Esta postagem também compartilhou como usar as APIs do Google para facilitar o trabalho com o FCM em vez de depender do SDK e tornar possível o uso de casos extremos.
Usando BroadcastChannel como um evento é útil para sincronizar os dados nos diferentes modos de entrega de mensagens do FCM.
Com as instruções nesta postagem, você pode fazer a comunicação servidor-cliente ation perfeitamente sem interromper o usuário com um selo de notificação.
