Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

Configurar um aplicativo cliente JavaScript Firebase Cloud Messaging

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

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

O SDK do FCM é compatível apenas em 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.

Adicionar e inicializar 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:

Web version 9

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

import firebase from "firebase/app";
import "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
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, deverá ativar a API de registro do FCM para seu projeto no Console do Google Cloud. Ao ativar a API, certifique-se de estar conectado ao Console do Cloud com a mesma conta do Google que você usa para o Firebase e de selecionar 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 o envio de solicitações para serviços de push da Web com suporte. Para inscrever seu aplicativo em 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 seu par de chaves 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 role até a seção de configuração da Web .
  2. Na guia de 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 string da chave pública e a data adicionada.

Importar um par de chaves existente

Se você tiver um par de chaves existente que já está usando com seu aplicativo Web, poderá importá-lo para o FCM para que possa acessar suas instâncias de aplicativos Web existentes por meio de APIs do FCM. Para importar chaves, você precisa ter acesso no nível do 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 role até a seção de configuração da Web .
  2. Na guia de certificados do 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 em seu aplicativo . Para obter mais informações sobre o formato das chaves e como gerá-las, consulte Chaves do servidor de aplicativos .

Configurar 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 mensagem para diferentes serviços de push. Usando a chave que você gerou ou importou de acordo com as instruções em Configure Web Credentials with FCM , adicione-a em seu código depois que o objeto de mensagens for recuperado:

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

Acesse o token de registro

Quando você precisar recuperar o token de registro atual para uma instância do aplicativo, primeiro solicite permissões de notificação do usuário com Notification.requestPermission() . Quando chamado como mostrado, isso 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 version 9

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

Web version 8

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

Depois de obter o token, envie-o para o servidor de aplicativos 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):