O comportamento das mensagens varia dependendo
se a página está em primeiro plano (em foco), em segundo plano (oculta
atrás de outras guias) ou completamente fechada. Em todos os casos, a página precisa administrar o
callback onMessage
,
mas em casos de segundo plano, também pode ser preciso administrar o
onBackgroundMessage
ou configurar a notificação para permitir que o usuário coloque seu
app da Web em primeiro plano.
Estado do app | Notificação | Dados | Ambos |
---|---|---|---|
Primeiro plano | onMessage |
onMessage |
onMessage |
Segundo plano (service worker) | onBackgroundMessage (notificação aparece automaticamente) |
onBackgroundMessage |
onBackgroundMessage (notificação de exibição automática) |
A amostra de início rápido do JavaScript demonstra todo o código necessário para receber mensagens.
Processar mensagens quando seu app da Web estiver em primeiro plano
Para receber o evento onMessage
, seu app precisa definir o
service worker de mensagens do Firebase em firebase-messaging-sw.js
.
Se preferir, forneça um service worker ao SDK usando o
getToken(): Promise<string>
.
Web
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);
Web
// 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();
Quando seu app está em primeiro plano (o usuário está visualizando a página da Web), é possível receber payloads de dados e de notificações diretamente na página.
Web
// 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); // ... });
Web
// 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); // ... });
Processar mensagens quando seu app da Web estiver em segundo plano
Todas as mensagens recebidas enquanto o app está em segundo plano acionam uma notificação de exibição no navegador. Especifique as opções dessa notificação, como um título ou uma ação de clique, na solicitação de envio a partir do servidor do app ou usando a lógica do service worker no cliente.
Configurar opções de notificação na solicitação de envio
Para mensagens de notificações enviadas pelo servidor do app, a API FCM
JavaScript é compatível com a
chave
fcm_options.link
. Em geral, isso é definido como uma página no seu app 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 trará essa guia para o primeiro plano. Se a página ainda não estiver aberta, um clique na notificação abrirá a página em uma nova guia.
Como as mensagens de dados não aceitam fcm_options.link
, recomenda-se
adicionar um payload de notificação a todas as mensagens de dados. Como alternativa, é possível gerenciar
notificações com o service worker.
Veja uma explicação sobre a diferença entre mensagens de notificação e de dados em Tipos de mensagem.
Como configurar opções de notificação no service worker
Para mensagens de dados, é possível definir opções de notificação no service worker. Primeiro, inicialize seu app no service worker:
Web
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);
Web
// 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();
Para definir opções, chame onBackgroundMessage
em firebase-messaging-sw.js
.
Neste exemplo, criamos uma notificação com os campos title, body e icon.
Web
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); });
Web
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); });
Práticas recomendadas para notificações
Se você conhece mensagens push para Web, já deve ter lido as diretrizes gerais sobre os elementos de uma boa notificação. Para desenvolvedores que enviam notificações usando o FCM para Web, as considerações mais importantes são a precisão e a relevância. Estas são algumas recomendações específicas para manter suas notificações precisas e relevantes:
- Use o campo "icon" para enviar uma imagem significativa. Para muitos casos de uso, esse deve ser um logotipo da empresa ou do app que os usuários reconhecem imediatamente. Ou, para um aplicativo de chat, pode ser a imagem do perfil do remetente.
- Use o campo "title" para expressar a natureza precisa da mensagem. Por exemplo, "Jimmy respondeu" transmite informações mais precisas do que "Nova mensagem". Não use esse espaço valioso para o nome da empresa ou do app, use o ícone para esse fim.
- Não use o título ou o corpo da notificação para exibir o nome do site ou o domínio; notificações já contêm seu nome de domínio.
- Adicione
fcm_options.link
para incluir um link que direcionará o usuário para seu app da Web e colocará o app em primeiro plano no navegador. Nos raros casos em que todas as informações necessárias para transmissão couberem na notificação, o link poderá ser desnecessário.