Научите како да користите Фиребасе Цлоуд Мессагинг (ФЦМ) функцију да бисте укључили пусх обавештења у Реацт апликацију.

Пусх обавештења омогућавају апликацијама да шаљу благовремена ажурирања, упозорења или персонализоване поруке директно на уређаје корисника, без обзира на њихову активну употребу апликације. Ова обавештења обезбеђују континуирано ангажовање корисника и тренутну повезаност.

У случају веб апликација, претраживач на почетку снима ова обавештења и потом их прослеђује одговарајућој апликацији.

Подесите Фиребасе пројекат

Пратите доле наведене кораке да бисте започели и подесили Фиребасе пројекат:

  1. Пређите на Фиребасе Девелопер Цонсоле, пријавите се користећи своју Гоогле адресу е-поште и кликните на Идите на Конзолу дугме за навигацију до странице са прегледом конзоле.
  2. На страници са прегледом конзоле кликните на Креирајте пројекат дугме за креирање новог пројекта. Затим наведите назив пројекта.
  3. Када је пројекат успешно креиран, идите на страницу са прегледом пројекта. Морате да региструјете апликацију на Фиребасе-у да бисте генерисали АПИ кључеве. Да бисте регистровали апликацију, кликните на Веб икону, унесите назив апликације и кликните на Региструјте апликацију дугме.
  4. Копирајте Фиребасе конфигурациони код након регистрације Реацт апликације.

Конфигуришите услугу Фиребасе Цлоуд Мессагинг (ФЦМ).

Када региструјете своју апликацију на Фиребасе-у, следећи корак је да конфигуришете Фиребасе Цлоуд Мессагинг (ФЦМ) услугу.

  1. Идите до Подешавања пројекта страна.
  2. Затим кликните на Цлоуд Мессагинг картица на Подешавања пројекта страна. Фиребасе Цлоуд Мессагинг користи парове кључева Апплицатион Идентити за повезивање са спољним пусх услугама. Из тог разлога, морате да генеришете свој јединствени кључ идентитета.
  3. На Цлоуд Мессагинг подешавања, идите на Веб конфигурација одељак и кликните на Генеришите пар кључева дугме да бисте генерисали свој јединствени кључ.

Подесите Реацт апликацију

Први, направите Реацт апликацију. Једном инсталирајте, наставите и инсталирајте фиребасе и реаговати-вруће-тост пакете које ћете користити за имплементацију пусх обавештења у Реацт апликацији.

нпм инсталл фиребасе реацт-хот-тоаст

Овде можете пронаћи изворни код овог пројекта ГитХуб спремиште.

Конфигуришите Фиребасе и сервис за размену порука у облаку

Иди до свог Подешавања пројекта страницу на конзоли за програмере и копирајте обезбеђени Фиребасе конфигурациони објекат. У срц директоријум, креирајте нови фиребасе.јс датотеку и додајте следећи код.

увоз { инитиализеАпп } из"фиребасе/апп";
увоз { гетМессагинг, гетТокен, онМессаге } из'фиребасе/мессагинг';
конст фиребасеЦонфиг = {
 апиКеи: "",
 аутхДомаин: "",
 ИД пројекта: "",
 сторагеБуцкет: "",
 мессагингСендерИд: "",
 аппИд: ""
};
конст апп = инитиализеАпп (фиребасеЦонфиг);
конст порука = гетМессагинг (апликација);

Замените горе наведено фиребасеЦонфиг објекат са оним који сте копирали из Подешавања пројекта страна. Овај код ће подесити Фиребасе инстанцу и иницијализовати објекат за размену порука у облаку да би омогућио ФЦМ функционалност у вашој апликацији.

Управљајте захтевима за корисничку дозволу за обавештења

Да бисте дозволили Реацт апликацијама да примају пусх обавештења од Фиребасе-ове услуге размене порука у облаку, морате да управљате корисничким дозволама.

Ово укључује дефинисање и позивање рекуестПермиссион метод који обезбеђује објекат за размену порука, који сте претходно конфигурисали. Обезбеђује да правилно поступате са одговорима корисника на захтеве за дозволу за обавештења.

Додајте следећи код у фиребасе.јс датотеку након иницијализације објекта за размену порука.

извозконст рекуестПермиссион = () => {
конзола.Пријава(„Тражим корисничку дозволу...“);
 Нотифицатион.рекуестПермиссион().затим((дозволу) => {


ако (дозвола "одобрено") {


конзола.Пријава(„Дозвола корисника обавештења је одобрена.“); 
повратак гетТокен (размена порука, { вапидКеи: `Нотифицатион_кеи_паир` })
 .онда((цуррентТокен) => {


ако (тренутни токен) {


конзола.Пријава('Клијентски токен:', цуррентТокен);
 } друго {

конзола.Пријава(„Генерисање токена за регистрацију апликације није успело.“);
 }
 })
 .улов((ерр) => {


конзола.Пријава(„Дошло је до грешке приликом захтева за пријем токена.“, ерр);
 });
 } друго {


конзола.Пријава(„Корисничка дозвола одбијена.“);
 }
 });


 }
рекуестПермиссион();

Наведени код захтева корисничку дозволу за обавештења и обрађује одговор на дозволу. Ако је дозвола одобрена, наставља да добије регистрациони токен за апликацију користећи гетТокен функција.

Регистрациони токен служи као идентификатор за уређај или прегледач који прима обавештења. Затим можете да користите овај токен за подешавање кампање обавештења на страници подешавања Фиребасе Цлоуд Мессагинг.

Уверите се да сте заменили чувар места Нотифицатион_кеи_паир са стварним паром кључева који сте генерисали раније у Веб Цонфигуратион одељак.

Дефинишите слушаоце обавештења

Да бисте обрадили било коју врсту долазних обавештења, потребно је подесити слушаоце порука да прате долазна обавештења и функције повратног позива да би покренуле било какве догађаје размене порука.

У вашем фиребасе.јс датотеку, додајте следећи код.

извозконст онМессагеЛистенер = () =>
НоваОбећавам((решити) => {
 онМессаге (поруке, (корисни терет) => {
 решити (корисно оптерећење);
 });
});

Ова функција поставља слушалац порука посебно за пусх обавештења. Тхе онМессаге функција унутар онМессагеЛистенер се покреће сваки пут када апликација прими пусх обавештење и када је у фокусу.

Када се прими обавештење, садржај поруке ће садржати релевантне податке повезане са обавештењем, као што су наслов и тело поруке.

Дефинишите Фиребасе Мессагинг Сервице Воркер

ФЦМ захтева Фиребасе Мессагинг услужни радник за руковање долазним пусх обавештењима.

Сервице Воркер је ЈаваСцрипт датотека која ради у позадини и рукује пусх обавештењима — омогућава веб апликацију за примање и приказ обавештења, чак и ако је корисник затворио апликацију или прешао на другу картицу или прозор.

У /public директоријум, креирајте нови фиребасе-мессагинг-св.јс датотеку и укључите следећи код.

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


фиребасе.инитиализеАпп (фиребасеЦонфиг);
конст порука = фиребасе.мессагинг();


мессагинг.онБацкгроундМессаге(функција(носивост) {
конзола.Пријава('Примљена позадинска порука', носивост);
конст нотифицатионТитле = паилоад.нотифицатион.титле;
конст нотифицатионОптионс = {
 тело: паилоад.нотифицатион.боди,
 };
 селф.регистратион.сховНотифицатион (нотифицатионТитле,
 нотифицатионОптионс);
});

Овај код поставља сервисера за Фиребасе Цлоуд Мессагинг у апликацији Реацт, омогућавајући руковање и приказ обавештења.

Направите компоненту обавештења

Створити нова компоненте/Нотифицатион.јс фајл у /src директоријум и додајте следећи код.

увоз Реагујте, { усеСтате, усеЕффецт } из'реаговати';
увоз { Тостер, тост } из'реаговати-врући тост';
увоз { рекуестПермиссион, онМессагеЛистенер } из'../фиребасе';
функцијаОбавештење() {
конст [обавештење, сетНотифицатион] = усеСтате({ наслов: '', тело: '' });
 усеЕффецт(() => {
 рекуестПермиссион();
конст одјави се = онМессагеЛистенер().тхен((носивост) => {
 сетНотифицатион({
 титле: паилоад?.нотифицатион?.титле,
 тело: носивост?.обавештење?.тело,
 });
 тоаст.суццесс(`${паилоад?.нотифицатион?.титле}: ${паилоад?.нотифицатион?.боди}`, {
 трајање: 60000, 
 позиција: 'Горе десно', секција оф страницу претраживача
 });
});
повратак() => {
 унсубсцрибе.цатцх((ерр) =>конзола.Пријава('није успео: ', ерр));
 };
 }, []);
повратак (



 </div>
 );
}
извозУобичајено Нотифицатион;

Овај код дефинише компоненту која рукује пусх обавештењима. Користи се реаговати-вруће-тост библиотека за приказ обавештења кориснику.

Компонента захтева корисничку дозволу, ослушкује долазне поруке користећи онМессагеЛистенер функцију и подразумевано приказује обавештење о здрављу са примљеним насловом и телом у трајању од једног минута у горњем десном делу странице претраживача. Можете додатно прилагодити обавештење уз помоћ званичника реаговати-вруће-тост документацију и својство ЦСС позиције.

На крају, ажурирајте Апп.јс датотеку за увоз Обавештење саставни део.

увоз'./Апп.цсс';
увоз Обавештење из'./цомпонентс/Нотифицатион';
функцијаАпликација() {
повратак (
"Апликација">
„Заглавље апликације“> 

 </header> 
 </div>
 );
}
извозУобичајено Апликација;

Тестирајте функцију пусх обавештења

Само напред и отворите развојни сервер и отворите http://locahlhost: 3000 на вашем претраживачу да бисте приступили апликацији. Требало би да добијете следећи искачући прозор да бисте дозволили апликацији да прима обавештења.

Кликните Дозволи. Тхе клијентски токен треба генерисати и пријавити конзола претраживача. Користићете токен за слање кампања обавештења у своју Реацт апликацију.

Копирај клијентски токен и идите на Фиребасе-ову конзолу за програмере Преглед пројекта страна. Кликните Цлоуд Мессагинг картица испод Повећајте и ангажујте своју публику одељак.

Кликните Направите своју прву кампању, изаберите Фиребасе поруке обавештења, и наведите наслов и поруку за своје обавештење. Под Преглед уређаја одељак, кликните Пошаљите пробну поруку.

Налепите и додајте токен клијента у искачући прозор који следи и кликните Тест да пошаљете пусх обавештење.

Ако сте у апликацији, добићете пусх обавештење. Ако не, добићете позадинско обавештење.

Слање Пусх обавештења користећи Фиребасе Цлоуд Мессагинг Сервице

Пусх обавештења су вредна функција за побољшање корисничког искуства и за веб и за мобилне апликације. Овај водич је истакао кораке за интеграцију пусх обавештења помоћу Фиребасе-а, укључујући руковање корисничким дозволама и подешавање слушалаца порука.

Коришћењем Фиребасе Цлоуд Мессагинг АПИ-ја, можете ефикасно да испоручујете благовремена ажурирања и персонализоване поруке вашим Реацт апликацијама.