Как начать работу с 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, которые позволяют указать получателя уведомлений.

Как добавить и инициализировать 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 или более поздней версии, вам необходимо включить 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) одним из следующих способов: