Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Настройка клиентского приложения 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 . Если разрешение на уведомление не было предоставлено, этот метод запросит у пользователя разрешения на уведомление. В противном случае он возвращает токен или отклоняет обещание из-за ошибки.

Служба обмена сообщений требует 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):