Configurar um app cliente em JavaScript do Firebase Cloud Messaging

A API FCM JavaScript permite que você receba mensagens de notificação em apps da Web em execução em navegadores compatíveis com a API Push. Isso inclui as versões do navegador listadas nesta matriz de suporte.

Envie mensagens a clientes JavaScript usando os protocolos de servidor de apps HTTP e XMPP, conforme descrito em Enviar mensagens. O envio de mensagens do Firebase console não é permitido.

Para começar a usar a FCM JavaScript API, você precisa adicionar o Firebase ao seu app da Web e inserir lógica para acessar os tokens de registro.

Adicionar o Firebase a seu projeto do JavaScript

Adicione o Firebase ao seu projeto do JavaScript, caso ainda não tenha feito isso.

Configurar credenciais da Web com o FCM

A interface da Web do FCM usa credenciais da Web chamadas "Identificação voluntária do servidor de aplicativos" ou chaves "VAPID" para autorizar solicitações de envio a serviços de push da Web compatíveis. Para inscrever seu app nas notificações push, é preciso associar um par de chaves ao projeto do Firebase. Você pode gerar um novo par de chaves ou importar um existente por meio do Firebase console.

Gerar um novo par de chaves

  1. Abra a guia Cloud Messaging do painel Configurações do Console do Firebase e vá para a seção Configuração da Web.
  2. Na guia Certificados de push da Web, clique em Gerar par de chaves. O console exibe um aviso de que o par de chaves foi gerado e exibe a string de chave pública e a data.

Importar um par de chaves existente

Se você já estiver usando um par de chaves no seu aplicativo da Web, é possível importá-lo para o FCM para que possa chamar suas instâncias de apps da Web existentes por meio das APIs do FCM. Para importar chaves, você precisa ter acesso de proprietário ao projeto do Firebase. Importe sua chave pública e privada existente no formato codificado seguro de URL base64:

  1. Abra a guia Cloud Messaging do painel Configurações do Console do Firebase e vá para a seção Configuração da Web.
  2. Na guia Certificados de push da Web, localize e selecione o texto do link "Importar um par de chaves existente".
  3. Na caixa de diálogo Importar um par de chaves, forneça suas chaves pública e privada nos campos correspondentes e clique em Importar. O console exibe a string de chave pública e a data adicionada.

Para ver instruções sobre como adicionar a chave ao seu app, consulte Configurar credenciais da Web no seu aplicativo. Para mais informações sobre o formato das chaves e como gerá-las, consulte Chaves do servidor de aplicativos.

Configurar o navegador para receber mensagens

É necessário adicionar um manifesto do app da Web que especifique o gcm_sender_id, um valor codificado indicando que o FCM está autorizado a enviar mensagens para esse aplicativo. Caso seu aplicativo já tenha um arquivo de configuração manifest.json, certifique-se de adicionar o código do remetente do navegador exatamente como mostrado (não altere o valor):

{
  "gcm_sender_id": "103953800507"
}

Recuperar um objeto de mensagem

// Retrieve Firebase Messaging object.
const messaging = firebase.messaging();

Configurar credenciais da Web no seu app

O método usePublicVapidKey permite que o FCM use a credencial da chave VAPID ao enviar solicitações de mensagens para diferentes serviços de push. Depois de recuperar o objeto da mensagem, inclua no seu código a chave que você gerou ou importou de acordo com as instruções em Configurar credenciais da Web com o FCM:

// Add the public key generated from the console here.
messaging.usePublicVapidKey("BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu");

Solicitar permissão para receber notificações

O método messaging.requestPermission() exibe uma caixa de diálogo de consentimento para que os usuários permitam que seu app receba notificações no navegador. Se a permissão for negada, as solicitações de token de registro do FCM resultarão em erro.

messaging.requestPermission().then(function() {
  console.log('Notification permission granted.');
  // TODO(developer): Retrieve an Instance ID token for use with FCM.
  // ...
}).catch(function(err) {
  console.log('Unable to get permission to notify.', err);
});

Acessar o token de registro

Esta seção descreve como recuperar o token de registro de uma instância de app e como monitorar os eventos de atualização dele. Como o token pode passar por um rodízio após a primeira inicialização, recomendamos que você recupere o token de registro mais atualizado.

O token de registro pode mudar quando:

  • o app da Web exclui o token de registro;
  • o usuário exclui dados do navegador. Nesse caso, chame getToken para recuperar o novo token.

Recuperar o token de registro atual

Quando for necessário recuperar o token atual, chame getToken. Esse método retorna nulo quando nenhuma permissão foi concedida. Caso contrário, ele retorna um token ou rejeita a promessa por causa de um erro.

O serviço de mensagens requer 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:

// Get Instance ID token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken().then(function(currentToken) {
  if (currentToken) {
    sendTokenToServer(currentToken);
    updateUIForPushEnabled(currentToken);
  } else {
    // Show permission request.
    console.log('No Instance ID token available. Request permission to generate one.');
    // Show permission UI.
    updateUIForPushPermissionRequired();
    setTokenSentToServer(false);
  }
}).catch(function(err) {
  console.log('An error occurred while retrieving token. ', err);
  showToken('Error retrieving Instance ID token. ', err);
  setTokenSentToServer(false);
});

Monitorar a atualização de token

O retorno de chamada de onTokenRefresh é acionado sempre que um novo token é gerado. Portanto, chamar getToken nesse contexto garantirá o acesso a um token de registro atual e disponível.

// Callback fired if Instance ID token is updated.
messaging.onTokenRefresh(function() {
  messaging.getToken().then(function(refreshedToken) {
    console.log('Token refreshed.');
    // Indicate that the new Instance ID token has not yet been sent to the
    // app server.
    setTokenSentToServer(false);
    // Send Instance ID token to app server.
    sendTokenToServer(refreshedToken);
    // ...
  }).catch(function(err) {
    console.log('Unable to retrieve refreshed token ', err);
    showToken('Unable to retrieve refreshed token ', err);
  });
});

Depois de receber o token, envie-o para o servidor do app e armazene-o usando seu método preferido. Você pode usar a Instance ID Server API para receber informações sobre inscrições.

Próximas etapas

Depois de concluir as etapas de configuração, veja a seguir algumas ações mais avançadas do FCM para Web (JavaScript):

Enviar comentários sobre…

Precisa de ajuda? Acesse nossa página de suporte.