Catch up on everthing we announced at this year's Firebase Summit. Learn more

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

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

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

Чтобы начать работу с FCM JavaScript API, вам необходимо добавить Firebase в свое веб-приложение и добавить логику для доступа к токенам регистрации.

Добавьте Firebase в свой проект JavaScript

Если вы еще не сделали, добавьте Firebase к вашему проекту JavaScript .

Если вы используете ТСМ для веб - сайтов и хотите обновить SDK 6.7.0 или более поздней версии, необходимо включить FCM регистрации API для вашего проекта в Google Cloud Console. При включении API убедитесь, что вы вошли в Cloud Console с той же учетной записью Google, которую используете для Firebase, и убедитесь, что выбрали правильный проект. В новых проектах, добавляющих FCM SDK, этот API включен по умолчанию.

Настроить веб-учетные данные с помощью FCM

Веб-интерфейс FCM использует веб-учетные данные, называемые «добровольной идентификацией сервера приложений» или «ключами VAPID», для авторизации запросов на отправку в поддерживаемые веб-службы push. Чтобы подписать свое приложение на push-уведомления, вам необходимо связать пару ключей с вашим проектом Firebase. Вы можете создать новую пару ключей или импортировать существующую пару ключей через Firebase Console.

Создайте новую пару ключей

  1. Откройте облако сообщений вкладки панели Firebase Настройки консоли и перейдите к разделу веб - конфигурации.
  2. На вкладке Web Push - сертификатов, нажмите кнопку Генерировать пары ключей. Консоль отображает уведомление о том, что пара ключей была сгенерирована, и отображает строку открытого ключа и дату добавления.

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

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

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

Инструкции о том , как добавить ключ к вашему приложению, см Настройка веб - учетных данных в приложении . Для получения более подробной информации о формате ключи и как создавать их, видеть ключи сервера приложений .

Получить объект обмена сообщениями

Веб-версия 9

import { getMessaging } from "firebase/messaging";

const messaging = getMessaging();

Веб-версия 8

const messaging = firebase.messaging();

Настройте веб-учетные данные в своем приложении

Метод getToken(): Promise<string> позволяет FCM использовать учетные данные ключа пресных при отправке запросов сообщений на различные кнопочные услуги. Используя ключ, сгенерированный или импортированные в соответствии с инструкциями в Настройка веб - мандатной с ТСМ , добавьте его в код после того, как объект сообщений извлекается:

// Add the public key generated from the console here.
messaging.getToken({vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

Доступ к токену регистрации

Если вам необходимо получить текущую регистрацию маркера для экземпляра приложения, вызовите getToken . Если разрешение на уведомление не было предоставлено, этот метод запросит у пользователя разрешения на уведомление. В противном случае он возвращает токен или отклоняет обещание из-за ошибки.

FCM требует firebase-messaging-sw.js файла. Если у вас уже есть firebase-messaging-sw.js файл, создайте пустой файл с таким именем и поместить его в корневом каталоге вашего домена перед извлечением токена. Вы можете добавить значимое содержимое в файл позже в процессе настройки клиента.

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

Веб-версия 9

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);
  // ...
});

Веб-версия 8

// 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);
  // ...
});

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

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

После того, как вы выполнили шаги настройки, вот несколько вариантов для продвижения вперед с FCM для Интернета (JavaScript):