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

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

FCM SDK поддерживается только на страницах, обслуживаемых через HTTPS. Это связано с использованием service worker, которые доступны только на сайтах 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 использует веб-учетные данные, называемые «Voluntary Application Server Identification» или ключами «VAPID», для авторизации отправки запросов на поддерживаемые веб-службы push-уведомлений. Чтобы подписать приложение на push-уведомления, вам необходимо связать пару ключей с вашим проектом Firebase. Вы можете либо сгенерировать новую пару ключей, либо импортировать существующую пару ключей через Firebase Console.

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

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

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

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

  1. Откройте вкладку «Cloud Messaging» на панели настроек консоли Firebase и прокрутите до раздела «Web-конфигурация» .
  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 для Web (JavaScript):