Catch up on everthing we announced at this year's Firebase Summit. Learn more

Получать сообщения в клиенте JavaScript

Поведение сообщений различается в зависимости от того, находится ли страница на переднем плане (имеет фокус) или в фоновом режиме, скрыта за другими вкладками или полностью закрыта. Во всех случаях , страница должна обрабатывать onMessage обратного вызова, но в фоновом режиме случаях вам может понадобиться для обработки onBackgroundMessage или настроить уведомление дисплея , чтобы позволить пользователю довести ваше веб - приложение на передний план.

Состояние приложения Уведомление Данные Оба
Передний план onMessage onMessage onMessage
Фон (обслуживающий работник) onBackgroundMessage (уведомление дисплей автоматически показан) onBackgroundMessage onBackgroundMessage (уведомление дисплей автоматически показан)

JavaScript Quickstart пример демонстрирует весь код , необходимый для получения сообщений.

Обработка сообщений, когда ваше веб-приложение находится на переднем плане

Для того , чтобы получить onMessage события, ваше приложение должно определить Firebase сообщений работника службы в firebase-messaging-sw.js . В качестве альтернативы, вы можете обеспечить существующие службы работника к SDK через getToken(): Promise<string> .

Веб-версия 9

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

Веб-версия 8

// 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.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.0/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();

Когда ваше приложение находится на переднем плане (пользователь в настоящее время просматривает вашу веб-страницу), вы можете получать данные и полезные данные уведомлений прямо на странице.

Веб-версия 9

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

Веб-версия 8

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

Обработка сообщений, когда ваше веб-приложение находится в фоновом режиме

Все сообщения, полученные, когда приложение работает в фоновом режиме, вызывают отображение уведомления в браузере. Вы можете указать параметры для этого уведомления, такие как заголовок или действие щелчка, либо в запросе на отправку с сервера приложения, либо с помощью логики сервис-воркера на клиенте.

Настройка параметров уведомления в запросе на отправку

Для сообщений уведомлений , отправленных с сервера приложений, то API FCM JavaScript поддерживает fcm_options.link ключ. Обычно это настраивается на страницу в вашем веб-приложении:

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"
      }
    }
  }
}

Если значение ссылки указывает на страницу, которая уже открыта на вкладке браузера, щелчок по уведомлению переводит эту вкладку на передний план. Если страница еще не открыта, щелчок с уведомлением открывает страницу в новой вкладке.

Поскольку сообщения данных не поддерживают fcm_options.link , рекомендуется добавить полезную нагрузку уведомления для всех сообщений данных. Кроме того, вы можете обрабатывать уведомления с помощью сервис-воркера.

Для объяснения разницы между уведомлением и данными сообщениями см Типов сообщений .

Настройка параметров уведомлений в сервис-воркере

Для сообщений с данными вы можете установить параметры уведомления в сервис-воркере. Сначала инициализируйте свое приложение в сервис-воркере:

Веб-версия 9

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

Веб-версия 8

// 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.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.0/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();

Для установки параметров, вызова onBackgroundMessage в firebase-messaging-sw.js . В этом примере мы создаем уведомление с полями заголовка, тела и значка.

Веб-версия 9

import { getMessaging } from "firebase/messaging";
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);
});

Веб-версия 8

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

Лучшие практики для уведомлений

Если вы знакомы с нажимной сообщениями для веб - сайтов, вы , возможно, уже читали общие принципы для того, что делает уведомление хорошее . Для разработчиков, отправляющих уведомления через FCM for Web, наиболее важными факторами являются точность и актуальность. Вот несколько конкретных рекомендаций, чтобы ваши уведомления были точными и актуальными:

  • Используйте поле значка, чтобы отправить значимое изображение. Во многих случаях это должен быть логотип компании или приложения, который пользователи сразу узнают. Или, для приложения чата, это может быть изображение профиля отправляющего пользователя.
  • Используйте поле заголовка, чтобы выразить точный характер сообщения. Например, «Джимми ответил» передает более точную информацию, чем «Новое сообщение». Не используйте это ценное пространство для названия своей компании или приложения - используйте для этого значок.
  • Не используйте заголовок или текст уведомления для отображения имени или домена вашего веб-сайта; уведомления уже содержат ваше доменное имя.
  • Добавить fcm_options.link , как правило , чтобы связать пользователя на веб - приложение и привести его в фокус в браузере. В редких случаях, когда вся необходимая информация может уместиться в уведомлении, вам может не понадобиться ссылка.