Ismerje meg, hogyan használhatja a Firebase Cloud Messaging (FCM) funkcióját push értesítések beépítésére a React alkalmazásba.

A push értesítések lehetővé teszik az alkalmazások számára, hogy időszerű frissítéseket, figyelmeztetéseket vagy személyre szabott üzeneteket küldjenek közvetlenül a felhasználók eszközeire, függetlenül attól, hogy aktívan használják az alkalmazást. Ezek az értesítések biztosítják a folyamatos felhasználói elkötelezettséget és az azonnali kapcsolatot.

Webes alkalmazások esetén a böngésző először rögzíti ezeket az értesítéseket, majd továbbítja a megfelelő alkalmazásnak.

Firebase-projekt beállítása

Kövesse az alábbi lépéseket a kezdéshez és egy Firebase-projekt beállításához:

  1. Irány oda Firebase Developer Console, jelentkezzen be Google e-mail címével, és kattintson a gombra Menjen a Konzolra gombbal navigálhat a konzol áttekintő oldalára.
  2. A konzol áttekintő oldalán kattintson a Hozzon létre egy projektet gombot új projekt létrehozásához. Ezután adja meg a projekt nevét.
    3. instagram viewer
  3. A projekt sikeres létrehozása után lépjen a projekt áttekintő oldalára. API-kulcsok generálásához regisztrálnia kell egy alkalmazást a Firebase-en. Egy alkalmazás regisztrálásához kattintson a gombra Web ikonra, adja meg az alkalmazás nevét, és kattintson a Regisztrálja az alkalmazást gomb.
  4. Másolja ki a Firebase konfigurációs kódját a React alkalmazás regisztrálása után.

Konfigurálja a Firebase Cloud Messaging (FCM) szolgáltatást

Miután regisztrálta alkalmazását a Firebase-en, a következő lépés a Firebase Cloud Messaging (FCM) szolgáltatás konfigurálása.

  1. Navigáljon a Projektbeállítások oldalon.
  2. Ezután kattintson a Cloud Messaging fülön a Projektbeállítások oldalon. A Firebase Cloud Messaging Application Identity kulcspárokat használ a külső push szolgáltatásokhoz való csatlakozáshoz. Emiatt létre kell hoznia egyedi azonosítókulcsát.
  3. A Cloud Messaging beállításokat, navigáljon a Webes konfiguráció szakaszt, és kattintson a Kulcspár létrehozása gombot az egyedi kulcs létrehozásához.

Állítsa be a React alkalmazást

Első, Hozzon létre egy React alkalmazást. A telepítés után folytassa és telepítse a tűzbázis és reagál-forró-pirítós csomagok, amelyeket a push értesítések megvalósítására fog használni a React alkalmazásban.

npm install firebase react-hot-toast

A projekt forráskódja itt található GitHub adattár.

A Firebase és a Cloud Messaging Service konfigurálása

Menj a tiédhez Projektbeállítások oldalt a fejlesztői konzolon, és másolja ki a megadott Firebase konfigurációs objektumot. Ban,-ben src könyvtárat, hozzon létre egy újat firebase.js fájlt, és adja hozzá a következő kódot.

import { inicializálása App } tól től"firebase/app";
import { getMessaging, getToken, onMessage } tól től'firebase/üzenetküldés';
const firebaseConfig = {
 apiKey: "",
 authDomain: "",
 projektazonosító: "",
 tárolási vödör: "",
 messagingSenderId: "",
 appId: ""
};
const app = inicializálásaApp (firebaseConfig);
const üzenetküldés = getMessaging (app);

Cserélje ki a fentieket firebaseConfig objektumot azzal, amelyet a Projektbeállítások oldalon. Ez a kód beállítja a Firebase-példányt, és inicializálja a felhőalapú üzenetküldő objektumot, hogy engedélyezze az FCM-funkciókat az alkalmazásban.

Az Értesítések felhasználói engedélykéréseinek kezelése

Ahhoz, hogy a React alkalmazások leküldéses értesítéseket kapjanak a Firebase Cloud Messaging szolgáltatásától, kezelnie kell a felhasználói engedélyeket.

Ez magában foglalja a meghatározását és a engedély kérése az üzenetküldő objektum által biztosított metódus, amelyet korábban konfigurált. Gondoskodik arról, hogy megfelelően kezelje a felhasználónak az értesítések engedélykérésére adott válaszait.

Adja hozzá a következő kódot a firebase.js fájlt az üzenetküldő objektum inicializálása után.

exportconst requestPermission = () => {
konzol.log("Felhasználói engedély kérése...");
 Notification.requestPermission().then((engedély) => {


ha (engedély "megadott") {


konzol.log("Értesítési felhasználói engedély megadva."); 
Visszatérés getToken (üzenet, { vapidKey: "Értesítési_kulcspár". })
 .akkor((currentToken) => {


ha (currentToken) {


konzol.log("Ügyfél token:", currentToken);
 } más {

konzol.log("Nem sikerült létrehozni az alkalmazás regisztrációs tokent.");
 }
 })
 .fogás((téved) => {


konzol.log("Hiba történt a token átvételének kérésekor.", hiba);
 });
 } más {


konzol.log("Felhasználói engedély megtagadva.");
 }
 });


 }
requestPermission();

A megadott kód felhasználói engedélyt kér az értesítésekhez, és kezeli az engedélyre adott választ. Ha megadják az engedélyt, akkor a következőt használva beszerzi a regisztrációs tokent az alkalmazáshoz getToken funkció.

A regisztrációs token az értesítéseket fogadó eszköz vagy böngésző azonosítójaként szolgál. Ezt a tokent ezután használhatja értesítési kampány beállítására a Firebase Cloud Messaging beállítási oldalán.

Ügyeljen arra, hogy cserélje ki a helyőrzőt Notification_key_pair a korábban generált tényleges kulcspárral Webes konfiguráció szakasz.

Határozza meg az értesítésfigyelőket

Bármilyen típusú bejövő értesítés kezeléséhez be kell állítani az üzenetfigyelőket a bejövő értesítések nyomon követésére, és visszahívási funkciókat kell beállítani az üzenetküldési események indításához.

A tiédben firebase.js fájlt, adja hozzá a következő kódot.

exportconst onMessageListener = () =>
újÍgéret((elhatározás) => {
 onMessage (üzenetküldés, (payload) => {
 megoldani (hasznos teher);
 });
});

Ez a funkció kifejezetten a push értesítésekhez állít be egy üzenetfigyelőt. A onMessage belüli funkció onMessageListener akkor aktiválódik, amikor az alkalmazás push értesítést kap, és fókuszban van.

Amikor értesítés érkezik, az üzenet hasznos adata tartalmazza az értesítéshez kapcsolódó releváns adatokat, például az üzenet címét és törzsét.

Határozzon meg egy Firebase Messaging Service Workert

Az FCM-hez Firebase Messaging szükséges szervizmunkás a bejövő push értesítések kezelésére.

A service worker egy JavaScript-fájl, amely a háttérben fut, és kezeli a leküldéses értesítéseket – lehetővé teszi a webet alkalmazás értesítések fogadásához és megjelenítéséhez, még akkor is, ha a felhasználó bezárta az alkalmazást, vagy másik lapra váltott, ill ablak.

Ban,-ben /public könyvtárat, hozzon létre egy újat firebase-messaging-sw.js fájlt, és tartalmazza a következő kódot.

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");
//a Firebase konfigurációs objektum 
const firebaseConfig = {
"konfigurációs információ"
 };


firebase.initializeApp (firebaseConfig);
const üzenetküldés = firebase.messaging();


messaging.onBackgroundMessage(funkció(hasznos teher) {
konzol.log("Háttérüzenet érkezett", hasznos teher);
const notificationTitle = payload.notification.title;
const értesítési beállítások = {
 body: payload.notification.body,
 };
 self.registration.showNotification (notificationTitle,
 értesítési opciók);
});

Ez a kód beállít egy szervizmunkást a Firebase Cloud Messaging számára a React alkalmazásban, lehetővé téve az értesítések kezelését és megjelenítését.

Hozzon létre egy értesítési összetevőt

Újat csinálni összetevők/Notification.js fájl a /src könyvtárba, és adja hozzá a következő kódot.

import React, { useState, useEffect } tól től'reagál';
import { Kenyérpirító, pirítós } tól től'react-hot-toast';
import { requestPermission, onMessageListener } tól től"../firebase";
funkcióÉrtesítés() {
const [notification, setNotification] = useState({ cím: '', test: '' });
 useEffect(() => {
 requestPermission();
const leiratkozás = onMessageListener().then((hasznos teher) => {
 setNotification({
 title: payload?.notification?.title,
 body: payload?.notification?.body,
 });
 pirítós.siker(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
 időtartam: 60000, 
 pozíció: 'jobb felső', szakasz nak,-nek a böngésző oldalát
 });
});
Visszatérés() => {
 leiratkozás.catch((téved) =>konzol.log('nem sikerült: ', hiba));
 };
 }, []);
Visszatérés (



 </div>
 );
}
exportalapértelmezett Értesítés;

Ez a kód meghatároz egy összetevőt, amely kezeli a push értesítéseket. Kihasználja a reagál-forró-pirítós könyvtárat, hogy értesítéseket jelenítsen meg a felhasználó számára.

A komponens felhasználói engedélyt kér, figyeli a bejövő üzeneteket onMessageListener funkciót, és alapértelmezés szerint egy pohárköszöntőt jelenít meg a kapott címmel és törzstel egy percig a böngésző oldal jobb felső részén. A tisztviselő segítségével tovább szabhatja az értesítést reagál-forró-pirítós dokumentáció és a CSS pozíció tulajdonság.

Végül frissítse a App.js fájl importálásához Értesítés összetevő.

import'./App.css';
import Értesítés tól től'./components/Notification';
funkcióApp() {
Visszatérés (
"Alkalmazás">
"Alkalmazás fejléc"> 

 </header> 
 </div>
 );
}
exportalapértelmezett App;

Tesztelje a Push Notification funkciót

Gyerünk, pörgesd fel a fejlesztői szervert, és nyissa meg http://locahlhost: 3000 a böngészőjében az alkalmazás eléréséhez. A következő előugró ablaknak kell megjelennie, hogy az alkalmazás értesítéseket kaphasson.

Kattintson Lehetővé teszi. A ügyfél token létre kell hozni és be kell jelentkezni a böngésző konzol. A tokent arra fogja használni, hogy értesítési kampányokat küldjön a React alkalmazásnak.

Másolja a ügyfél token és menjen a Firebase fejlesztői konzoljára A projekt áttekintése oldalon. Kattints a Cloud Messaging alatti kártya Növelje és vonja be közönségét szakasz.

Kattintson Hozza létre első kampányát, válassza ki Firebase értesítési üzenetek, és adjon címet és üzenetet az értesítéshez. Alatt Eszköz előnézete szakaszban kattintson Küldj tesztüzenetet.

Illessze be és adja hozzá a kliens tokent a következő felugró ablakban, majd kattintson a gombra Teszt a push értesítés elküldéséhez.

Ha az alkalmazásban van, push értesítést fog kapni. Ha nem, háttérértesítést fog kapni.

Push értesítések küldése Firebase Cloud Messaging Service használatával

A push értesítések értékes funkciót jelentenek a felhasználói élmény javításában mind a webes, mind a mobilalkalmazások esetében. Ez az útmutató kiemelte a leküldéses értesítések Firebase használatával történő integrálásának lépéseit, beleértve a felhasználói engedélyek kezelését és az üzenetfigyelők beállítását.

A Firebase Cloud Messaging API-k kihasználásával hatékonyan szállíthat időben frissítéseket és személyre szabott üzeneteket a React alkalmazásaiba.