Acompanhe tudo o que foi anunciado no Firebase Summit e saiba como usar o Firebase para acelerar o desenvolvimento de apps e executá-los com confiança. Saiba mais

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 as 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, 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 FCM SDK

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

  2. Adicione o Firebase Cloud Messaging JS SDK 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 atualizar 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, verifique se você está conectado ao Cloud Console com a mesma conta do Google que usa para o Firebase e selecione o projeto correto. Novos projetos que adicionam o FCM SDK têm essa API habilitada 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 push da Web compatíveis. 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 Console do Firebase.

Gerar um novo par de chaves

  1. Abra a guia Cloud Messaging do painel Firebase console Settings e role até a seção Web configuration .
  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 cadeia de caracteres da chave pública e a data adicionada.

Importar um par de chaves existente

Se você tiver um par de chaves existente que já esteja usando com seu aplicativo da web, poderá importá-lo para o FCM para que possa acessar suas instâncias de aplicativos da web existentes por meio de APIs do FCM. Para importar chaves, você deve 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 Firebase console Settings e role até a seção Web configuration .
  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ública e privada nos campos correspondentes e clique em Importar . O console exibe a string de 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 push. Usando a chave que você gerou ou importou de acordo com as instruções em Configure Web Credentials with 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 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 seu servidor de aplicativos e armazene-o usando seu método preferido.

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