Lär dig hur du använder Firebase Cloud Messaging-funktionen (FCM) för att införliva push-meddelanden i en React-app.

Push-meddelanden gör det möjligt för appar att skicka uppdateringar, varningar eller personliga meddelanden direkt till användarnas enheter, oavsett deras aktiva användning av programmet. Dessa aviseringar säkerställer kontinuerligt användarengagemang och omedelbar anslutning.

När det gäller webbapplikationer fångar webbläsaren dessa meddelanden först och vidarebefordrar dem sedan till motsvarande applikation.

Konfigurera ett Firebase-projekt

Följ stegen nedan för att komma igång och konfigurera ett Firebase-projekt:

  1. Gå över till Firebase Developer Console, logga in med din Google-e-postadress och klicka på Gå till konsolen knappen för att navigera till konsolöversiktssidan.
  2. På konsolöversiktssidan klickar du på Skapa ett projekt knappen för att skapa ett nytt projekt. Ange sedan projektets namn.
  3. När projektet har skapats, navigerar du till projektets översiktssida. Du måste registrera en applikation på Firebase för att generera API-nycklar. För att registrera en app, klicka på
    instagram viewer
    webb ikonen, ange appnamnet och klicka på Registrera app knapp.
  4. Kopiera Firebase-konfigurationskoden efter att du har registrerat din React-app.

Konfigurera Firebase Cloud Messaging (FCM) Service

När du har registrerat din applikation på Firebase är nästa steg att konfigurera Firebase Cloud Messaging-tjänsten (FCM).

  1. Navigera till Projektinställningar sida.
  2. Klicka sedan på Cloud Messaging fliken på Projektinställningar sida. Firebase Cloud Messaging använder nyckelpar för Application Identity för att ansluta till externa push-tjänster. Av denna anledning måste du skapa din unika identitetsnyckel.
  3. På Cloud Messaging inställningar, navigera till Webbkonfiguration och klicka på Generera nyckelpar knappen för att generera din unika nyckel.

Konfigurera React-appen

Först, skapa en React-app. När det är installerat, fortsätt och installera eldbas och reagera-het-toast paket som du kommer att använda för att implementera push-meddelanden i React-appen.

npm installera firebase react-hot-toast

Du kan hitta detta projekts källkod i denna GitHub-förråd.

Konfigurera Firebase och Cloud Messaging Service

Gå över till din Projektinställningar sida på utvecklarkonsolen och kopiera det medföljande Firebase-konfigurationsobjektet. I den src katalog, skapa en ny firebase.js fil och lägg till följande kod.

importera { initializeApp } från"firebase/app";
importera { getMessaging, getToken, onMessage } från'firebase/meddelanden';
konst firebaseConfig = {
 apiKey: "",
 authDomain: "",
 projekt-id: "",
 storageBucket: "",
 messagingSenderId: "",
 appId: ""
};
konst app = initializeApp (firebaseConfig);
konst messaging = getMessaging (app);

Byt ut ovanstående firebaseConfig objekt med det du kopierade från Projektinställningar sida. Den här koden ställer in Firebase-instansen och initierar molnmeddelandeobjektet för att aktivera FCM-funktionalitet i din applikation.

Hantera meddelandens begäranden om användartillstånd

För att tillåta React-apparna att ta emot push-meddelanden från Firebases Cloud Messaging-tjänst måste du hantera användarbehörigheterna.

Detta innebär att definiera och anropa be om tillåtelse metod som tillhandahålls av meddelandeobjektet, som du tidigare har konfigurerat. Det säkerställer att du korrekt hanterar användarens svar på meddelandenas behörighetsförfrågningar.

Lägg till följande kod till firebase.js fil efter initialisering av meddelandeobjektet.

exporterakonst requestPermission = () => {
trösta.logga("Begär användartillstånd...");
 Notification.requestPermission().then((lov) => {


om (lov "beviljat") {


trösta.logga("Meddelande användarbehörighet beviljad."); 
lämna tillbaka getToken (meddelanden, { vapidKey: `Notifikationsnyckelpar` })
 .sedan((aktuell Token) => {


om (currentToken) {


trösta.logga('Client Token:', currentToken);
 } annan {

trösta.logga("Det gick inte att generera appregistreringstoken.");
 }
 })
 .fånga((fela) => {


trösta.logga("Ett fel uppstod när du begärde att få token.", fel);
 });
 } annan {


trösta.logga("Användarbehörighet nekad.");
 }
 });


 }
be om tillåtelse();

Den tillhandahållna koden begär användarbehörighet för meddelanden och hanterar behörighetssvaret. Om tillstånd beviljas fortsätter det att erhålla en registreringstoken för applikationen med hjälp av getToken fungera.

Registreringstoken fungerar som en identifierare för enheten eller webbläsaren som tar emot aviseringarna. Du kan sedan använda denna token för att skapa en aviseringskampanj på inställningssidan för Firebase Cloud Messaging.

Se till att du byter ut platshållaren Notification_key_pair med det faktiska nyckelparet du genererade tidigare i Webbkonfiguration sektion.

Definiera aviseringslyssnare

För att hantera alla typer av inkommande aviseringar är det nödvändigt att ställa in meddelandeavlyssnare för att spåra inkommande meddelanden och återuppringningsfunktioner för att utlösa eventuella meddelandehändelser.

I din firebase.js fil, lägg till följande kod.

exporterakonst onMessageListener = () =>
nyLöfte((lösa) => {
 onMessage (meddelanden, (nyttolast) => {
 lösa (nyttolast);
 });
});

Den här funktionen ställer in en meddelandeavlyssnare specifikt för push-meddelanden. De onMessage funktion inom onMessageListener triggas när appen får ett pushmeddelande och är i fokus.

När ett meddelande tas emot kommer meddelandets nyttolast att innehålla relevanta data som är associerade med meddelandet, såsom titeln och texten på meddelandet.

Definiera en Firebase Messaging Service Worker

FCM kräver en Firebase Messaging servicearbetare för att hantera inkommande push-meddelanden.

Service Worker är en JavaScript-fil som körs i bakgrunden och hanterar push-meddelanden – den tillåter webben app för att ta emot och visa aviseringar, även om användaren har stängt appen eller bytt till en annan flik eller fönster.

I den /public katalog, skapa en ny firebase-messaging-sw.js fil och inkludera följande kod.

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-konfigurationsobjektet 
konst firebaseConfig = {
"konfigurationsinformation"
 };


firebase.initializeApp (firebaseConfig);
konst messaging = firebase.messaging();


messaging.onBackgroundMessage(fungera(nyttolast) {
trösta.logga("Mottog bakgrundsmeddelande", nyttolast);
konst notificationTitle = payload.notification.title;
konst notificationOptions = {
 body: payload.notification.body,
 };
 self.registration.showNotification (notificationTitle,
 meddelandealternativ);
});

Den här koden ställer in en servicearbetare för Firebase Cloud Messaging i React-applikationen, vilket möjliggör hantering och visning av aviseringar.

Skapa en aviseringskomponent

Skapa en ny komponenter/Notification.js fil i /src katalog och lägg till följande kod.

importera Reagera, { useState, useEffect } från'reagera';
importera { Brödrost, toast } från"reagera-hot-toast";
importera { requestPermission, onMessageListener } från'../firebase';
fungeraUnderrättelse() {
konst [notification, setNotification] = useState({ titel: '', kropp: '' });
 useEffect(() => {
 be om tillåtelse();
konst unsubscribe = onMessageListener().then((nyttolast) => {
 setNotification({
 title: nyttolast?.notification?.title,
 body: nyttolast?.notification?.body,
 });
 toast.success(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
 varaktighet: 60000, 
 placera: 'överst till höger', sektion av webbläsarsidan
 });
});
lämna tillbaka() => {
 unsubscribe.catch((fela) =>trösta.logga('misslyckades:', fel));
 };
 }, []);
lämna tillbaka (



 </div>
 );
}
exporterastandard Underrättelse;

Den här koden definierar en komponent som hanterar push-meddelanden. Den använder sig av reagera-het-toast bibliotek för att visa meddelanden till användaren.

Komponenten begär användartillstånd, lyssnar efter inkommande meddelanden med hjälp av onMessageListener funktion, och visar som standard en toast-avisering med den mottagna titeln och texten under en minut längst upp till höger på webbläsarsidan. Du kan anpassa meddelandet ytterligare med hjälp av tjänstemannen reagera-het-toast dokumentation och egenskapen CSS position.

Uppdatera slutligen App.js fil för att importera Underrättelse komponent.

importera'./App.css';
importera Underrättelse från'./components/Notification';
fungeraApp() {
lämna tillbaka (
"App">
"App-header"> 

 </header> 
 </div>
 );
}
exporterastandard App;

Testa Push Notification-funktionen

Gå vidare och snurra upp utvecklingsservern och öppna http://locahlhost: 3000 i din webbläsare för att komma åt applikationen. Du bör få följande popup-fönster för att tillåta applikationen att ta emot aviseringar.

Klick Tillåta. De klienttoken ska genereras och loggas in webbläsarkonsolen. Du kommer att använda token för att skicka aviseringskampanjer till din React-app.

Kopiera klienttoken och gå över till Firebases utvecklarkonsol Projekt Överblick sida. Klicka på Cloud Messaging kort under Växa och engagera din publik sektion.

Klick Skapa din första kampanj, Välj Firebase-aviseringsmeddelanden, och ange en titel och ett meddelande för din avisering. Under Förhandsgranskning av enheten avsnitt, klicka Skicka testmeddelande.

Klistra in och lägg till klienttoken i popup-fönstret som följer och klicka Testa för att skicka push-meddelandet.

Om du är på applikationen får du ett pushmeddelande. Om inte får du ett bakgrundsmeddelande.

Skicka push-meddelanden med Firebase Cloud Messaging Service

Push-meddelanden är en värdefull funktion för att förbättra användarupplevelsen för både webb- och mobilapplikationer. Den här guiden lyfte fram stegen för att integrera push-meddelanden med Firebase, inklusive hantering av användarbehörigheter och konfigurering av meddelandeavlyssnare.

Genom att utnyttja Firebase Cloud Messaging API: er kan du effektivt leverera aktuella uppdateringar och personliga meddelanden till dina React-applikationer.