Чтобы переводить контент на ваш предпочитаемый язык, Google использует технологии на основе искусственного интеллекта. Переводы от ИИ могут содержать ошибки.

Как получать сообщения в веб-приложениях

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

iOS+ Android Веб Flutter Unity C++

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

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

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

Важно! В этом руководстве упоминается инициализация Firebase в service worker. Чтобы использовать модульный SDK в сервисном работнике, необходимо объединить файл сервисного работника, поскольку модули ES относительно новые и не поддерживаются повсеместно (см. модули ES в сервисных работниках). Если вы не хотите объединять файл service worker, можно использовать 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

Как обрабатывать сообщения, когда веб-приложение работает в фоновом режиме

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

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

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

    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, рекомендуется добавить полезную нагрузку уведомления во все сообщения с данными. Вы также можете обрабатывать уведомления с помощью service worker.

Чтобы узнать больше о различиях между уведомлениями и сообщениями с данными, ознакомьтесь со статьей Типы сообщений.

Как задать параметры уведомлений в скрипте service worker

Для сообщений с данными можно задать параметры уведомлений в сервисном работнике. Сначала инициализируйте приложение в 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);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