Эта страница переведена с помощью Cloud Translation API.

Получайте сообщения в веб-приложениях

Выберите платформу:

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

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

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

Важно: В этом руководстве упоминается инициализация Firebase в сервис-воркере. Чтобы использовать модульный SDK в сервис-воркере, необходимо собрать файл сервис-воркера, поскольку модули ES относительно новые и не получили широкой поддержки (см. раздел «Модули ES в сервис-воркерах» ). Если вы не хотите собирать файл сервис-воркера, вы можете использовать API с пространствами имен, предоставляемый совместимыми пакетами. Чтобы узнать, как использовать сборщики модулей с Firebase, см. раздел «Использование сборщиков модулей с Firebase» .

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

Для получения события onMessage ваше приложение должно определить обработчик службы обмена сообщениями Firebase в firebase-messaging-sw.js . В качестве альтернативы вы можете предоставить существующий обработчик службы SDK через 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);messaging_init_in_sw.js

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.
// Replace 10.13.2 with latest version of the Firebase JS SDK.
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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);messaging_init_in_sw.js

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.
// Replace 10.13.2 with latest version of the Firebase JS SDK.
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.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

Чтобы задать параметры, вызовите onBackgroundMessage в firebase-messaging-sw.js . В этом примере мы создаём уведомление с полями title, body и 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);
});messaging_on_background_message.js

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);
});service-worker.js