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

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


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

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

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

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

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

  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 или более поздней, вам необходимо включить FCM Registration API для своего проекта в консоли Google Cloud. При включении API убедитесь, что вы вошли в консоль Google Cloud с тем же аккаунтом Google, который используете для Firebase, и выбрали правильный проект. В новых проектах, в которых используется SDK FCM, этот API включен по умолчанию.

Как настроить учетные данные для сайта с помощью FCM

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

Как создать новую пару ключей

  1. В консоли Firebase выберите Настройки > Общие. Затем нажмите на вкладку Cloud Messaging.

  2. Перейдите в раздел Веб-конфигурация.

  3. На вкладке Сертификаты Web Push нажмите Создать пару ключей.

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

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

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

  1. В консоли Firebase выберите Настройки > Общие. Затем нажмите на вкладку Cloud Messaging.

  2. Перейдите в раздел Конфигурация сайта.

  3. На вкладке Сертификаты для push-уведомлений найдите и выберите текст ссылки импортировать существующую пару ключей.

  4. В диалоговом окне Импортировать пару ключей укажите открытый и закрытый ключи в соответствующих полях и нажмите Импортировать.

    В консоли отобразится строка открытого ключа и дата его добавления.

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

Как настроить веб-учетные данные в приложении

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

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

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

Запросите разрешение на уведомления и настройте service worker

Если вам нужно настроить таргетинг на экземпляр приложения с помощью FCM, сначала запросите у пользователя разрешение на уведомления с помощью 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, создайте пустой файл с таким названием и поместите его в корневой каталог домена перед регистрацией. Вы сможете добавить в файл нужный контент позже, когда будете настраивать клиент.

Как получить доступ к идентификатору установки Firebase

Чтобы зарегистрировать экземпляр приложения и получить идентификатор установки Firebase (FID) для таргетинга сообщений, выполните следующие действия: 

import { getMessaging, onRegistered, register } from "firebase/messaging";

const messaging = getMessaging();

// 1. Implement callback to receive the Firebase installation ID upon registration.
// This is triggered every time a manual register() finishes, a FID change
// is detected, or a pushsubscriptionchange event is fired.
onRegistered(messaging, (installationId) => {
  console.log('Registered installation ID:', installationId);

  // Send the Firebase Installation ID to your app server and update the UI if needed.
  sendRegistrationToServer(installationId);
});

// 2. You can also manually trigger registration (recommended on app startup)
register(messaging, {
  vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>'
}).then(() => {
  // Success! The Firebase Installation ID can be used to target messages to this app
  // instance and will be delivered asynchronously to your onRegistered() callback.
}).catch((err) => {
  console.error('An error occurred while registering', err);
});

Обратный вызов onRegistered активируется в трех случаях:

  1. Каждый раз, когда завершается звонок, сделанный вручную register().
  2. Обнаружено изменение идентификатора установки Firebase.
  3. Срабатывает событие pushsubscriptionchange.

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

Как получить токен регистрации (поддержка прекращена)

Чтобы получить текущий токен, выполните следующие действия:

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

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

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

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

  1. Установите и запустите приложение на целевом устройстве. На устройствах Apple вам нужно будет принять запрос на разрешение получать удаленные уведомления.

  2. Убедитесь, что приложение работает в фоновом режиме.

  3. В консоли Firebase перейдите в раздел DevOps & Engagement (DevOps и взаимодействие) > Messaging (Обмен сообщениями).

  4. Создать кампанию

    • Если это ваше первое сообщение:

      1. Выберите Создать первую кампанию.

      2. Выберите Уведомления Firebase и нажмите Создать.

    • Если у вас уже есть кампании:

      1. На вкладке Кампании выберите Новая кампания.

      2. Нажмите Уведомления.

  5. Введите текст сообщения.

  6. На панели справа выберите Отправить тестовое сообщение.

  7. В поле Добавить токен регистрации FCM введите токен регистрации.

  8. Нажмите Проверить.

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

Дальнейшие действия

После того как вы выполните все действия по настройке, вы можете продолжить работу с FCM для сайтов (JavaScript) одним из следующих способов: