API JavaScript FCM позволяет получать сообщения уведомлений в веб-приложениях, работающих в браузерах, поддерживающих Push API . Сюда входят версии браузера, перечисленные в этой матрице поддержки , и расширения Chrome через Push API.
FCM SDK поддерживается только на страницах, обслуживаемых по протоколу HTTPS. Это связано с использованием сервис-воркеров, которые доступны только на сайтах HTTPS. Если вам нужен провайдер, рекомендуется использовать хостинг Firebase , который предоставляет бесплатный уровень HTTPS-хостинга в вашем собственном домене.
Чтобы начать работу с API JavaScript FCM , вам необходимо добавить Firebase в свое веб-приложение и добавить логику для доступа к токенам регистрации.
Добавьте и инициализируйте FCM SDK.
Если вы еще этого не сделали, установите Firebase JS SDK и инициализируйте Firebase .
Добавьте 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.
Создайте новую пару ключей
- Откройте вкладку «Облачные сообщения» на панели «Настройки консоли Firebase и прокрутите до раздела «Веб-конфигурация» .
- На вкладке Сертификаты Web Push нажмите «Создать пару ключей» . На консоли отображается уведомление о том, что пара ключей была создана, а также строка открытого ключа и дата добавления.
Импортировать существующую пару ключей
Если у вас есть существующая пара ключей, которую вы уже используете со своим веб-приложением, вы можете импортировать ее в FCM , чтобы иметь доступ к существующим экземплярам веб-приложения через API-интерфейсы FCM . Чтобы импортировать ключи, у вас должен быть доступ на уровне владельца к проекту Firebase. Импортируйте существующий открытый и закрытый ключ в безопасной закодированной форме URL-адреса Base64:
- Откройте вкладку «Облачные сообщения» на панели «Настройки консоли Firebase и прокрутите до раздела «Веб-конфигурация» .
- На вкладке «Сертификаты Web Push» найдите и выберите текст ссылки «Импортировать существующую пару ключей».
- В диалоговом окне «Импорт пары ключей» укажите открытый и закрытый ключи в соответствующих полях и нажмите «Импортировать» . Консоль отображает строку открытого ключа и дату добавления.
Инструкции о том, как добавить ключ в ваше приложение, см. в разделе Настройка веб-учетных данных в вашем приложении . Дополнительные сведения о формате ключей и способах их создания см. в разделе Ключи сервера приложений .
Настройте веб-учетные данные в своем приложении
Метод 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); // ... });
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); // ... });
Получив токен, отправьте его на сервер приложений и сохраните предпочтительным способом.
Следующие шаги
После того, как вы выполнили шаги настройки, вот несколько вариантов дальнейшего использования FCM для Интернета (JavaScript):
- Добавьте в свое приложение функциональность для получения сообщений .
- Попробуйте одно из наших руководств: «Отправьте свое первое сообщение в фоновое приложение» или «Отправьте сообщения на несколько устройств» .
- Просмотрите полный образец на GitHub .
- Просмотрите справочник по JavaScript .
- Посмотрите видеопошаговое руководство по внедрению API.