Uzziniet, kā izmantot Firebase mākoņa ziņojumapmaiņas (FCM) funkciju, lai iekļautu informatīvos paziņojumus React lietojumprogrammā.

Push paziņojumi ļauj lietojumprogrammām nosūtīt savlaicīgus atjauninājumus, brīdinājumus vai personalizētus ziņojumus tieši uz lietotāju ierīcēm neatkarīgi no tā, vai viņi aktīvi izmanto lietojumprogrammu. Šie paziņojumi nodrošina nepārtrauktu lietotāju iesaistīšanos un tūlītēju savienojamību.

Tīmekļa lietojumprogrammu gadījumā pārlūkprogramma sākotnēji uztver šos paziņojumus un pēc tam pārsūta tos uz attiecīgo lietojumprogrammu.

Iestatiet Firebase projektu

Lai sāktu darbu un iestatītu Firebase projektu, veiciet tālāk norādītās darbības.

  1. Dodieties uz Firebase izstrādātāja konsole, pierakstieties, izmantojot savu Google e-pasta adresi, un noklikšķiniet uz Dodieties uz konsoli pogu, lai pārietu uz konsoles pārskata lapu.
  2. Konsoles pārskata lapā noklikšķiniet uz Izveidojiet projektu pogu, lai izveidotu jaunu projektu. Pēc tam norādiet projekta nosaukumu.
  3. Kad projekts ir veiksmīgi izveidots, pārejiet uz projekta pārskata lapu. Lai ģenerētu API atslēgas, Firebase ir jāreģistrē lietojumprogramma. Lai reģistrētu lietotni, noklikšķiniet uz
    instagram viewer
    Web ikonu, norādiet lietotnes nosaukumu un noklikšķiniet uz Reģistrēt lietotni pogu.
  4. Pēc React lietotnes reģistrēšanas nokopējiet Firebase konfigurācijas kodu.

Konfigurējiet Firebase mākoņa ziņojumapmaiņas (FCM) pakalpojumu

Kad esat reģistrējis savu lietojumprogrammu pakalpojumā Firebase, nākamā darbība ir Firebase mākoņa ziņojumapmaiņas (FCM) pakalpojuma konfigurēšana.

  1. Dodieties uz Projekta iestatījumi lappuse.
  2. Pēc tam noklikšķiniet uz Mākoņa ziņojumapmaiņa cilne uz Projekta iestatījumi lappuse. Firebase Cloud Messaging izmanto lietojumprogrammas identitātes atslēgu pārus, lai izveidotu savienojumu ar ārējiem push pakalpojumiem. Šī iemesla dēļ jums ir jāģenerē sava unikālā identitātes atslēga.
  3. Uz Mākoņa ziņojumapmaiņa iestatījumiem, dodieties uz Tīmekļa konfigurācija sadaļu un noklikšķiniet uz Ģenerējiet atslēgu pāri pogu, lai ģenerētu savu unikālo atslēgu.

Iestatiet React lietotni

Pirmkārt, izveidot React lietotni. Pēc instalēšanas turpiniet un instalējiet Firebase un reaģēt-karsti-grauzdiņš pakotnes, kuras izmantosit push paziņojumu ieviešanai React lietotnē.

npm instalējiet Firebase react-hot-toast

Šeit varat atrast šī projekta pirmkodu GitHub repozitorijs.

Konfigurējiet Firebase un mākoņa ziņojumapmaiņas pakalpojumu

Dodieties uz savu Projekta iestatījumi lapu izstrādātāja konsolē un nokopējiet nodrošināto Firebase konfigurācijas objektu. Iekš src direktorijā, izveidojiet jaunu firebase.js failu un pievienojiet šādu kodu.

imports {inicializeApp} no"firebase/app";
imports { getMessaging, getToken, onMessage } no"Firebase/messaging";
konst firebaseConfig = {
 apiKey: "",
 authDomain: "",
 projekta ID: "",
 uzglabāšanas kauss: "",
 messagingSenderId: "",
 appId: ""
};
konst app = inicializētApp (firebaseConfig);
konst ziņapmaiņa = getMessaging (lietotne);

Nomainiet iepriekš minēto FirebaseConfig objektu ar to, kuru nokopējāt no Projekta iestatījumi lappuse. Šis kods iestatīs Firebase gadījumu un inicializēs mākoņa ziņojumapmaiņas objektu, lai iespējotu FCM funkcionalitāti jūsu lietojumprogrammā.

Pārvaldiet paziņojumu lietotāju atļauju pieprasījumus

Lai ļautu React lietojumprogrammām saņemt pašpiegādes paziņojumus no Firebase mākoņa ziņojumapmaiņas pakalpojuma, jums ir jāapstrādā lietotāja atļaujas.

Tas ietver definēšanu un izsaukšanu pieprasīt atļauju metode, ko nodrošina iepriekš konfigurētais ziņojumapmaiņas objekts. Tas nodrošina, ka jūs pareizi apstrādājat lietotāja atbildes uz paziņojumu atļauju pieprasījumiem.

Pievienojiet tālāk norādīto kodu firebase.js failu pēc ziņojumapmaiņas objekta inicializācijas.

eksportētkonst pieprasījumsAtļauja = () => {
konsole.log("Notiek lietotāja atļaujas pieprasīšana...");
 Notification.requestPermission().then((atļauju) => {


ja (atļauja "piešķirts") {


konsole.log("Paziņojumu lietotāja atļauja piešķirta."); 
atgriezties getToken (ziņapmaiņa, { vapidKey: Paziņojuma_atslēgpāris })
 .hen((currentToken) => {


ja (currentToken) {


konsole.log("Klienta pilnvara:", currentToken);
 } cits {

konsole.log("Neizdevās ģenerēt lietotnes reģistrācijas pilnvaru.");
 }
 })
 .catch((kļūda) => {


konsole.log(Pieprasot saņemt pilnvaru, radās kļūda., kļūda);
 });
 } cits {


konsole.log("Lietotāja atļauja liegta.");
 }
 });


 }
requestPermission();

Norādītais kods pieprasa lietotāja atļauju paziņojumiem un apstrādā atļaujas atbildi. Ja atļauja tiek piešķirta, tā iegūst reģistrācijas marķieri lietojumprogrammai, izmantojot getToken funkciju.

Reģistrācijas marķieris kalpo kā identifikators ierīcei vai pārlūkprogrammai, kas saņem paziņojumus. Pēc tam varat izmantot šo pilnvaru, lai Firebase mākoņa ziņojumapmaiņas iestatījumu lapā iestatītu paziņojumu kampaņu.

Noteikti nomainiet vietturi Notification_key_pair ar faktisko atslēgu pāri, ko ģenerējāt iepriekš Web konfigurācija sadaļā.

Definējiet paziņojumu uztvērējus

Lai apstrādātu jebkāda veida ienākošos paziņojumus, ir jāiestata ziņojumu uztvērēji, kas izseko ienākošos paziņojumus, un atzvanīšanas funkcijas, lai aktivizētu jebkādus ziņojumapmaiņas notikumus.

Tavā firebase.js failu, pievienojiet šādu kodu.

eksportētkonst onMessageListener = () =>
jaunsApsolīt((atrisināt) => {
 onMessage (ziņapmaiņa, (lietderīgā slodze) => {
 atrisināt (lietderīgā slodze);
 });
});

Šī funkcija iestata ziņojumu klausītāju īpaši push paziņojumiem. The onMessage funkcija iekšā onMessageListener tiek aktivizēts ikreiz, kad lietotne saņem pašpiegādes paziņojumu un ir fokusā.

Kad tiek saņemts paziņojums, ziņojuma slodze satur attiecīgos ar paziņojumu saistītos datus, piemēram, ziņojuma nosaukumu un pamattekstu.

Definējiet Firebase ziņojumapmaiņas pakalpojuma darbinieku

FCM ir nepieciešama Firebase ziņojumapmaiņa servisa darbinieks lai apstrādātu ienākošos push paziņojumus.

Pakalpojuma darbinieks ir JavaScript fails, kas darbojas fonā un apstrādā push paziņojumus — tas ļauj piekļūt tīmeklim lietotni, lai saņemtu un parādītu paziņojumus, pat ja lietotājs ir aizvēris lietotni vai pārslēdzies uz citu cilni vai logs.

Iekš /public direktorijā, izveidojiet jaunu firebase-messaging-sw.js failu un iekļaujiet šādu kodu.

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 konfigurācijas objekts 
konst firebaseConfig = {
"konfigurācijas informācija"
 };


firebase.initializeApp (firebaseConfig);
konst ziņojumapmaiņa = firebase.messaging();


messaging.onBackgroundMessage(funkciju(kravnesība) {
konsole.log("Saņemts fona ziņojums", kravnesība);
konst notificationTitle = payload.notification.title;
konst paziņojumu opcijas = {
 body: payload.notification.body,
 };
 self.registration.showNotification (notificationTitle,
 paziņojumu Opcijas);
});

Šis kods iestata Firebase mākoņa ziņojumapmaiņas pakalpojumu darbinieku lietojumprogrammā React, ļaujot apstrādāt un parādīt paziņojumus.

Izveidojiet paziņojumu komponentu

Izveidojiet jaunu komponenti/Notification.js failu mapē /src direktorijā un pievienojiet šādu kodu.

imports Reaģēt, { useState, useEffect } no'reaģēt';
imports { Tosteris, grauzdiņš } no'reaģēt-karsti-grauzdiņš';
imports { requestPermission, onMessageListener } no"../firebase";
funkcijuPaziņojums() {
konst [notification, setNotification] = useState({ virsraksts: '', ķermeni: '' });
 useEffect(() => {
 requestPermission();
konst atrakstīties = onMessageListener().then((kravnesība) => {
 setNotification({
 nosaukums: krava?.notification?.title,
 korpuss: kravnesība?.notification?.body,
 });
 grauzdiņš.veiksmi(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
 ilgums: 60000, 
 pozīcija: 'augšējais labais', sadaļa no pārlūkprogrammas lapa
 });
});
atgriezties() => {
 unsubscribe.catch((kļūda) =>konsole.log('neizdevās:', kļūda));
 };
 }, []);
atgriezties (



 </div>
 );
}
eksportētnoklusējuma Paziņojums;

Šis kods definē komponentu, kas apstrādā push paziņojumus. Tas izmanto reaģēt-karsti-grauzdiņš bibliotēka, lai parādītu lietotājam paziņojumus.

Komponents pieprasa lietotāja atļauju, klausās ienākošos ziņojumus, izmantojot onMessageListener funkciju un pēc noklusējuma pārlūkprogrammas lapas augšējā labajā sadaļā vienu minūti parāda tostu paziņojumu ar saņemto nosaukumu un pamattekstu. Varat vēl vairāk pielāgot paziņojumu ar ierēdņa palīdzību reaģēt-karsti-grauzdiņš dokumentāciju un CSS pozīcijas rekvizīts.

Visbeidzot, atjauniniet App.js failu importēšanai Paziņojums komponents.

imports'./App.css';
imports Paziņojums no'./components/Notification';
funkcijuApp() {
atgriezties (
"Lietotne">
"Lietotnes galvene"> 

 </header> 
 </div>
 );
}
eksportētnoklusējuma Lietotne;

Pārbaudiet push paziņojumu funkciju

Dodieties uz priekšu, pagrieziet izstrādes serveri un atveriet http://locahlhost: 3000 savā pārlūkprogrammā, lai piekļūtu lietojumprogrammai. Lai lietojumprogramma varētu saņemt paziņojumus, tiek parādīts šāds uznirstošais logs.

Klikšķis Atļaut. The klienta marķieris jāģenerē un jāpiesakās pārlūkprogrammas konsole. Jūs izmantosiet pilnvaru, lai nosūtītu paziņojumu kampaņas savai React lietotnei.

Kopējiet klienta marķieris un dodieties uz Firebase izstrādātāja konsoli projekta pārskats lappuse. Noklikšķiniet uz Mākoņa ziņojumapmaiņa karti zem Palieliniet un iesaistiet savu auditoriju sadaļā.

Klikšķis Izveidojiet savu pirmo kampaņu, atlasiet Firebase paziņojumu ziņojumiun norādiet sava paziņojuma nosaukumu un ziņojumu. Saskaņā Ierīces priekšskatījums sadaļu, noklikšķiniet Nosūtiet testa ziņojumu.

Ielīmējiet un pievienojiet klienta pilnvaru uznirstošajā logā un noklikšķiniet uz Pārbaude lai nosūtītu push paziņojumu.

Ja atrodaties lietojumprogrammā, jūs saņemsit push paziņojumu. Ja nē, jūs saņemsit fona paziņojumu.

Push paziņojumu sūtīšana, izmantojot Firebase mākoņa ziņojumapmaiņas pakalpojumu

Push paziņojumi ir vērtīga funkcija, lai uzlabotu lietotāja pieredzi gan tīmekļa, gan mobilajās lietojumprogrammās. Šajā rokasgrāmatā ir norādītas darbības, kas jāveic, lai integrētu informatīvos paziņojumus, izmantojot Firebase, tostarp lietotāju atļauju apstrāde un ziņojumu uztvērēju iestatīšana.

Izmantojot Firebase mākoņa ziņojumapmaiņas API, varat efektīvi piegādāt savlaicīgus atjauninājumus un personalizētus ziņojumus savām React lietojumprogrammām.