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