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

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


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

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

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

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

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

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

  2. Добавьте JS SDK Firebase Cloud Messaging и инициализируйте 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, и выберите правильный проект. В новых проектах, добавляющих SDK FCM , этот API включен по умолчанию.

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

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

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

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

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

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

  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- 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 Notification и нажмите «Создать» .
  5. В противном случае, на вкладке «Кампании» выберите «Новая кампания» , а затем «Уведомления» .
  6. Введите текст сообщения.
  7. В правой панели выберите пункт «Отправить тестовое сообщение» .
  8. В поле « Добавить регистрационный токен FCM введите свой регистрационный токен.
  9. Выберите тест .

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

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

После завершения этапов настройки, вот несколько вариантов для дальнейшей работы с FCM для веб-приложений (JavaScript):