Начните работу с Firebase Cloud Messaging в веб-приложениях.

В этом руководстве описано, как начать работу с Firebase Cloud Messaging в ваших веб-приложениях, чтобы вы могли надежно отправлять сообщения.

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

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

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

Добавьте и инициализируйте SDK FCM

1. Если вы еще этого не сделали, установите Firebase JS SDK и инициализируйте Firebase .

2. Добавьте JS SDK Firebase Cloud Messaging и инициализируйте Firebase Cloud Messaging :

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

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

If you are using FCM for web and want to upgrade to SDK 6.7.0 or later, you must enable the FCM Registration API for your project in the Google Cloud console. When you enable the API, make sure you are logged in to the Google Cloud console with the same Google Account you use for Firebase, and make sure to select the correct project. New projects adding the FCM SDK have this API enabled by default.

Настройка учетных данных для веб-доступа с помощью FCM

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

Сгенерируйте новую пару ключей.

1. В консоли Firebase перейдите по адресу settings > Общие . Затем перейдите на вкладку «Облачные сообщения» .

2. Перейдите в раздел «Веб-настройка» .

3. На вкладке «Сертификаты Web Push» нажмите «Сгенерировать пару ключей» .

   В консоли отображается уведомление о том, что пара ключей была сгенерирована, а также строка открытого ключа и дата добавления.

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

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

1. В консоли Firebase перейдите по адресу settings > Общие . Затем перейдите на вкладку «Облачные сообщения» .

2. Перейдите в раздел «Веб-настройка» .

3. На вкладке «Сертификаты Web Push» найдите и выделите текст ссылки: «Импортировать существующую пару ключей» .

4. В диалоговом окне «Импорт пары ключей » укажите свой открытый и закрытый ключи в соответствующих полях и нажмите «Импорт» .

   В консоли отображается строка открытого ключа и дата добавления.

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

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

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

import { getMessaging, register } from "firebase/messaging";

const messaging = getMessaging();
// Add the public key generated from the Firebase console here.
register(messaging, {vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');
    }
  });
}

import { getMessaging, onRegistered, register } from "firebase/messaging";

const messaging = getMessaging();

// 1. Implement callback to receive the Firebase installation ID upon registration.
// This is triggered every time a manual register() finishes, a FID change
// is detected, or a pushsubscriptionchange event is fired.
onRegistered(messaging, (installationId) => {
  console.log('Registered installation ID:', installationId);

  // Send the Firebase Installation ID to your app server and update the UI if needed.
  sendRegistrationToServer(installationId);
});

// 2. You can also manually trigger registration (recommended on app startup)
register(messaging, {
  vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>'
}).then(() => {
  // Success! The Firebase Installation ID can be used to target messages to this app
  // instance and will be delivered asynchronously to your onRegistered() callback.
}).catch((err) => {
  console.error('An error occurred while registering', err);
});
messaging_register.js

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

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