Receba mensagens em um cliente JavaScript

O comportamento das mensagens difere dependendo se a página está em primeiro plano (tem foco), ou em segundo plano, escondida atrás de outras abas, ou completamente fechada. Em todos os casos, a página deve lidar com o retorno de chamada onMessage , mas em casos de segundo plano, você também pode precisar lidar com onBackgroundMessage ou configurar a notificação de exibição para permitir que o usuário coloque seu aplicativo da web em primeiro plano.

O exemplo de início rápido de JavaScript demonstra todo o código necessário para receber mensagens.

Lidar com mensagens quando seu aplicativo da web estiver em primeiro plano

Para receber o evento onMessage , seu aplicativo deve definir o trabalhador do serviço de mensagens do Firebase em firebase-messaging-sw.js . Como alternativa, você pode fornecer um service worker existente ao SDK por meio de getToken(): Promise<string> .

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

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = getMessaging(firebaseApp);
messaging_init_in_sw.js

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();
service-worker.js

Quando seu aplicativo está em primeiro plano (o usuário está visualizando sua página da web), você pode receber dados e cargas de notificação diretamente na página.

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
//   `messaging.onBackgroundMessage` handler.
import { getMessaging, onMessage } from "firebase/messaging";

const messaging = getMessaging();
onMessage(messaging, (payload) => {
  console.log('Message received. ', payload);
  // ...
});
messaging_receive_message.js

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
//   `messaging.onBackgroundMessage` handler.
messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
  // ...
});
index.js

Lidar com mensagens quando seu aplicativo da web estiver em segundo plano

Todas as mensagens recebidas enquanto o aplicativo está em segundo plano acionam uma notificação de exibição no navegador. Você pode especificar opções para essa notificação, como título ou ação de clique, na solicitação de envio do servidor de aplicativos ou usando a lógica do service worker no cliente.

Configurando opções de notificação na solicitação de envio

Para mensagens de notificação enviadas do servidor de aplicativos, a API JavaScript do FCM oferece suporte à chave fcm_options.link . Normalmente, isso é definido para uma página no seu aplicativo da web:

https://fcm.googleapis.com//v1/projects/<YOUR-PROJECT-ID>/messages:send
Content-Type: application/json
Authorization: bearer <YOUR-ACCESS-TOKEN>

{
  "message": {
    "token": "eEz-Q2sG8nQ:APA91bHJQRT0JJ...",
    "notification": {
      "title": "Background Message Title",
      "body": "Background message body"
    },
    "webpush": {
      "fcm_options": {
        "link": "https://dummypage.com"
      }
    }
  }
}

Se o valor do link apontar para uma página que já está aberta em uma guia do navegador, um clique na notificação traz essa guia para o primeiro plano. Se a página ainda não estiver aberta, um clique de notificação abrirá a página em uma nova guia.

Como as mensagens de dados não suportam fcm_options.link , é recomendável adicionar uma carga útil de notificação a todas as mensagens de dados. Alternativamente, você pode lidar com notificações usando o service worker.

Para obter uma explicação sobre a diferença entre mensagens de notificação e de dados, consulte Tipos de mensagens .

Configurando opções de notificação no service worker

Para mensagens de dados, você pode definir opções de notificação no service worker. Primeiro, inicialize seu aplicativo no service worker:

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

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = getMessaging(firebaseApp);
messaging_init_in_sw.js

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();
service-worker.js

Para definir opções, chame onBackgroundMessage em firebase-messaging-sw.js . Neste exemplo, criamos uma notificação com campos de título, corpo e ícone.

import { getMessaging } from "firebase/messaging/sw";
import { onBackgroundMessage } from "firebase/messaging/sw";

const messaging = getMessaging();
onBackgroundMessage(messaging, (payload) => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});
messaging_on_background_message.js

messaging.onBackgroundMessage((payload) => {
  console.log(
    '[firebase-messaging-sw.js] Received background message ',
    payload
  );
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});
service-worker.js

Melhores práticas para notificações

Se você estiver familiarizado com mensagens push para a Web, talvez já tenha lido as diretrizes gerais sobre o que constitui uma boa notificação . Para desenvolvedores que enviam notificações por meio do FCM para Web, as considerações mais importantes são a precisão e a relevância. Aqui estão algumas recomendações específicas para manter suas notificações precisas e relevantes:

• Use o campo do ícone para enviar uma imagem significativa. Para muitos casos de uso, deve ser o logotipo de uma empresa ou aplicativo que seus usuários reconheçam imediatamente. Ou, para um aplicativo de bate-papo, pode ser a imagem do perfil do usuário remetente.
• Use o campo de título para expressar a natureza precisa da mensagem. Por exemplo, “Jimmy respondeu” transmite informações mais precisas do que “Nova mensagem”. Não use este espaço valioso para o nome da sua empresa ou aplicativo – use o ícone para essa finalidade.
• Não use o título ou corpo da notificação para exibir o nome ou domínio do seu site; as notificações já contêm seu nome de domínio.
• Adicione fcm_options.link , geralmente para vincular o usuário de volta ao seu aplicativo da web e colocá-lo em foco no navegador. Em casos raros em que todas as informações que você precisa transmitir possam caber na notificação, talvez você não precise de um link.