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

Выберите платформу: iOS+ Android Веб Flutter Unity C++


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

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

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

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

Чтобы получать событие onMessage, в приложении необходимо определить сервис-воркер Firebase Cloud Messaging в файле 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);

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

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

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

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

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

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

Для уведомлений, отправленных с сервера приложения, 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

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

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

Чтобы задать настройки, вызовите 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);
});

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

Рекомендации по работе с уведомлениями

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

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