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

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

FCM SDK поддерживается только на страницах, работающих по протоколу HTTPS. Это связано с использованием сервис-воркеров, которые доступны только на сайтах HTTPS. Если вам нужен провайдер, рекомендуем Firebase 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 Console. При включении 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

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

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

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