Узнайте, как использовать функцию Firebase Cloud Messaging (FCM) для включения push-уведомлений в приложение React.

Push-уведомления позволяют приложениям отправлять своевременные обновления, оповещения или персонализированные сообщения непосредственно на устройства пользователей, независимо от того, активно ли они используют приложение. Эти уведомления обеспечивают постоянное вовлечение пользователей и мгновенное подключение.

В случае веб-приложений браузер сначала фиксирует эти уведомления, а затем перенаправляет их соответствующему приложению.

Настроить проект Firebase

Выполните следующие действия, чтобы начать работу и настроить проект Firebase:

  1. Направляйтесь к Консоль разработчика Firebase, войдите в систему, используя свой адрес электронной почты Google, и нажмите кнопку Перейти к консоли кнопку для перехода на страницу обзора консоли.
  2. На странице обзора консоли щелкните значок Создать проект кнопку для создания нового проекта. Затем укажите название проекта.
  3. После успешного создания проекта перейдите на страницу обзора проекта. Вам необходимо зарегистрировать приложение в Firebase для генерации ключей API. Чтобы зарегистрировать приложение, нажмите кнопку
    instagram viewer
    Интернет значок, укажите имя приложения и щелкните значок Зарегистрировать приложение кнопка.
  4. Скопируйте код конфигурации Firebase после регистрации вашего приложения React.

Настроить службу Firebase Cloud Messaging (FCM)

После того, как вы зарегистрировали свое приложение в Firebase, следующим шагом будет настройка службы Firebase Cloud Messaging (FCM).

  1. Перейдите к Настройки проекта страница.
  2. Далее нажмите на Облачный обмен сообщениями вкладка на Настройки проекта страница. Firebase Cloud Messaging использует пары ключей идентификации приложения для подключения к внешним службам push-уведомлений. По этой причине вам необходимо сгенерировать свой уникальный идентификационный ключ.
  3. На Облачный обмен сообщениями настройки, перейдите к Веб-конфигурация раздел и нажмите кнопку Создать пару ключей кнопку для создания вашего уникального ключа.

Настройте приложение React

Первый, создать приложение React. После установки продолжайте и установите огневая база и реагировать-горячий-тост пакеты, которые вы будете использовать для реализации push-уведомлений в приложении React.

npm установить firebase

Вы можете найти исходный код этого проекта в этом Репозиторий GitHub.

Настройте Firebase и службу облачных сообщений

Отправляйтесь к своему Настройки проекта на странице консоли разработчика и скопируйте предоставленный объект конфигурации Firebase. в источник каталог, создайте новый firebase.js файл и добавьте следующий код.

Импортировать {инициализировать приложение} от"firebase/приложение";
Импортировать {getMessaging, getToken, onMessage} от'firebase/обмен сообщениями';
константа firebaseConfig = {
 ключ API: "",
 authDomain: "",
 идентификатор проекта: "",
 хранилищеВедро: "",
 идентификатор отправителя сообщений: "",
 идентификатор приложения: ""
};
константа приложение = InitializeApp (firebaseConfig);
константа сообщения = getMessaging (приложение);

Замените выше firebaseconfig объект с тем, который вы скопировали из Настройки проекта страница. Этот код настроит экземпляр Firebase и инициализирует объект облачных сообщений, чтобы включить функции FCM в вашем приложении.

Управление запросами разрешений пользователей для уведомлений

Чтобы разрешить приложениям React получать push-уведомления от службы облачных сообщений Firebase, вам необходимо обрабатывать разрешения пользователей.

Это включает в себя определение и вызов просить разрешение метод, предоставляемый объектом обмена сообщениями, который вы предварительно настроили. Это гарантирует, что вы правильно обработаете ответы пользователя на запросы разрешений уведомлений.

Добавьте следующий код в firebase.js файл после инициализации объекта обмена сообщениями.

экспортконстанта разрешение запроса = () => {
консоль.бревно("Запрос разрешения пользователя...");
 Notification.requestPermission().then((разрешение) => {


если (разрешение "предоставленный") {


консоль.бревно(«Разрешение пользователя на уведомление предоставлено».); 
возвращаться getToken (обмен сообщениями, { vapidKey: `Notification_key_pair` })
 .затем((текущийтокен) => {


если (текущий токен) {


консоль.бревно('Токен клиента:', текущийтокен);
 } еще {

консоль.бревно(«Не удалось сгенерировать токен регистрации приложения».);
 }
 })
 .ловить((ошибаться) => {


консоль.бревно(«Произошла ошибка при запросе на получение токена»., ошибся);
 });
 } еще {


консоль.бревно(«Разрешение пользователя отклонено».);
 }
 });


 }
просить разрешение();

Предоставленный код запрашивает разрешение пользователя на уведомления и обрабатывает ответ на разрешение. Если разрешение предоставлено, он переходит к получению регистрационного токена для приложения, используя получитьтокен функция.

Токен регистрации служит идентификатором устройства или браузера, получающего уведомления. Затем вы можете использовать этот токен для настройки кампании уведомлений на странице настроек Firebase Cloud Messaging.

Убедитесь, что вы заменили заполнитель Notification_key_pair с фактической парой ключей, которую вы сгенерировали ранее в Веб-конфигурация раздел.

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

Для обработки любого типа входящих уведомлений необходимо настроить прослушиватели сообщений для отслеживания входящих уведомлений и функций обратного вызова для запуска любых событий обмена сообщениями.

В вашей firebase.js файл, добавьте следующий код.

экспортконстанта onMessageListener = () =>
новыйОбещать((решать) => {
 onMessage (обмен сообщениями, (полезная нагрузка) => {
 разрешение (полезная нагрузка);
 });
});

Эта функция настраивает прослушиватель сообщений специально для push-уведомлений. onMessage функционировать внутри onMessageListener срабатывает всякий раз, когда приложение получает push-уведомление и находится в фокусе.

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

Определить работника службы обмена сообщениями Firebase

FCM требует обмена сообщениями Firebase сервисный работник для обработки входящих push-уведомлений.

Service Worker — это файл JavaScript, который работает в фоновом режиме и обрабатывает push-уведомления. приложение для получения и отображения уведомлений, даже если пользователь закрыл приложение или переключился на другую вкладку или окно.

в /public каталог, создайте новый firebase-сообщения-sw.js файл и включите следующий код.

импортскрипты(" https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js");
импортскрипты(" https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js");
//объект конфигурации Firebase 
константа firebaseConfig = {
"информация о конфигурации"
 };


firebase.initializeApp(firebaseConfig);
константа обмен сообщениями = firebase.messaging();


сообщения.onBackgroundMessage(функция(полезная нагрузка) {
консоль.бревно(«Получено фоновое сообщение», полезная нагрузка);
константа уведомлениеЗаголовок = полезная нагрузка.уведомление.заголовок;
константа уведомлениеOptions = {
 тело: полезная нагрузка.уведомление.тело,
 };
 self.registration.showNotification (notificationTitle,
 параметры уведомления);
});

Этот код настраивает сервис-воркер для Firebase Cloud Messaging в приложении React, что позволяет обрабатывать и отображать уведомления.

Создайте компонент уведомления

Создать новый компоненты/Notification.js файл в /src каталог и добавьте следующий код.

Импортировать Реагировать, {useState, useEffect} от«реагировать»;
Импортировать { Тостер, тост } от«реагировать на горячие тосты»;
Импортировать { requestPermission, onMessageListener } от'../база огня';
функцияУведомление() {
константа [уведомление, setNotification] = useState({ заголовок: '', тело: '' });
 использоватьЭффект(() => {
 просить разрешение();
константа отписаться = onMessageListener (). затем ((полезная нагрузка) => {
 установитьУведомление({
 title: полезная нагрузка?.notification?.title,
 тело: полезная нагрузка?.уведомление?.тело,
 });
 тост.успех(`${полезная нагрузка?.уведомление?.название}: ${полезная нагрузка?.уведомление?.тело}`, {
 продолжительность: 60000, 
 позиция: 'в правом верхнем углу', раздел из страница браузера
 });
});
возвращаться() => {
 отписаться.поймать((ошибаться) =>консоль.бревно('неуспешный: ', ошибся));
 };
 }, []);
возвращаться (



 </div>
 );
}
экспортпо умолчанию Уведомление;

Этот код определяет компонент, который обрабатывает push-уведомления. Он использует реагировать-горячий-тост библиотека для отображения уведомлений пользователю.

Компонент запрашивает разрешение пользователя, прослушивает входящие сообщения, используя onMessageListener функции и по умолчанию отображает всплывающее уведомление с полученным заголовком и текстом длительностью одну минуту в правом верхнем углу страницы браузера. Вы можете дополнительно настроить уведомление с помощью официального реагировать-горячий-тост документация и свойство позиции CSS.

Наконец, обновите App.js файл для импорта Уведомление компонент.

Импортировать'./Приложение.css';
Импортировать Уведомление от'./компоненты/уведомление';
функцияПриложение() {
возвращаться (
"Приложение">
"Заголовок приложения"> 

 </header> 
 </div>
 );
}
экспортпо умолчанию Приложение;

Протестируйте функцию push-уведомлений

Идите вперед и раскрутите сервер разработки и откройте http://locahlhost: 3000 в браузере для доступа к приложению. Вы должны получить следующее всплывающее окно, чтобы разрешить приложению получать уведомления.

Нажмите Позволять. токен клиента должны быть сгенерированы и зарегистрированы в консоль браузера. Вы будете использовать токен для отправки уведомлений в ваше приложение React.

Скопируйте токен клиента и перейдите в консоль разработчика Firebase Обзор проекта страница. Нажмите на Облачный обмен сообщениями карточка под Расширяйте и вовлекайте свою аудиторию раздел.

Нажмите Создайте свою первую кампанию, выбирать Уведомления Firebase, а также укажите заголовок и сообщение для вашего уведомления. Под Предварительный просмотр устройства раздел, нажмите Отправить тестовое сообщение.

Вставьте и добавьте токен клиента в следующее всплывающее окно и нажмите Тест для отправки push-уведомления.

Если вы находитесь в приложении, вы получите push-уведомление. Если нет, вы получите фоновое уведомление.

Отправка push-уведомлений с помощью службы облачных сообщений Firebase

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

Используя API-интерфейсы Firebase Cloud Messaging, вы можете эффективно доставлять своевременные обновления и персонализированные сообщения в свои приложения React.