Enviar uma mensagem de teste a um app em segundo plano

Para começar a usar 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, talvez 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, retorna um token. Caso seja recusada, 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:

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);
  // ...
});
messaging_get_token.js

// 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);
  // ...
});
index.js

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

1. Instale e execute o app no dispositivo de destino. Para dispositivos Apple, será necessário aceitar a solicitação de permissão para receber notificações remotas.

2. Verifique se o app está em segundo plano no dispositivo.

3. No Console do Firebase, abra a página "Mensagens".

4. Se esta for sua primeira mensagem, selecione Criar primeira campanha.

   1. Selecione Mensagens do Firebase Notificações e clique em Criar.

5. Se não for sua primeira mensagem, selecione Nova campanha e depois Notificações na guia Campanhas.

6. Digite o texto da mensagem. Todos os outros campos são opcionais.

7. Selecione Enviar mensagem de teste no painel à direita.

8. No campo Adicionar um token de registro do FCM, insira o token de registro obtido na seção anterior deste guia.

9. Selecione Testar.

Depois de selecionar Testar, o dispositivo cliente de destino com o app em segundo plano receberá a notificação.

Próximas etapas

Enviar mensagens aos apps em primeiro plano

Depois de enviar mensagens de notificação enquanto o app está em segundo plano, consulte Receber mensagens em um cliente JavaScript e confira como enviar para aplicativos em primeiro plano.

Adicionar outros comportamentos 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:

• Receber mensagens em um cliente JavaScript
• Enviar mensagens a vários dispositivos