Para começar com o FCM, crie o caso de uso mais simples: o envio de uma mensagem de notificação a um usuário específico quando o app estiver em segundo plano. Nesta página estão listadas todas as etapas, desde a configuração até a verificação. Se você configurou um app cliente JavaScript para o FCM, pode ser que já tenha concluído algumas das etapas mostradas.
Configurar o SDK
Adicione o Firebase ao projeto JavaScript, caso ainda não tenha feito isso.
Acessar o token de registro
Quando você precisar recuperar o token de registro atual de uma instância de app, primeiro
solicite permissões de notificações do usuário com Notification.requestPermission()
.
Quando chamado conforme mostrado, se a permissão for concedida, ela retorna um token. Caso seja recusada,
ela rejeita a promessa:
function requestPermission() { console.log('Requesting permission...'); Notification.requestPermission().then((permission) => { if (permission === 'granted') { console.log('Notification permission granted.');
O FCM exige um arquivo firebase-messaging-sw.js
.
A menos que você já tenha um arquivo firebase-messaging-sw.js
, crie um arquivo vazio
com esse nome e coloque-o na raiz do seu domínio antes de recuperar um token.
Você pode adicionar conteúdo significativo ao arquivo posteriormente no processo de configuração do cliente.
Para recuperar o token atual:
Web version 9
import { getMessaging, getToken } from "firebase/messaging"; // Get registration token. Initially this makes a network call, once retrieved // subsequent calls to getToken will return from cache. const messaging = getMessaging(); getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => { if (currentToken) { // Send the token to your server and update the UI if necessary // ... } else { // Show permission request UI console.log('No registration token available. Request permission to generate one.'); // ... } }).catch((err) => { console.log('An error occurred while retrieving token. ', err); // ... });
Web version 8
// Get registration token. Initially this makes a network call, once retrieved // subsequent calls to getToken will return from cache. messaging.getToken({ vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => { if (currentToken) { // Send the token to your server and update the UI if necessary // ... } else { // Show permission request UI console.log('No registration token available. Request permission to generate one.'); // ... } }).catch((err) => { console.log('An error occurred while retrieving token. ', err); // ... });
Depois de receber o token, envie-o para o servidor do app e o armazene usando seu método preferido.
Enviar uma mensagem de notificação de teste
Instale e execute o app no dispositivo de destino.
Verifique se o app está em segundo plano no dispositivo.
Abra o Editor do Notificações e selecione Nova notificação.
Digite o texto da mensagem.
Selecione Enviar mensagem de teste.
No campo Adicionar um token de registro do FCM, insira o token de registro obtido na seção anterior deste guia.
Clique em Testar.
Depois de clicar em Testar, o dispositivo cliente de destino que tem o app em segundo plano receberá a notificação no navegador.
Próximas etapas
Enviar mensagens aos apps em primeiro plano
Depois de conseguir enviar mensagens de notificação enquanto o app está em segundo plano, consulte Receber mensagens em um cliente JavaScript para aprender a envia para apps em primeiro plano.
Ir além das mensagens de notificação
Para ir além das notificações e adicionar outros comportamentos mais avançados ao seu app, consulte os seguintes artigos: