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

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

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

Чтобы начать работу с API JavaScript FCM , вам необходимо добавить 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. Откройте вкладку «Облачные сообщения» на панели «Настройки консоли Firebase и прокрутите до раздела «Веб-конфигурация» .
  2. На вкладке Сертификаты Web Push нажмите «Создать пару ключей» . На консоли отображается уведомление о том, что пара ключей была создана, а также отображается строка открытого ключа и дата добавления.

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

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

  1. Откройте вкладку «Облачные сообщения» на панели «Настройки консоли 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 для Интернета (JavaScript):