Notificações push do Firebase em React
Publicados: 2022-03-10As notificações tornaram-se uma parte estável da web hoje em dia. Não é incomum encontrar sites pedindo permissão para enviar notificações ao seu navegador. A maioria dos navegadores modernos implementam a API push e são capazes de lidar com notificações push. Uma verificação rápida no caniuse mostra que a API possui amplo suporte entre os navegadores modernos baseados em cromo e o navegador Firefox.
Existem vários serviços para implementar notificações na web. Os notáveis são Pusher e Firebase. Neste artigo, implementaremos notificações push com o serviço Firebase Cloud Messaging (FCM), que é “uma solução de mensagens multiplataforma que permite enviar mensagens de forma confiável e sem custo”.
Presumo que o leitor tenha alguma familiaridade em escrever um aplicativo back-end em Express.js e/ou alguma familiaridade com React. Se você estiver confortável com qualquer uma dessas tecnologias, poderá trabalhar com o front-end ou o back-end. Vamos implementar o backend primeiro e depois passar para o frontend. Dessa forma, você pode usar a seção que mais lhe agrada.
Então vamos começar.
Tipos de mensagens do Firebase
A documentação do Firebase especifica que uma implementação do FCM requer dois componentes.
- Um ambiente confiável, como o Cloud Functions para Firebase ou um servidor de aplicativos para criar, direcionar e enviar mensagens.
- Um aplicativo cliente iOS, Android ou Web (JavaScript) que recebe mensagens por meio do serviço de transporte específico da plataforma correspondente.
Cuidaremos do item 1 em nosso aplicativo de back-end expresso e do item 2 em nosso aplicativo de front-end de reação.
Os documentos também afirmam que o FCM nos permite enviar dois tipos de mensagens.
- As mensagens de notificação (às vezes consideradas “mensagens de exibição”) são tratadas pelo SDK do FCM automaticamente.
- As mensagens de dados são tratadas pelo aplicativo cliente.
As mensagens de notificação são tratadas automaticamente pelo navegador na web. Eles também podem receber uma carga útil de data
opcional, que deve ser tratada pelo aplicativo cliente. Neste tutorial, enviaremos e receberemos mensagens de dados, que devem ser tratadas pelo aplicativo cliente. Isso nos dá mais liberdade para decidir como lidar com a mensagem recebida.
Como configurar um projeto do Firebase
A primeira coisa que precisamos fazer é configurar um projeto Firebase. O FCM é um serviço e, como tal, precisaremos de algumas chaves de API. Esta etapa requer que você tenha uma conta do Google. Crie um se você ainda não tiver um. Você pode clicar aqui para começar.
Depois de configurar sua conta do Google, vá para o console do Firebase.
Clique em adicionar projeto . Digite um nome para o seu projeto e clique em continuar . Na próxima tela, você pode optar por desativar a análise. Você sempre pode ativá-lo mais tarde no menu Analytics da página do seu projeto. Clique em continuar e aguarde alguns minutos para que o projeto seja criado. Geralmente é menos de um minuto. Em seguida, clique em continuar para abrir a página do seu projeto.
Depois de configurar um projeto com sucesso, a próxima etapa é obter as chaves necessárias para trabalhar com nosso projeto. Ao trabalhar com o Firebase, precisamos concluir uma etapa de configuração para o front-end e o back-end separadamente. Vamos ver como podemos obter as credenciais necessárias para trabalhar com ambos.
A parte dianteira
Na página do projeto, clique no ícone para adicionar o Firebase ao seu aplicativo da web.
Dê um apelido ao seu aplicativo . Não há necessidade de configurar a hospedagem do Firebase. Clique no aplicativo Register e aguarde alguns segundos para concluir a configuração. Na próxima tela, copie as credenciais do aplicativo e armazene-as em algum lugar. Você pode simplesmente deixar esta janela aberta e voltar a ela mais tarde.
Vamos precisar do objeto de configuração mais tarde. Clique em continuar para o console para retornar ao seu console.
Processo interno
Precisamos de uma credencial de conta de serviço para nos conectarmos ao nosso projeto do Firebase a partir do back-end. Na página do seu projeto, clique no ícone de engrenagem ao lado de Visão geral do projeto para criar uma conta de serviço para uso com nosso back-end Express. Consulte a captura de tela abaixo. Siga as etapas 1 a 4 para baixar um arquivo JSON
com as credenciais da sua conta. Certifique-se de manter o arquivo da sua conta de serviço em um local seguro.
Eu aconselho você a não baixá-lo até que esteja pronto para usá-lo. Apenas lembre-se de voltar a essas seções se precisar de uma atualização.
Agora, configuramos com sucesso um projeto do Firebase e adicionamos um aplicativo da Web a ele. Também vimos como obter as credenciais necessárias para trabalhar com front-end e back-end. Vamos agora trabalhar no envio de notificações push do nosso back-end expresso.
Começando
Para facilitar o trabalho com este tutorial, configurei um projeto no Github com um servidor e um cliente. Normalmente, você terá um repositório separado para seu back-end e front-end, respectivamente. Mas eu os reuni aqui para facilitar o trabalho com este tutorial.
Crie um fork do repositório, clone-o em seu computador e vamos iniciar nossos servidores front-end e back-end.
- Fork o repositório e confira o branch
01-get-started
. - Abra o projeto no editor de código de sua escolha e observe o conteúdo.
- Na raiz do projeto, temos duas pastas,
client/
eserver/
. Há também um arquivo.editorconfig
, um.gitignore
e umREADME.md
. - A pasta do cliente contém um aplicativo React. É aqui que vamos ouvir as notificações.
- A pasta do servidor contém um aplicativo expresso. É daqui que enviaremos as notificações. O aplicativo é do projeto que construímos em meu outro artigo How To Set Up An Express API Backend Project With PostgreSQL.
- Abra um terminal e navegue até a pasta
client/
. Execute o comandoyarn install
para instalar as dependências do projeto. Em seguida, executeyarn start
para iniciar o projeto. Visitehttps://localhost:3000
para ver o aplicativo ao vivo. - Crie um arquivo
.env
dentro da pastaserver/
e adicione a variável de ambienteCONNECTION_STRING
. Essa variável é uma URL de conexão de banco de dados apontando para um banco de dados PostgreSQL. Se você precisar de ajuda com isso, confira a seçãoConnecting The PostgreSQL Database And Writing A Model
do meu artigo vinculado. Você também deve fornecer a variável de ambientePORT
já que o React já roda na porta3000
. Eu configureiPORT=3001
no meu arquivo.env
. - Abra um terminal separado e navegue até a pasta
server/
. Execute o comandoyarn install
para instalar as dependências do projeto. Executeyarn runQuery
para criar o banco de dados do projeto. Executeyarn startdev
para iniciar o projeto. Visite https://localhost:3001/v1/messages e você verá algumas mensagens em formato JSON.
Agora que temos nossos aplicativos front-end e back-end em execução, vamos implementar notificações no back-end.
Como configurar o Firebase Admin Messaging no back-end
O envio de notificações push com o FCM no back-end requer o SDK de administração do Firebase ou os protocolos do servidor FCM. Usaremos o SDK de administração neste tutorial. Há também o compositor de notificações, que é bom para “testar e enviar mensagens de marketing e engajamento com segmentação e análise integradas poderosas”.
Em seu terminal, navegue até a pasta server/
e instale o Admin SDK.
# install firebase admin SDK yarn add firebase-admin
Abra seu arquivo .env
e adicione a seguinte variável de ambiente.
GOOGLE_APPLICATION_CREDENTIALS="path-to-your-service-account-json-file"
O valor dessa variável é o caminho para as credenciais da conta de serviço baixada. Neste ponto, você provavelmente deseja voltar para a seção em que criamos a conta de serviço para nosso projeto. Você deve copiar o código de inicialização do administrador de lá e também baixar o arquivo de chave da conta de serviço. Coloque este arquivo em sua pasta server/
e adicione-o ao seu .gitignore
.
Lembre-se, em um projeto real, você deve armazenar esse arquivo em um local muito seguro em seu servidor. Não deixe cair em mãos erradas.
Abra server/src/settings.js
e exporte o caminho do arquivo de credenciais do aplicativo.
# export the service account key file path export const googleApplicationCredentials = process.env.GOOGLE_APPLICATION_CREDENTIALS;
Crie um arquivo server/src/firebaseInit.js
e adicione o código abaixo.
import admin from 'firebase-admin'; import { googleApplicationCredentials } from './settings' const serviceAccount = require(googleApplicationCredentials); admin.initializeApp({ credential: admin.credential.cert(serviceAccount), databaseURL: 'your-database-url-here' }); export const messaging = admin.messaging();
Importamos o módulo admin do firebase-admin
. Em seguida, inicializamos o aplicativo de administração com nosso arquivo de conta de serviço. Por fim, criamos e exportamos o recurso de mensagens.
Observe que eu poderia ter passado o caminho para o arquivo de chave da minha conta de serviço diretamente, mas é a opção menos segura. Sempre use variáveis de ambiente ao lidar com informações confidenciais.
Para verificar se você concluiu a inicialização com êxito, abra server/src/app.js e inclua as seguintes linhas.
import { messaging } from './firebaseInit' console.log(messaging)
Importamos a instância de mensagens e a registramos no console. Você deve ver algo como a imagem abaixo. Você deve removê-los assim que verificar se seu administrador está configurado corretamente.
Se você tiver algum problema, confira o branch 02-connect-firebase-admin do meu repositório para comparação.
Agora que configuramos com sucesso as mensagens do administrador, vamos agora escrever o código para enviar as notificações.
Enviando notificações push do back-end
A configuração da mensagem de dados do FCM é muito simples. Tudo o que você precisa fazer é fornecer um ou mais alvos e um JSON
da mensagem que deseja enviar ao(s) cliente(s). Não há chaves obrigatórias no JSON
. Você sozinho decide quais pares de valores-chave deseja incluir nos dados. O formulário de mensagens de dados funciona em todas as plataformas, portanto, nossa notificação também pode ser processada por dispositivos móveis.
Existem configurações adicionais para outras plataformas. Por exemplo, há configurações do android
que funcionam apenas com dispositivos Android e configurações de apns
que funcionam apenas em dispositivos iOS. Você pode encontrar o guia de configuração aqui.
Crie um arquivo server/src/notify.js
e insira o código abaixo.
import { messaging } from './firebaseInit'; export const sendNotificationToClient = (tokens, data) => { // Send a message to the devices corresponding to the provided // registration tokens. messaging .sendMulticast({ tokens, data }) .then(response => { // Response is an object of the form { responses: [] } const successes = response.responses.filter(r => r.success === true) .length; const failures = response.responses.filter(r => r.success === false) .length; console.log( 'Notifications sent:', `${successes} successful, ${failures} failed` ); }) .catch(error => { console.log('Error sending message:', error); }); };
Criamos uma função que aceita um array de strings de token e um objeto de dados. Cada string de token representa um dispositivo que aceitou receber notificações de nosso aplicativo de back-end. A notificação será enviada para cada cliente na matriz de tokens. Veremos como gerar o token na seção de front-end do tutorial.
O método sendMulticast
da instância do sistema de mensagens retorna uma promessa. Em caso de sucesso, obtemos uma matriz a partir da qual contamos o número de sucessos, bem como as notificações com falha. Você certamente pode lidar com essa resposta da maneira que quiser.
Vamos usar esta função para enviar uma notificação sempre que uma nova mensagem for adicionada ao banco de dados.
Abra server/src/controllers/message.js
e atualize a função addMessage
.
import { sendNotificationToClient } from '../notify'; export const addMessage = async (req, res) => { const { name, message } = req.body; const columns = 'name, message'; const values = `'${name}', '${message}'`; try { const data = await messagesModel.insertWithReturn(columns, values); const tokens = []; const notificationData = { title: 'New message', body: message, }; sendNotificationToClient(tokens, notificationData); res.status(200).json({ messages: data.rows }); } catch (err) { res.status(200).json({ messages: err.stack }); } };
Essa função lida com uma solicitação de postagem para o ponto de extremidade /messages
. Depois que uma mensagem é criada com sucesso, uma notificação é enviada pela função sendNotificationToClient
seguida pela resposta ao cliente. A única peça que falta neste código são os tokens
para enviar as notificações.
Quando conectarmos o aplicativo cliente, copiaremos o token gerado e o colaremos neste arquivo. Em um aplicativo de produção, você armazenará os tokens em algum lugar do banco de dados.
Com este último pedaço de código, concluímos a implementação de back-end. Vamos agora mudar para o frontend.
A ramificação correspondente no meu repositório neste momento é 03-send-notification.
Como configurar notificações de mensagens do Firebase no cliente
Vamos dar uma olhada nos principais componentes do nosso aplicativo React front-end.
Abra client/src/App.js
e inspecione o conteúdo. Vou deixar de fora a maioria das instruções de importação e apenas observar a lógica do programa.
# library imports import { Messaging } from './Messaging'; axios.defaults.baseURL = 'https://localhost:3001/v1'; const App = () => { return ( <Fragment> <ToastContainer autoClose={2000} position="top-center" /> <Navbar bg="primary" variant="dark"> <Navbar.Brand href="#home">Firebase notifictations with React and Express</Navbar.Brand> </Navbar> <Container className="center-column"> <Row> <Col> <Messaging /> </Col> </Row> </Container> </Fragment> ); }; export default App;
Este é um componente de reação regular estilizado com react-bootstrap. Há um componente toast bem na parte superior do nosso aplicativo, que usaremos para exibir notificações. Observe que também definimos o baseURL
para a biblioteca axios
. Tudo o que é importante acontece dentro do componente <Messaging />
. Vamos agora dar uma olhada em seu conteúdo.
Abra client/src/Messaging.js
e inspecione o conteúdo.
export const Messaging = () => { const [messages, setMessages] = React.useState([]); const [requesting, setRequesting] = React.useState(false); React.useEffect(() => { setRequesting(true); axios.get("/messages").then((resp) => { setMessages(resp.data.messages); setRequesting(false); }); }, []); return ( <Container> {/* form goes here */} <div className="message-list"> <h3>Messages</h3> {requesting ? ( <Spinner animation="border" role="status"> <span className="sr-only">Loading...</span> </Spinner> ) : ( <> {messages.map((m, index) => { const { name, message } = m; return ( <div key={index}> {name}: {message} </div> ); })} </> )} </div> </Container> ); };
Temos duas variáveis de estado, messages
e requesting
. messages
representam a lista de mensagens do nosso banco de dados e a requesting
é para alternar o estado do nosso carregador. Temos um bloco React.useEffect
onde fazemos nossa chamada de API para o endpoint /messages
e definimos os dados retornados em nosso estado de messages
.
Na instrução de retorno, mapeamos as mensagens e exibimos os campos de name
e message
. Na mesma página, incluímos um formulário para criação de novas mensagens.
<Formik initialValues={{ name: "", message: "", }} onSubmit={(values, actions) => { setTimeout(() => { alert(JSON.stringify(values, null, 2)); actions.setSubmitting(false); toast.success("Submitted succesfully"); }, 1000); }} > {(prop) => { const { handleSubmit, handleChange, isSubmitting } = prop; return ( <> <InputGroup className="mb-3"> <InputGroup.Prepend> <InputGroup.Text>Name</InputGroup.Text> </InputGroup.Prepend> <FormControl placeholder="Enter your name" onChange={handleChange("name")} /> </InputGroup> <InputGroup className="mb-3"> <InputGroup.Prepend> <InputGroup.Text>Message</InputGroup.Text> </InputGroup.Prepend> <FormControl onChange={handleChange("message")} placeholder="Enter a message" /> </InputGroup> {isSubmitting ? ( <Button variant="primary" disabled> <Spinner as="span" size="sm" role="status" animation="grow" aria-hidden="true" /> Loading... </Button> ) : ( <Button variant="primary" onClick={() => handleSubmit()}> Submit </Button> )} </> ); }} </Formik>
Estamos usando a biblioteca Formik
para gerenciar nosso formulário. Passamos ao componente <Formik />
uma props initialvalues
, uma prop onSubmit
e o componente de formulário que queremos renderizar. Em troca, recebemos algumas funções úteis, como handleChange
, que podemos usar para manipular nossas entradas de formulário, e handleSubmit
, que usamos para enviar o formulário. isSubmitting
é um boolean
que usamos para alternar o estado do botão de envio.
Eu encorajo você a dar uma chance ao formik. Realmente simplifica o trabalho com formulários. Vamos substituir o código no método onSubmit
mais tarde.
Vamos agora implementar o método que solicitará a permissão de um navegador e atribuirá um token a ele.
Para começar a usar o Firebase no front-end, precisamos instalar a biblioteca cliente Firebase JavaScript. Observe que este é um pacote diferente do firebase-admin SDK
.
# install firebase client library yarn add firebase
Crie um arquivo client/src/firebaseInit.js
e adicione o seguinte conteúdo.
import firebase from 'firebase/app'; import 'firebase/messaging'; const config = { apiKey: "API-KEY", authDomain: "AUTH-DOMAIN", databaseURL: "DATABASE-URL", projectId: "PROJECT-ID", storageBucket: "STORAGE-BUCKET", messagingSenderId: "MESSAGING-SENDER-ID", appId: "APP-ID" }; firebase.initializeApp(config); const messaging = firebase.messaging(); // next block of code goes here
Os documentos do Firebase afirmam que:
“O cliente JavaScript completo do Firebase inclui suporte para Firebase Authentication, Firebase Realtime Database, Firebase Storage e Firebase Cloud Messaging.”
Então, aqui, importamos apenas o recurso de mensagens. Neste ponto, você pode consultar a seção sobre como criar um projeto do Firebase para obter o objeto de config
. Em seguida, inicializamos o Firebase e exportamos o recurso de mensagens. Vamos adicionar o bloco final de código.
export const requestFirebaseNotificationPermission = () => new Promise((resolve, reject) => { messaging .requestPermission() .then(() => messaging.getToken()) .then((firebaseToken) => { resolve(firebaseToken); }) .catch((err) => { reject(err); }); }); export const onMessageListener = () => new Promise((resolve) => { messaging.onMessage((payload) => { resolve(payload); }); });
A função requestFirebaseNotificationPermission
solicita a permissão do navegador para enviar notificações e resolve com um token se a solicitação for concedida. Este é o token que o FCM usa para enviar uma notificação ao navegador. É o que aciona o prompt que você vê nos navegadores pedindo permissão para enviar uma notificação.
A função onMessageListener
só é invocada quando o navegador está em primeiro plano. Mais tarde, escreveremos uma função separada para lidar com a notificação quando o navegador estiver em segundo plano.
Abra client/src/App.js
e importe a função requestFirebaseNotificationPermission
.
import { requestFirebaseNotificationPermission } from './firebaseInit'
Em seguida, dentro da função App, adicione o código abaixo antes da instrução de retorno.
requestFirebaseNotificationPermission() .then((firebaseToken) => { // eslint-disable-next-line no-console console.log(firebaseToken); }) .catch((err) => { return err; });
Depois que o aplicativo carrega, essa função é executada e solicita a permissão do navegador para mostrar as notificações. Se a permissão for concedida, registramos o token. Em um aplicativo de produção, você deve salvar o token em algum lugar que seu back-end possa acessar. Mas para este tutorial, vamos apenas copiar e colar o token no aplicativo de back-end.
Agora execute seu aplicativo e você deverá ver a mensagem de solicitação de notificação. Clique em permitir e aguarde o token ser registrado no console. Como você concedeu a permissão do navegador, se atualizarmos a página, você não verá mais o banner, mas o token ainda será registrado no console.
Você deve saber que o navegador Firefox (v75) não pede permissão de notificação por padrão. A solicitação de permissão deve ser acionada por uma ação gerada pelo usuário, como um clique.
Este é um bom ponto para eu confirmar minhas alterações. A ramificação correspondente é 04-request-permission.
Vamos agora completar o código para salvar uma mensagem em nosso banco de dados.
Abra client/src/Messaging.js
e substitua a função onSubmit
do nosso formulário pelo código abaixo.
onSubmit={(values, actions) => { axios .post("/messages", values) .then((resp) => { setMessages(resp.data.messages.concat(messages)); actions.setSubmitting(false); toast.success("Submitted succesfully"); }) .catch((err) => { console.log(err); toast.error("There was an error saving the message"); }); }}
Fazemos uma solicitação de post
para o endpoint /messages
para criar uma nova mensagem. Se a solicitação for bem-sucedida, pegamos os dados retornados e os colocamos no topo da lista de messages
. Também exibimos um brinde ao sucesso.
Vamos experimentar para ver se funciona. Inicie os servidores front-end e back-end. Antes de tentar o post request, abra server/src/controllers/messages.js
e comente a linha onde estamos enviando a notificação.
# this line will throw an error if tokens is an empty array comment it out temporarily // sendNotificationToClient(tokens, notificationData);
Tente adicionar algumas mensagens ao banco de dados. Trabalho? Isso é ótimo. Agora descomente essa linha antes de continuar.
Copie o token de notificação do console do desenvolvedor e cole-o na matriz de tokens. O token é uma string muito longa, conforme mostrado abaixo.
const tokens = [ 'eEa1Yr4Hknqzjxu3P1G3Ox:APA91bF_DF5aSneGdvxXeyL6BIQy8wd1f600oKE100lzqYq2zROn50wuRe9nB-wWryyJeBmiPVutYogKDV2m36PoEbKK9MOpJPyI-UXqMdYiWLEae8MiuXB4mVz9bXD0IwP7bappnLqg', ];
Abra client/src/Messaging.js
, importe o onMessageListener
e invoque-o logo abaixo do bloco useEffect
. Qualquer posição dentro da função está bem, desde que seja antes da instrução de return
.
import { onMessageListener } from './firebaseInit'; React.useEffect(() => { ... }, []); onMessageListener() .then((payload) => { const { title, body } = payload.data; toast.info(`${title}; ${body}`); }) .catch((err) => { toast.error(JSON.stringify(err)); });
O ouvinte retorna uma promessa que resolve a carga de notificação em caso de sucesso. Em seguida, exibimos o título e o corpo em um brinde. Observe que poderíamos ter feito qualquer outra ação assim que recebermos esta notificação, mas estou simplificando as coisas aqui. Com os dois servidores em execução, experimente e veja se está funcionando.
Trabalho? Isso é ótimo.
Caso você tenha problemas, você sempre pode comparar com meu repositório. A ramificação correspondente neste momento é 05-escuta-a-notificação.
Há apenas um pouco que precisamos cuidar. No momento, só podemos ver as notificações quando o navegador está em primeiro plano. O ponto sobre as notificações é que elas devem aparecer independentemente de o navegador estar em primeiro plano ou não.
Se formos enviar uma mensagem de exibição, ou seja, incluímos um objeto de notification
em nossa carga de notificação, o navegador cuidará disso por conta própria. Mas como estamos enviando uma mensagem de dados, temos que dizer ao navegador como se comportar em resposta a uma notificação quando nosso navegador estiver em segundo plano.
Para lidar com a notificação em segundo plano, precisamos registrar um service worker em nosso cliente front-end.
Crie um arquivo client/public/firebase-messaging-sw.js
e insira o seguinte conteúdo:
importScripts('https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/7.14.2/firebase-messaging.js'); const config = { apiKey: "API-KEY", authDomain: "AUTH-DOMAIN", databaseURL: "DATABASE-URL", projectId: "PROJECT-ID", storageBucket: "STORAGE-BUCKET", messagingSenderId: "MESSAGING-SENDER-ID", appId: "APP-ID" }; firebase.initializeApp(config); const messaging = firebase.messaging(); messaging.setBackgroundMessageHandler(function(payload) { console.log('[firebase-messaging-sw.js] Received background message ', payload); const notificationTitle = payload.data.title; const notificationOptions = { body: payload.data.body, icon: '/firebase-logo.png' }; return self.registration.showNotification(notificationTitle, notificationOptions); }); self.addEventListener('notificationclick', event => { console.log(event) return event; });
Na parte superior do arquivo, estamos importando as bibliotecas firebase-app
e firebase-messaging
, pois precisamos apenas do recurso de mensagens. Não se preocupe se a sintaxe de importação for nova. É uma sintaxe para importar scripts externos para arquivos do service worker. Certifique-se de que a versão que está sendo importada seja a mesma do seu package.json
. Já me deparei com problemas que resolvi harmonizando as versões.
Como de costume, inicializamos o Firebase e, em seguida, invocamos o setBackgroundMessageHandler
, passando um retorno de chamada, que recebe a carga útil da mensagem de notificação. A parte restante do código especifica como o navegador deve exibir a notificação. Observe que também podemos incluir um ícone para exibir.
Também podemos controlar o que acontece quando clicamos na notificação com o manipulador de eventos notificationclick
.
Crie um arquivo client/src/serviceWorker.js
e insira o conteúdo abaixo.
export const registerServiceWorker = () => { if ('serviceWorker' in navigator) { navigator.serviceWorker .register('firebase-messaging-sw.js') .then(function (registration) { // eslint-disable-next-line no-console console.log('[SW]: SCOPE: ', registration.scope); return registration.scope; }) .catch(function (err) { return err; }); } };
Esta função registra nossos arquivos de service worker. Observe que substituímos a versão mais detalhada gerada pelo React. Primeiro verificamos se o serviceWorker
está presente no objeto navigator
. Este é um suporte simples ao navegador. Se o navegador oferecer suporte a service workers, registramos o arquivo do service worker que criamos anteriormente.
Agora abra client/src/index.js
, importe esta função e invoque-a.
# other imports import { registerServiceWorker } from './serviceWorker' ReactDOM.render( ... ); registerServiceWorker()
Se tudo correr bem, você deverá ver o escopo do service worker registrado em seu console.
Abra https://localhost:3000/messaging em um segundo navegador e crie uma mensagem. Você deve ver a notificação do outro navegador aparecer.
Com isso, chegamos ao final deste tutorial. A ramificação correspondente no meu repositório é 06-handle-background-notification.
Conclusão
Neste artigo, aprendemos sobre os diferentes tipos de mensagens de notificação que podemos enviar com o Firebase Cloud Messaging (FCM). API. Em seguida, implementamos o tipo “mensagem de dados” no back-end. Por fim, geramos um token no aplicativo cliente que usamos para receber mensagens de notificação acionadas pelo aplicativo back-end. Por fim, aprendemos como ouvir e exibir as mensagens de notificação quando o navegador está em segundo plano ou em primeiro plano.
Recomendo que você dê uma olhada nos documentos do FCM para saber mais.
Recursos Relacionados
- Firebase, site oficial
- Fireact, Orji Chidi Matthew, GitHub
- “Firebase: App Success Made Simple”, o blog npm
- Console do Firebase
- SDK do Firebase Admin Node.js, o blog do npm
- WebpushConfig, Documentos do Firebase
-
sendMulticast
, Documentos do Firebase - Livro de receitas do trabalhador de serviço, Mozilla
- Notificação, Documentos do Firebase
- Firebase Cloud Messaging, Documentação do Firebase
- “Como configurar um projeto de back-end de API expresso com PostgreSQL”, Chidi Orji