Zistite, ako používať funkciu Firebase Cloud Messaging (FCM) na začlenenie upozornení push do aplikácie React.

Push notifikácie umožňujú aplikáciám odosielať včasné aktualizácie, upozornenia alebo personalizované správy priamo do zariadení používateľov bez ohľadu na ich aktívne používanie aplikácie. Tieto upozornenia zabezpečujú nepretržité zapojenie používateľov a okamžité pripojenie.

V prípade webových aplikácií prehliadač najprv zachytí tieto upozornenia a následne ich odošle príslušnej aplikácii.

Nastavte projekt Firebase

Ak chcete začať a nastaviť projekt Firebase, postupujte podľa nasledujúcich krokov:

  1. Zamierte k Firebase Developer Console, prihláste sa pomocou svojej e-mailovej adresy Google a kliknite na Prejdite do konzoly prejdite na stránku prehľadu konzoly.
  2. Na stránke prehľadu konzoly kliknite na Vytvorte projekt tlačidlo na vytvorenie nového projektu. Potom zadajte názov projektu.
  3. Po úspešnom vytvorení projektu prejdite na stránku s prehľadom projektu. Ak chcete vygenerovať kľúče API, musíte zaregistrovať aplikáciu na Firebase. Ak chcete zaregistrovať aplikáciu, kliknite na
    instagram viewer
    Web, zadajte názov aplikácie a kliknite na Zaregistrujte aplikáciu tlačidlo.
  4. Po registrácii aplikácie React skopírujte konfiguračný kód Firebase.

Nakonfigurujte službu Firebase Cloud Messaging (FCM).

Po zaregistrovaní aplikácie na Firebase je ďalším krokom konfigurácia služby Firebase Cloud Messaging (FCM).

  1. Prejdite na Nastavenia projektu stránku.
  2. Ďalej kliknite na Cloud Messaging kartu na Nastavenia projektu stránku. Firebase Cloud Messaging používa páry kľúčov Application Identity na pripojenie k externým službám push. Z tohto dôvodu si musíte vygenerovať svoj jedinečný kľúč identity.
  3. Na Cloud Messaging nastavenia, prejdite na Webová konfigurácia a kliknite na položku Vygenerujte pár kľúčov tlačidlo na vygenerovanie vášho jedinečného kľúča.

Nastavte aplikáciu React

Najprv, vytvorte aplikáciu React. Po inštalácii pokračujte a nainštalujte firebase a reagovať-horúci-toast balíky, ktoré použijete na implementáciu push notifikácií v aplikácii React.

npm install firebase reagovat-hot-toast

Zdrojový kód tohto projektu nájdete tu úložisko GitHub.

Nakonfigurujte Firebase a Cloud Messaging Service

Choďte k svojmu Nastavenia projektu na vývojárskej konzole a skopírujte poskytnutý konfiguračný objekt Firebase. V src adresár, vytvorte nový firebase.js súbor a pridajte nasledujúci kód.

importovať { initializeApp } od"firebase/app";
importovať { getMessaging, getToken, onMessage } od'firebase/messaging';
konšt firebaseConfig = {
 apiKey: "",
 authDomain: "",
 projectId: "",
 úložný priestor: "",
 messagingSenderId: "",
 appId: ""
};
konšt app = initializeApp (firebaseConfig);
konšt posielanie správ = getMessaging (aplikácia);

Vymeňte vyššie uvedené firebaseConfig objekt s tým, ktorý ste skopírovali z Nastavenia projektu stránku. Tento kód nastaví inštanciu Firebase a inicializuje objekt na odosielanie správ v cloude, aby sa vo vašej aplikácii povolila funkcia FCM.

Spravujte žiadosti používateľov o povolenia pre upozornenia

Ak chcete aplikáciám React povoliť prijímať oznámenia push zo služby Cloud Messaging spoločnosti Firebase, musíte spracovať povolenia používateľa.

To zahŕňa definovanie a volanie požiadať o povolenie spôsob poskytovaný objektom správ, ktorý ste predtým nakonfigurovali. Zabezpečuje, že správne spracujete odpovede používateľov na žiadosti o povolenie upozornení.

Pridajte nasledujúci kód do firebase.js súbor po inicializácii objektu správ.

exportkonšt requestPermission = () => {
konzoly.log("Žiadosť o povolenie používateľa...");
 Notification.requestPermission().then((povolenie) => {


ak (povolenie "udelené") {


konzoly.log("Udelenie povolenia používateľovi na upozornenie."); 
vrátiť getToken (správa, { vapidKey: `Notification_key_pair` })
 .potom((currentToken) => {


ak (currentToken) {


konzoly.log('Token klienta:', aktuálny token);
 } inak {

konzoly.log(„Nepodarilo sa vygenerovať token registrácie aplikácie.“);
 }
 })
 .catch((chybovať) => {


konzoly.log("Pri požiadaní o prijatie tokenu sa vyskytla chyba.", chyba);
 });
 } inak {


konzoly.log("Povolenie používateľa odmietnuté.");
 }
 });


 }
requestPermission();

Poskytnutý kód vyžaduje povolenie používateľa na upozornenia a spracováva odpoveď na povolenie. Ak je povolenie udelené, pokračuje v získavaní registračného tokenu pre aplikáciu pomocou getToken funkciu.

Registračný token slúži ako identifikátor zariadenia alebo prehliadača prijímajúceho upozornenia. Tento token potom môžete použiť na nastavenie kampane s upozorneniami na stránke nastavení Firebase Cloud Messaging.

Uistite sa, že ste nahradili zástupný symbol Notification_key_pair so skutočným párom kľúčov, ktorý ste vygenerovali skôr v Webová konfigurácia oddiele.

Definujte prijímače upozornení

Na spracovanie akéhokoľvek typu prichádzajúcich upozornení je potrebné nastaviť poslucháčov správ na sledovanie prichádzajúcich upozornení a funkcie spätného volania na spustenie akýchkoľvek udalostí odosielania správ.

V tvojom firebase.js súbor, pridajte nasledujúci kód.

exportkonšt onMessageListener = () =>
NovýSľub((vyriešiť) => {
 onMessage (správy, (užitočné zaťaženie) => {
 vyriešiť (užitočné zaťaženie);
 });
});

Táto funkcia nastavuje poslucháč správ špeciálne pre push notifikácie. The onMessage funkcia vo vnútri onMessageListener spustí sa vždy, keď aplikácia dostane upozornenie push a je zameraná.

Po prijatí oznámenia bude obsah správy obsahovať relevantné údaje súvisiace s oznámením, ako je názov a telo správy.

Definujte Firebase Messaging Service Worker

FCM vyžaduje Firebase Messaging servisný pracovník na spracovanie prichádzajúcich upozornení push.

Service worker je súbor JavaScript, ktorý beží na pozadí a spracováva upozornenia push – umožňuje web aplikáciu na prijímanie a zobrazovanie upozornení, aj keď používateľ zatvoril aplikáciu alebo prepol na inú kartu, resp okno.

V /public adresár, vytvorte nový firebase-messaging-sw.js súbor a zahrňte nasledujúci kód.

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");
//objekt konfigurácie Firebase 
konšt firebaseConfig = {
"informácie o konfigurácii"
 };


firebase.initializeApp (firebaseConfig);
konšt messaging = firebase.messaging();


messaging.onBackgroundMessage(funkciu(užitočné zaťaženie) {
konzoly.log('Prijatá správa na pozadí', užitočné zaťaženie);
konšt notificationTitle = payload.notification.title;
konšt možnosti upozornenia = {
 telo: užitočné zaťaženie.oznámenie.telo,
 };
 self.registration.showNotification (notificationTitle,
 možnosti upozornenia);
});

Tento kód nastavuje servisného pracovníka pre Firebase Cloud Messaging v aplikácii React, ktorý umožňuje spracovanie a zobrazovanie upozornení.

Vytvorte komponent upozornení

Vytvorte nový komponenty/Notification.js súbor v /src adresár a pridajte nasledujúci kód.

importovať Reaguj, { useState, useEffect } od'reagovať';
importovať { Hriankovač, toast } od„react-hot-toast“;
importovať { requestPermission, onMessageListener } od'../firebase';
funkciuOznámenie() {
konšt [notification, setNotification] = useState({ titul: '', telo: '' });
 useEffect(() => {
 requestPermission();
konšt unsubscribe = onMessageListener().then((užitočné zaťaženie) => {
 setNotification({
 title: užitočné zaťaženie?.oznámenie?.titul,
 telo: užitočné zaťaženie?.oznámenie?.telo,
 });
 toast.úspech(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
 trvanie: 60000, 
 pozícia: 'hore vpravo', sekcia z stránku prehliadača
 });
});
vrátiť() => {
 unsubscribe.catch((chybovať) =>konzoly.log('zlyhalo:', chyba));
 };
 }, []);
vrátiť (



 </div>
 );
}
exportpredvolená Oznámenie;

Tento kód definuje komponent, ktorý spracováva oznámenia push. Využíva sa reagovať-horúci-toast knižnicu na zobrazenie upozornení pre používateľa.

Komponent vyžaduje povolenie používateľa, počúva prichádzajúce správy pomocou onMessageListener a v predvolenom nastavení zobrazí upozornenie na prípitok s prijatým názvom a telom na dobu jednej minúty v pravej hornej časti stránky prehliadača. Oznámenie môžete ďalej prispôsobiť pomocou úradníka reagovať-horúci-toast dokumentáciu a vlastnosť CSS position.

Nakoniec aktualizujte App.js súbor na import Oznámenie komponent.

importovať'./App.css';
importovať Oznámenie od'./components/Notification';
funkciuApp() {
vrátiť (
"aplikácia">
"Hlavička aplikácie"> 

 </header> 
 </div>
 );
}
exportpredvolená App;

Otestujte funkciu Push Notification

Pokračujte, roztočte vývojový server a otvorte ho http://locahlhost: 3000 vo vašom prehliadači na prístup k aplikácii. Mali by ste dostať nasledujúce kontextové okno, aby ste aplikácii umožnili prijímať upozornenia.

Kliknite Povoliť. The klientsky token by mal byť vygenerovaný a prihlásený do konzola prehliadača. Token použijete na odosielanie oznamovacích kampaní do vašej aplikácie React.

Skopírujte klientsky token a prejdite do konzoly pre vývojárov Firebase Prehľad projektu stránku. Kliknite na Cloud Messaging kartu pod Rozšírte a zapojte svoje publikum oddiele.

Kliknite Vytvorte svoju prvú kampaň, vyberte Správy s upozorneniami Firebasea uveďte názov a správu pre upozornenie. Pod Ukážka zariadenia sekciu, kliknite Odoslať testovaciu správu.

Prilepte a pridajte token klienta do vyskakovacieho okna, ktoré nasleduje, a kliknite Test na odoslanie oznámenia push.

Ak používate aplikáciu, dostanete upozornenie push. Ak nie, dostanete upozornenie na pozadí.

Odosielanie upozornení push pomocou služby Firebase Cloud Messaging Service

Push notifikácie sú cennou funkciou na zlepšenie používateľského zážitku pre webové aj mobilné aplikácie. Táto príručka zdôraznila kroky na integráciu upozornení push pomocou platformy Firebase vrátane spracovania povolení používateľov a nastavenia poslucháčov správ.

Využitím rozhraní Firebase Cloud Messaging API môžete efektívne doručovať včasné aktualizácie a personalizované správy do vašich aplikácií React.