O Google tem o compromisso de promover a igualdade racial para as comunidades negras. Saiba como.

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 e as extensões do Chrome por meio da API Push.

O SDK do FCM é permitido somente nas páginas exibidas por HTTPS. Isso se deve ao uso de service workers, que estão disponíveis apenas nesse tipo de site. Se você precisa de um provedor, o Firebase Hosting é recomendado para hospedagem HTTPS gratuita em seu próprio domínio.

Para começar a usar a API FCM JavaScript, 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 JavaScript

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

Se você está atualmente usando o FCM para a Web e quer atualizar para o SDK 6.7.0 ou posterior, ative a API de Registro do FCM para seu projeto no Console do Google Cloud. Ao ativar a API, verifique se está conectado ao Console do Cloud com a mesma conta do Google usada para o Firebase e selecione o projeto correto. Novos projetos que adicionam o SDK do FCM têm essa API ativada por padrão.

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 Console do Firebase.

Gerar um novo par de chaves

  1. Abra a guia Cloud Messaging do painel Configurações do Console do Firebase e vá até 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 suas chaves pública e privada existentes no formato codificado seguro de URL base64:

  1. Abra a guia Cloud Messaging do painel Configurações do Console do Firebase e vá até 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 instruções sobre como adicionar a chave ao app, consulte Configurar credenciais da Web no app. Para mais informações sobre o formato das chaves e como gerá-las, consulte Chaves do servidor de aplicativos.

Recuperar um objeto de mensagem

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

Configurar credenciais da Web no seu app

O método getToken(): Promise<string> 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.getToken({vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

Acessar o token de registro

Quando você precisar recuperar o token de registro atual de uma instância de app, chame getToken. Se a permissão de notificação não tiver sido concedida, esse método solicitará ao usuário permissões de notificação. Caso contrário, ele retorna um token ou rejeita a promessa devido a 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 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) {
    sendTokenToServer(currentToken);
    updateUIForPushEnabled(currentToken);
  } else {
    // Show permission request.
    console.log('No registration token available. Request permission to generate one.');
    // Show permission UI.
    updateUIForPushPermissionRequired();
    setTokenSentToServer(false);
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  showToken('Error retrieving registration token. ', err);
  setTokenSentToServer(false);
});

Depois de receber o token, envie-o para o servidor do app e armazene-o usando seu método preferido.

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):