Начните работу с Firebase Cloud Messaging


В этом кратком руководстве описывается, как настроить Firebase Cloud Messaging в мобильных и веб-клиентских приложениях для надежной отправки сообщений. Сведения о серверных средах см. в разделе «Ваша серверная среда» и FCM .

Настройка клиентского приложения JavaScript Firebase Cloud Messaging

API JavaScript FCM позволяет получать уведомления в веб-приложениях, работающих в браузерах, поддерживающих Push API . Это относится к версиям браузеров, перечисленным в этой матрице поддержки , и расширениям Chrome, использующим Push API.

FCM SDK поддерживается только на страницах, работающих по протоколу HTTPS. Это связано с использованием сервис-воркеров, которые доступны только на сайтах HTTPS. Если вам нужен провайдер, рекомендуем Firebase App Hosting , который предоставляет бесплатный HTTPS-хостинг на вашем домене.

Чтобы начать работу с FCM JavaScript API, вам необходимо добавить Firebase в свое веб-приложение и добавить логику для доступа к токенам регистрации.

Добавьте и инициализируйте FCM SDK

  1. Если вы еще этого не сделали, установите Firebase JS SDK и инициализируйте Firebase .

  2. Добавьте Firebase Cloud Messaging JS SDK и инициализируйте Firebase Cloud Messaging :

Web

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = getMessaging(app);

Web

import firebase from "firebase/compat/app";
import "firebase/compat/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = firebase.messaging();

Если вы используете FCM для веб-приложений и хотите перейти на SDK 6.7.0 или более позднюю версию, необходимо включить API регистрации FCM для вашего проекта в Google Cloud . При включении API убедитесь, что вы вошли в Cloud Console с той же учётной записью Google, что и для Firebase, и выбрали правильный проект. В новых проектах, добавляющих FCM SDK, этот API включён по умолчанию.

Настройка веб-учетных данных с помощью FCM

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

Сгенерировать новую пару ключей

  1. Откройте вкладку Cloud Messaging на панели настроек консоли Firebase и перейдите в раздел Веб-конфигурация .
  2. На вкладке «Сертификаты Web Push» нажмите «Сгенерировать пару ключей» . В консоли отобразится уведомление о создании пары ключей, а также строка открытого ключа и дата добавления.

Импортировать существующую пару ключей

Если у вас есть пара ключей, которую вы уже используете в своём веб-приложении, вы можете импортировать её в FCM , чтобы получить доступ к существующим экземплярам веб-приложения через API FCM . Для импорта ключей вам необходим доступ на уровне владельца к проекту Firebase. Импортируйте существующие открытый и закрытый ключи в формате, безопасном для URL, закодированном в формате base64:

  1. Откройте вкладку Cloud Messaging на панели настроек консоли Firebase и перейдите в раздел Веб-конфигурация .
  2. На вкладке Сертификаты Web Push найдите и выберите текст ссылки: импорт существующей пары ключей .
  3. В диалоговом окне «Импорт пары ключей» введите открытый и закрытый ключи в соответствующие поля и нажмите кнопку «Импорт» . В консоли отобразится строка открытого ключа и дата его добавления.

Инструкции по добавлению ключа в приложение см. в разделе Настройка веб-учётных данных в приложении . Дополнительную информацию о формате ключей и их генерации см. в разделе Ключи сервера приложений .

Настройте веб-учетные данные в вашем приложении

Метод getToken(): Promise<string> позволяет FCM использовать ключ VAPID при отправке запросов сообщений различным push-сервисам. Используя ключ, сгенерированный или импортированный в соответствии с инструкциями из статьи «Настройка веб-учётных данных с помощью FCM , добавьте его в код после получения объекта сообщения: 

import { getMessaging, getToken } from "firebase/messaging";

const messaging = getMessaging();
// Add the public key generated from the console here.
getToken(messaging, {vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

Доступ к регистрационному токену

Когда вам нужно получить текущий токен регистрации для экземпляра приложения, сначала запросите у пользователя разрешения на уведомления с помощью Notification.requestPermission() . При вызове, как показано, этот метод возвращает токен, если разрешение предоставлено, или отклоняет обещание, если оно отклонено: 

function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');

FCM требуется файл firebase-messaging-sw.js . Если у вас ещё нет файла firebase-messaging-sw.js , создайте пустой файл с таким именем и поместите его в корневой каталог домена перед получением токена. Вы можете добавить содержательную информацию в файл позже, в процессе настройки клиента.

Чтобы получить текущий токен:

Web 

import { getMessaging, getToken } from "firebase/messaging";

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
const messaging = getMessaging();
getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});
messaging_get_token.js

Web 

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken({ vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});
index.js

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

Отправить тестовое уведомление

  1. Установите и запустите приложение на целевом устройстве. На устройствах Apple вам потребуется принять запрос на разрешение получать удалённые уведомления.
  2. Убедитесь, что приложение работает в фоновом режиме на устройстве.
  3. В консоли Firebase откройте страницу «Сообщения» .
  4. Если это ваше первое сообщение, выберите Создать свою первую кампанию .
    1. Выберите Уведомления Firebase и нажмите Создать .
  5. В противном случае на вкладке «Кампании» выберите «Новая кампания» , а затем «Уведомления» .
  6. Введите текст сообщения.
  7. Выберите Отправить тестовое сообщение на правой панели.
  8. В поле Добавить регистрационный токен FCM введите свой регистрационный токен.
  9. Выберите Тест .

После выбора Теста целевое клиентское устройство с приложением в фоновом режиме должно получить уведомление.

Следующие шаги

После завершения шагов настройки вот несколько вариантов дальнейшей работы с FCM for Web (JavaScript):