Catch up on highlights from Firebase at Google I/O 2023. Learn more

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

FCM JavaScript API позволяет получать уведомления в веб-приложениях, работающих в браузерах, поддерживающих 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:

Модульный веб-API

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);

Веб-API с пространством имен

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. Импортируйте свой существующий открытый и закрытый ключ в безопасном кодированном виде 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-messaging-sw.js . Если у вас еще нет файла firebase-messaging-sw.js , создайте пустой файл с таким именем и поместите его в корень вашего домена перед получением токена. Вы можете добавить значимое содержимое в файл позже в процессе установки клиента.

Чтобы получить текущий токен:

Web modular API

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 namespaced API

// 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):