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

Push известията позволяват на приложенията да изпращат навременни актуализации, предупреждения или персонализирани съобщения директно до устройствата на потребителите, независимо от активното им използване на приложението. Тези известия гарантират непрекъсната ангажираност на потребителите и незабавна свързаност.

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

Настройте проект във Firebase

Следвайте стъпките по-долу, за да започнете и да настроите проект във Firebase:

  1. Насочете се към Конзола за разработчици на Firebase, влезте с вашия имейл адрес в Google и щракнете върху Отидете на конзолата бутон за навигация до страницата с общ преглед на конзолата.
  2. На страницата с общ преглед на конзолата щракнете върху Създайте проект бутон за създаване на нов проект. След това въведете името на проекта.
    3. instagram viewer
  3. След като проектът е създаден успешно, отворете страницата с преглед на проекта. Трябва да регистрирате приложение във Firebase, за да генерирате API ключове. За да регистрирате приложение, щракнете върху Мрежа икона, въведете името на приложението и щракнете върху Регистрирайте приложение бутон.
  4. Копирайте конфигурационния код на Firebase, след като регистрирате вашето приложение React.

Конфигурирайте услугата Firebase Cloud Messaging (FCM).

След като регистрирате приложението си във Firebase, следващата стъпка е да конфигурирате услугата Firebase Cloud Messaging (FCM).

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

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

първо, създайте приложение React. След като го инсталирате, продължете и инсталирайте firebase и реагират-горещ-тост пакети, които ще използвате за прилагане на насочени известия в приложението React.

npm инсталирайте firebase react-hot-toast

Можете да намерите изходния код на този проект тук GitHub хранилище.

Конфигурирайте Firebase и услугата за съобщения в облак

Отидете до вашия Настройки на проекта в конзолата за разработчици и копирайте предоставения конфигурационен обект на Firebase. В src директория, създайте нова firebase.js файл и добавете следния код.

импортиране { initializeApp } от"firebase/приложение";
импортиране { getMessaging, getToken, onMessage } от'firebase/съобщения';
конст firebaseConfig = {
 apiKey: "",
 authDomain: "",
 projectId: "",
 StorageBucket: "",
 messagingSenderId: "",
 appId: ""
};
конст приложение = initializeApp (firebaseConfig);
конст съобщения = getMessaging (приложение);

Заменете горното firebaseConfig обект с този, който сте копирали от Настройки на проекта страница. Този код ще настрои екземпляра на Firebase и ще инициализира обекта за съобщения в облак, за да активира функционалността на FCM във вашето приложение.

Управление на заявките за потребителски разрешения за известия

За да позволите на приложенията на React да получават насочени известия от услугата за облачни съобщения на Firebase, трябва да управлявате потребителските разрешения.

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

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

износконст requestPermission = () => {
конзола.log(„Иска се потребителско разрешение...“);
 Notification.requestPermission().then((разрешение) => {


ако (разрешение "разрешен") {


конзола.log(„Потребителското разрешение за известяване е предоставено.“); 
връщане getToken (съобщения, { vapidKey: `Notification_key_pair` })
 .тогава((currentToken) => {


ако (currentToken) {


конзола.log(„Клиентски токен:“, currentToken);
 } друго {

конзола.log(„Неуспешно генериране на маркера за регистрация на приложението.“);
 }
 })
 .catch((грешка) => {


конзола.log(„Възникна грешка при заявка за получаване на токена.“, грешка);
 });
 } друго {


конзола.log(„Потребителското разрешение е отказано.“);
 }
 });


 }
requestPermission();

Предоставеният код изисква потребителско разрешение за известия и обработва отговора за разрешение. Ако е дадено разрешение, то продължава да получава регистрационен токен за приложението, използвайки getToken функция.

Регистрационният токен служи като идентификатор за устройството или браузъра, получаващи известията. След това можете да използвате този токен, за да настроите кампания за уведомяване в страницата с настройки на Firebase Cloud Messaging.

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

Дефиниране на слушатели на известия

За да се справят с всякакъв тип входящи известия, е необходимо да се настроят слушатели на съобщения за проследяване на входящи известия и функции за обратно извикване, за да задействат всякакви събития за съобщения.

Във вашия firebase.js файл, добавете следния код.

износконст onMessageListener = () =>
новобещание((разрешавам) => {
 onMessage (съобщения, (полезен товар) => {
 разрешаване (полезен товар);
 });
});

Тази функция настройва слушател на съобщения специално за насочени известия. The onMessage функция в рамките на onMessageListener се задейства всеки път, когато приложението получи насочено известие и е на фокус.

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

Дефинирайте Firebase Messaging Service Worker

FCM изисква Firebase Messaging обслужващ работник за обработка на входящи насочени известия.

Служебният работник е JavaScript файл, който работи във фонов режим и обработва насочени известия – позволява уеб приложение за получаване и показване на известия, дори ако потребителят е затворил приложението или е превключил към друг раздел или прозорец.

В /public директория, създайте нова firebase-messaging-sw.js файл и включете следния код.

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


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


messaging.onBackgroundMessage(функция(полезен товар) {
конзола.log(„Получено фоново съобщение“, полезен товар);
конст notificationTitle = payload.notification.title;
конст notificationOptions = {
 тяло: payload.notification.body,
 };
 self.registration.showNotification (notificationTitle,
 Опции за уведомяване);
});

Този код настройва обслужващ работник за Firebase Cloud Messaging в приложението React, позволявайки обработката и показването на известия.

Създайте компонент за известяване

Създайте нов компоненти/Notification.js файл в /src директория и добавете следния код.

импортиране Реагирайте, {useState, useEffect} от"реагира";
импортиране { Тостер, тост } от'react-hot-toast';
импортиране { requestPermission, onMessageListener } от'../firebase';
функцияуведомление() {
конст [известие, setNotification] = useState({ заглавие: '', тяло: '' });
 useEffect(() => {
 requestPermission();
конст отписване = onMessageListener().then((полезен товар) => {
 setNotification({
 заглавие: полезен товар?.известие?.заглавие,
 тяло: полезен товар?.уведомление?.тяло,
 });
 тост.успех(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
 продължителност: 60000, 
 позиция: 'горе в дясно', раздел на страницата на браузъра
 });
});
връщане() => {
 unsubscribe.catch((грешка) =>конзола.log('се провали: ', грешка));
 };
 }, []);
връщане (



 </div>
 );
}
износпо подразбиране Уведомление;

Този код дефинира компонент, който обработва насочени известия. Той използва реагират-горещ-тост библиотека за показване на известия на потребителя.

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

Накрая актуализирайте App.js файл за импортиране на уведомление компонент.

импортиране'./App.css';
импортиране уведомление от'./components/Notification';
функцияПриложение() {
връщане (
"приложение">
„Заглавка на приложението“> 

 </header> 
 </div>
 );
}
износпо подразбиране Приложение;

Тествайте функцията Push Notification

Продължете и завъртете сървъра за разработка и отворете http://locahlhost: 3000 на вашия браузър за достъп до приложението. Трябва да получите следния изскачащ прозорец, за да позволите на приложението да получава известия.

Кликнете Позволява. The клиентски токен трябва да се генерира и да влезе в конзола на браузъра. Ще използвате токена, за да изпращате кампании с известия към вашето приложение React.

Копирайте клиентски токен и преминете към конзолата за разработчици на Firebase Резюме на Проекта страница. Щракнете върху Облачни съобщения карта под Увеличете и ангажирайте аудиторията си раздел.

Кликнете Създайте първата си кампания, изберете Уведомителни съобщения на Firebaseи дайте заглавие и съобщение за вашето известие. Под Визуализация на устройството раздел, щракнете Изпратете тестово съобщение.

Поставете и добавете токена на клиента в изскачащия прозорец, който следва, и щракнете Тест за да изпратите насоченото известие.

Ако сте в приложението, ще получите насочено известие. Ако не, ще получите фоново известие.

Изпращане на насочени известия чрез Firebase Cloud Messaging Service

Насочените известия са ценна функция за подобряване на потребителското изживяване както за уеб, така и за мобилни приложения. Това ръководство подчертава стъпките за интегриране на насочени известия с помощта на Firebase, включително обработка на потребителски разрешения и настройка на слушатели на съобщения.

Като използвате API на Firebase Cloud Messaging, можете ефективно да доставяте навременни актуализации и персонализирани съобщения до вашите React приложения.