Configurar um aplicativo cliente JavaScript Firebase Cloud Messaging

A API JavaScript do FCM permite receber mensagens de notificação em aplicativos da web executados em navegadores compatíveis com a API Push . Isso inclui as versões de navegador listadas nesta matriz de suporte e extensões do Chrome por meio da API Push.

O SDK do FCM é compatível apenas com páginas veiculadas por HTTPS. Isso se deve ao uso de service workers, que estão disponíveis apenas em sites HTTPS. Se você precisar de um provedor, o Firebase Hosting é recomendado e oferece um nível gratuito para hospedagem HTTPS em seu próprio domínio.

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

Adicione e inicialize o SDK do FCM

  1. Se ainda não o fez, instale o Firebase JS SDK e inicialize o Firebase .

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

API modular da 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);

API com namespace da 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ê estiver usando o FCM para Web e quiser fazer upgrade 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, certifique-se de estar conectado ao Cloud Console com a mesma conta do Google que você usa 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 o envio de solicitações para serviços de web push suportados. Para assinar seu aplicativo para notificações push, você precisa associar um par de chaves ao seu projeto do Firebase. Você pode gerar um novo par de chaves ou importar o par de chaves existente por meio do Firebase Console.

Gere 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 de configuração da Web .
  2. Na guia Certificados Web Push , clique em Gerar par de chaves . O console exibe um aviso de que o par de chaves foi gerado e exibe a sequência da chave pública e a data de adição.

Importe um par de chaves existente

Se você já tiver um par de chaves em uso com seu aplicativo Web, poderá importá-lo para o FCM para poder acessar as instâncias existentes do aplicativo Web por meio de 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á até a seção de configuração da Web .
  2. Na guia Certificados Web Push , 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úblicas e privadas nos campos correspondentes e clique em Importar . O console exibe a string da chave pública e a data adicionada.

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

Configure credenciais da Web em seu aplicativo

O método getToken(): Promise<string> permite que o FCM use a credencial de chave VAPID ao enviar solicitações de mensagens para diferentes serviços push. Usando a chave que você gerou ou importou de acordo com as instruções em Configurar credenciais da Web com FCM , adicione-a ao seu código depois que o objeto de mensagens for recuperado:

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

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

Acesse o token de registro

Quando você precisar recuperar o token de registro atual para uma instância de aplicativo, primeiro solicite permissões de notificação do usuário com Notification.requestPermission() . Quando chamado conforme mostrado, retorna um token se a permissão for concedida ou rejeita a promessa se negada:

function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');

O FCM 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:

Web modular API

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

// 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 obter o token, envie-o para o servidor do aplicativo e armazene-o usando o método de sua preferência.

Próximos passos

Depois de concluir as etapas de configuração, aqui estão algumas opções para avançar com o FCM para Web (JavaScript):