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

Выберите платформу:

iOS+ Android Web Flutter Unity C++

This guide describes how to get started with Firebase Cloud Messaging in your Web client apps so that you can reliably send messages.

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

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

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

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

1. If you haven't already, install the Firebase JS SDK and initialize Firebase .

2. Add the Firebase Cloud Messaging JS SDK and initialize Firebase Cloud Messaging :

Web

Learn more about the tree-shakeable modular web API and upgrade from the namespaced 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);

Web

Learn more about the tree-shakeable modular web API and upgrade from the namespaced 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 . При включении API убедитесь, что вы вошли в консоль Google Cloud с той же учетной записью Google, которую используете для Firebase, и выберите правильный проект. В новых проектах, добавляющих SDK FCM , этот API включен по умолчанию.

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

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

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

1. В консоли Firebase перейдите по адресу Settings > General . Then, click the Cloud Messaging tab

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

3. In the Web Push certificates tab, click Generate Key Pair .

   The console displays a notice that the key pair was generated, and it displays the public key string and date added.

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

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

1. В консоли Firebase перейдите по адресу Settings > General . Then, click the Cloud Messaging tab

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

3. In the Web Push certificates tab, find and select the link text: import an existing key pair .

4. In the Import a key pair dialog, provide your public and private keys in the corresponding fields and click Import .

   The console displays the public key string and date added.

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

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

Метод 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"});

Note: If you are using the deprecated token APIs , you should pass the VAPID key to getToken() instead of register() .

Request notification permission and configure the service worker

Когда вам нужно настроить FCM для конкретного экземпляра приложения, сначала запросите у пользователя разрешения на отправку уведомлений с помощью Notification.requestPermission() . При вызове, как показано, возвращается состояние разрешений, если они предоставлены:

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

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

Получите доступ к идентификатору установки Firebase.

Внимание: Не используйте одновременно API идентификаторов установки Firebase и устаревшие API токенов регистрации для управления регистрацией. Мы рекомендуем использовать идентификаторы установки Firebase (FID) для сегментации или таргетинга экземпляров вашего приложения.

Tip: See Best practices for FCM registration management for tips on managing registrations.

To register the app instance and retrieve the Firebase Installation ID (FID) for message targeting:

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

The onRegistered callback is triggered in three scenarios:

1. Каждый раз, когда завершается ручной вызов функции register() .
2. Обнаружено изменение идентификатора установки Firebase.
3. Срабатывает событие pushsubscriptionchange .

After you've obtained the Firebase Installation ID, send it to your app server and store it using your preferred method.

Воспользуйтесь регистрационным токеном (устаревшая функция).

Caution: This feature is deprecated. Use Firebase Installation IDs , as this method will be removed in a future release.

Tip: See Best practices for FCM registration management for tips on managing registrations.

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

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

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

After you've obtained the token, send it to your app server and store it using your preferred method.

Отправить тестовое уведомление

1. Install and run the app on the target device. On Apple devices, you'll need to accept the request for permission to receive remote notifications.

2. Check that the app is in the background on the device.

3. In the Firebase console, go to DevOps & Engagement > Messaging

4. Создайте кампанию.

   • Если это ваше первое сообщение:

     1. Выберите «Создать свою первую кампанию» .

     2. Select Firebase Notification messages and select Create .

   • Если вы ранее создавали кампании:

     1. На вкладке «Кампании» выберите «Новая кампания» .

     2. Нажмите «Уведомления» .

5. Введите текст сообщения.

6. В правой панели выберите пункт «Отправить тестовое сообщение» .

7. In the field labeled Add an FCM registration token , enter your registration token.

8. Выберите тест .

After you select Test , the targeted client device, with the app in the background, should receive the notification.

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

After you have completed the setup steps, here are a few options for moving forward with FCM for Web (JavaScript):

• Отправляйте сообщения на устройства
• Получайте сообщения в JavaScript-клиенте.
• Отправляйте сообщения по темам