Configurar um app cliente em JavaScript do Firebase Cloud Messaging

Com a API JavaScript do FCM, você recebe mensagens de notificação em apps da Web em execução em navegadores que oferecem suporte à API Push. Isso inclui as versões do navegador listadas nesta matriz de suporte e as extensões do Chrome via 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 e fornece um nível sem custo financeiro para hospedagem HTTPS no seu próprio domínio.

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

Adicionar e inicializar o SDK do FCM

  1. Instale o SDK do Firebase para JavaScript e inicialize o Firebase, caso ainda não tenha feito isso.

  2. Adicione o SDK do Firebase Cloud Messaging para JavaScript e inicialize o Firebase Cloud Messaging:

Web 

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = getMessaging(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = firebase.messaging();

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 você está logado no 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 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 com suporte. Para inscrever seu app nas notificações push, é preciso associar um par de chaves ao projeto do Firebase. É possível gerar um novo par de chaves ou importar um existente no 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 app da Web, é possível importar esse par ao FCM para poder chamar as instâncias de apps da Web existentes usando as APIs do FCM. Para importar chaves, você precisa ter acesso de proprietário ao projeto do Firebase. Importe a chave pública e a chave 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, encontre 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.

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 código a chave que você gerou ou importou de acordo com as instruções em Configurar credenciais da Web com o FCMFCM:

import { getMessaging, getToken } from "firebase/messaging";

const messaging = getMessaging();
// Add the public key generated from the console here.
getToken(messaging, {vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

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

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

Web

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