Kako implementirati potisna obvestila v React z uporabo Firebase

Potisna obvestila omogočajo aplikacijam pošiljanje pravočasnih posodobitev, opozoril ali prilagojenih sporočil neposredno v naprave uporabnikov, ne glede na njihovo aktivno uporabo aplikacije. Ta obvestila zagotavljajo stalno sodelovanje uporabnikov in takojšnjo povezljivost.

V primeru spletnih aplikacij brskalnik najprej zajame ta obvestila in jih nato posreduje ustrezni aplikaciji.

Nastavite projekt Firebase

Za začetek in nastavitev projekta Firebase sledite spodnjim korakom:

1. Pojdite na Konzola za razvijalce Firebase, se prijavite s svojim Googlovim e-poštnim naslovom in kliknite Pojdite na konzolo gumb za navigacijo na stran s pregledom konzole.
2. Na strani s pregledom konzole kliknite Ustvarite projekt gumb za ustvarjanje novega projekta. Nato navedite ime projekta.
3. Ko je projekt uspešno ustvarjen, se pomaknite na stran s pregledom projekta. Za ustvarjanje ključev API morate registrirati aplikacijo v Firebase. Če želite registrirati aplikacijo, kliknite na
   instagram viewer
   Splet ikono, vnesite ime aplikacije in kliknite ikono Registrirajte aplikacijo gumb.
4. Po registraciji aplikacije React kopirajte konfiguracijsko kodo Firebase.

Konfigurirajte storitev Firebase Cloud Messaging (FCM).

Ko registrirate svojo aplikacijo na Firebase, je naslednji korak konfiguracija storitve Firebase Cloud Messaging (FCM).

1. Pomaknite se do Nastavitve projekta strani.
2. Nato kliknite na Sporočila v oblaku zavihek na Nastavitve projekta strani. Firebase Cloud Messaging uporablja pare ključev Application Identity za povezovanje z zunanjimi potisnimi storitvami. Iz tega razloga morate ustvariti svoj edinstveni identifikacijski ključ.
3. Na Sporočila v oblaku nastavitve, se pomaknite do Spletna konfiguracija in kliknite na Ustvari par ključev gumb za ustvarjanje edinstvenega ključa.

Nastavite aplikacijo React

Prvič, ustvarite aplikacijo React. Ko je nameščen, nadaljujte in namestite požarna baza in reagirati-hot-toast pakete, ki jih boste uporabili za implementacijo potisnih obvestil v aplikaciji React.

npm namestite firebase react-hot-toast

Tukaj lahko najdete izvorno kodo tega projekta Repozitorij GitHub.

Konfigurirajte Firebase in storitev sporočanja v oblaku

Pojdi do svojega Nastavitve projekta strani na konzoli za razvijalce in kopirajte navedeni konfiguracijski objekt Firebase. V src imenik, ustvarite novega firebase.js datoteko in dodajte naslednjo kodo.

uvoz {initializeApp} od"firebase/aplikacija";
uvoz { getMessaging, getToken, onMessage } od'firebase/messaging';
konst firebaseConfig = {
 apiKey: "",
 authDomain: "",
 projectId: "",
 vedro za shranjevanje: "",
 messagingSenderId: "",
 appId: ""
};
konst app = initializeApp (firebaseConfig);
konst sporočanje = getMessaging (aplikacija);

Zamenjajte zgornje firebaseConfig predmet s tistim, ki ste ga kopirali iz Nastavitve projekta strani. Ta koda bo nastavila instanco Firebase in inicializirala objekt za sporočanje v oblaku, da omogočite funkcijo FCM v vaši aplikaciji.

Upravljajte zahteve za uporabniška dovoljenja za obvestila

Če želite aplikacijam React dovoliti prejemanje potisnih obvestil iz storitve Firebase Cloud Messaging, morate upravljati z uporabniškimi dovoljenji.

To vključuje definiranje in klicanje requestPermission metodo, ki jo zagotavlja predmet sporočanja, ki ste ga predhodno konfigurirali. Zagotavlja, da pravilno obravnavate odzive uporabnikov na zahteve za dovoljenje za obvestila.

Dodajte naslednjo kodo v firebase.js datoteko po inicializaciji predmeta sporočanja.

izvozkonst requestPermission = () => {
konzola.log("Zahtevam uporabniško dovoljenje ...");
 Notification.requestPermission().then((dovoljenje) => {
če (dovoljenje "odobreno") {
konzola.log("Dovoljenje uporabnika obvestila odobreno."); 
vrnitev getToken (sporočila, { vapidKey: `Par_ključev_obvestila` })
 .potem((currentToken) => {
če (currentToken) {
konzola.log('Žeton odjemalca:', trenutni žeton);
 } drugače {

konzola.log('Ustvarjanje žetona za registracijo aplikacije ni uspelo.');
 }
 })
 .catch((napaka) => {
konzola.log('Pri zahtevi za prejem žetona je prišlo do napake.', napaka);
 });
 } drugače {
konzola.log("Uporabniško dovoljenje zavrnjeno.");
 }
 });
 }
requestPermission();

Navedena koda zahteva uporabniško dovoljenje za obvestila in obravnava odgovor na dovoljenje. Če je dovoljenje izdano, nadaljuje s pridobivanjem registracijskega žetona za aplikacijo z uporabo getToken funkcijo.

Registracijski žeton služi kot identifikator za napravo ali brskalnik, ki prejema obvestila. Ta žeton lahko nato uporabite za nastavitev oglaševalske akcije obveščanja na strani z nastavitvami Firebase Cloud Messaging.

Prepričajte se, da ste zamenjali ogrado Par_ključev_obvestila z dejanskim parom ključev, ki ste ga ustvarili prej v Spletna konfiguracija razdelek.

Določite poslušalce obvestil

Za obravnavo katere koli vrste dohodnih obvestil je treba nastaviti poslušalce sporočil za sledenje dohodnim obvestilom in funkcije povratnega klica za sprožitev morebitnih dogodkov sporočanja.

V vašem firebase.js datoteko dodajte naslednjo kodo.

izvozkonst onMessageListener = () =>
novoObljuba((rešiti) => {
 onMessage (sporočila, (payload) => {
 razrešiti (tovor);
 });
});

Ta funkcija nastavi poslušalca sporočil posebej za potisna obvestila. The onMessage funkcijo znotraj onMessageListener se sproži vsakič, ko aplikacija prejme potisno obvestilo in je v fokusu.

Ko je obvestilo prejeto, bo vsebina sporočila vsebovala ustrezne podatke, povezane z obvestilom, kot sta naslov in telo sporočila.

Definirajte Firebase Messaging Service Worker

FCM zahteva sporočila Firebase servisni delavec za obdelavo dohodnih potisnih obvestil.

Storitveni delavec je datoteka JavaScript, ki teče v ozadju in obravnava potisna obvestila – omogoča spletu aplikacijo za prejemanje in prikaz obvestil, tudi če je uporabnik zaprl aplikacijo ali preklopil na drug zavihek oz okno.

V /public imenik, ustvarite novega firebase-messaging-sw.js datoteko in vključite naslednjo kodo.

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");
//konfiguracijski objekt Firebase 
konst firebaseConfig = {
"informacije o konfiguraciji"
 };
firebase.initializeApp (firebaseConfig);
konst sporočanje = firebase.messaging();
messaging.onBackgroundMessage(funkcijo(tovor) {
konzola.log('Prejeto sporočilo v ozadju', tovor);
konst notificationTitle = payload.notification.title;
konst notificationOptions = {
 telo: payload.notification.body,
 };
 self.registration.showNotification (notificationTitle,
 obvestilne možnosti);
});

Ta koda nastavi servisnega delavca za Firebase Cloud Messaging v aplikaciji React, kar omogoča obdelavo in prikazovanje obvestil.

Ustvari komponento obvestila

Ustvari novo komponente/Notification.js datoteka v /src imenik in dodajte naslednjo kodo.

uvoz Odziv, {useState, useEffect} od'reagirati';
uvoz { Toaster, toast } od'react-hot-toast';
uvoz { requestPermission, onMessageListener } od'../firebase';
funkcijoObvestilo() {
konst [obvestilo, setNotification] = useState({ naslov: '', telo: '' });
 useEffect(() => {
 requestPermission();
konst odjava = onMessageListener().then((tovor) => {
 setNotification({
 naslov: tovor?.obvestilo?.naslov,
 telo: tovor?.obvestilo?.telo,
 });
 toast.uspeh(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
 trajanje: 60000, 
 položaj: 'zgoraj desno', razdelek od stran brskalnika
 });
});
vrnitev() => {
 unsubscribe.catch((napaka) =>konzola.log('ni uspelo:', napaka));
 };
 }, []);
vrnitev (



 </div>
 );
}
izvozprivzeto obvestilo;

Ta koda definira komponento, ki obravnava potisna obvestila. Uporablja reagirati-hot-toast knjižnica za prikaz obvestil uporabniku.

Komponenta zahteva uporabniško dovoljenje, posluša dohodna sporočila z uporabo onMessageListener funkcijo in privzeto prikaže obvestilo o zdravici s prejetim naslovom in telesom za eno minuto v zgornjem desnem delu strani brskalnika. Obvestilo lahko dodatno prilagodite s pomočjo uradnika reagirati-hot-toast dokumentacijo in lastnost položaja CSS.

Končno posodobite App.js datoteko za uvoz Obvestilo komponento.

uvoz'./App.css';
uvoz Obvestilo od'./components/Notification';
funkcijoaplikacija() {
vrnitev (
"Aplikacija">
"Glava aplikacije"> 

 </header> 
 </div>
 );
}
izvozprivzeto aplikacija;

Preizkusite funkcijo potisnih obvestil

Zavrtite razvojni strežnik in ga odprite http://locahlhost: 3000 v brskalniku za dostop do aplikacije. Prikazati bi se moralo naslednje pojavno okno, da aplikaciji omogočite prejemanje obvestil.

Kliknite Dovoli. The odjemalski žeton je treba ustvariti in prijaviti konzolo brskalnika. Žeton boste uporabili za pošiljanje obvestilnih kampanj v vašo aplikacijo React.

Kopiraj odjemalski žeton in pojdite na konzolo za razvijalce Firebase Pregled projekta strani. Kliknite na Sporočila v oblaku kartico pod Povečajte in pritegnite svoje občinstvo razdelek.

Kliknite Ustvarite svojo prvo oglaševalsko akcijo, izberite Obvestila Firebaseter navedite naslov in sporočilo za svoje obvestilo. Pod Predogled naprave kliknite Pošlji testno sporočilo.

Prilepite in dodajte žeton odjemalca v pojavno okno, ki sledi, in kliknite Test za pošiljanje potisnega obvestila.

Če ste v aplikaciji, boste prejeli potisno obvestilo. Če ne, boste prejeli obvestilo o ozadju.

Pošiljanje potisnih obvestil s storitvijo Firebase Cloud Messaging Service

Potisna obvestila so dragocena funkcija za izboljšanje uporabniške izkušnje za spletne in mobilne aplikacije. V tem priročniku so bili poudarjeni koraki za integracijo potisnih obvestil z uporabo Firebase, vključno z obravnavanjem uporabniških dovoljenj in nastavitvijo poslušalcev sporočil.

Z uporabo API-jev Firebase Cloud Messaging lahko svojim aplikacijam React učinkovito posredujete pravočasne posodobitve in prilagojena sporočila.