Opi käyttämään Firebase Cloud Messaging (FCM) -ominaisuutta push-ilmoitusten sisällyttämiseen React-sovellukseen.

Push-ilmoitusten avulla sovellukset voivat lähettää oikea-aikaisia ​​päivityksiä, hälytyksiä tai henkilökohtaisia ​​viestejä suoraan käyttäjien laitteisiin riippumatta siitä, kuinka he käyttävät sovellusta aktiivisesti. Nämä ilmoitukset varmistavat jatkuvan käyttäjien sitoutumisen ja välittömän yhteyden.

Verkkosovellusten tapauksessa selain kaappaa nämä ilmoitukset ensin ja välittää ne myöhemmin vastaavalle sovellukselle.

Määritä Firebase-projekti

Aloita ja määritä Firebase-projekti noudattamalla alla olevia ohjeita:

  1. Suuntaa kohti Firebase Developer Console, kirjaudu sisään Google-sähköpostiosoitteellasi ja napsauta Siirry konsoliin -painiketta siirtyäksesi konsolin yleiskuvaussivulle.
  2. Napsauta konsolin yleiskatsaussivulla Luo projekti -painiketta luodaksesi uuden projektin. Anna sitten projektin nimi.
  3. Kun projekti on luotu onnistuneesti, siirry projektin yleiskatsaussivulle. Sinun on rekisteröitävä sovellus Firebasessa API-avaimien luomiseksi. Rekisteröi sovellus napsauttamalla Web -kuvaketta, anna sovelluksen nimi ja napsauta Rekisteröi sovellus -painiketta.
  4. Kopioi Firebase-määrityskoodi React-sovelluksen rekisteröinnin jälkeen.

Määritä Firebase Cloud Messaging (FCM) -palvelu

Kun olet rekisteröinyt sovelluksesi Firebasessa, seuraava vaihe on Firebase Cloud Messaging (FCM) -palvelun määrittäminen.

  1. Navigoi kohtaan Projektin asetukset sivu.
  2. Napsauta seuraavaksi Cloud Messaging -välilehti Projektin asetukset sivu. Firebase Cloud Messaging käyttää Application Identity -avainpareja muodostaakseen yhteyden ulkoisiin push-palveluihin. Tästä syystä sinun on luotava yksilöllinen identiteettiavain.
  3. Käytössä Cloud Messaging asetukset, siirry kohtaan Web-määritys -osio ja napsauta Luo avainpari -painiketta luodaksesi ainutlaatuisen avaimesi.

Määritä React-sovellus

Ensimmäinen, luo React-sovellus. Kun olet asentanut, siirry eteenpäin ja asenna Firebase ja reagoi-kuuma-paahtoleipää paketit, joita käytät push-ilmoitusten toteuttamiseen React-sovelluksessa.

npm asentaa firebase react-hot-toast

Löydät tämän projektin lähdekoodin tästä GitHub-arkisto.

Määritä Firebase ja Cloud Messaging Service

Mene luoksesi Projektin asetukset -sivulle kehittäjäkonsolissa ja kopioi toimitettu Firebase-määritysobjekti. Vuonna src hakemistoon, luo uusi firebase.js tiedosto ja lisää seuraava koodi.

tuonti { alustaaApp } alkaen"firebase/app";
tuonti { getMessaging, getToken, onMessage } alkaen'firebase/viestintä';
konst firebaseConfig = {
 apiKey: "",
 authDomain: "",
 projektitunnus: "",
 varastosäiliö: "",
 messagingSenderId: "",
 appId: ""
};
konst app = alustaaApp (firebaseConfig);
konst viestit = getMessaging (sovellus);

Vaihda yllä oleva firebaseConfig objektin kanssa, jonka kopioit kohteesta Projektin asetukset sivu. Tämä koodi määrittää Firebase-ilmentymän ja alustaa pilviviestintäobjektin, jotta FCM-toiminnallisuus otetaan käyttöön sovelluksessasi.

Hallinnoi ilmoitusten käyttäjien lupapyyntöjä

Jotta React-sovellukset voivat vastaanottaa push-ilmoituksia Firebasen Cloud Messaging -palvelusta, sinun on käsiteltävä käyttäjän käyttöoikeudet.

Tämä sisältää määrittelyn ja kutsumisen pyytää lupaa aiemmin määrittämäsi viestintäobjektin tarjoama menetelmä. Se varmistaa, että käsittelet oikein käyttäjän vastauksia ilmoitusten lupapyyntöihin.

Lisää seuraava koodi firebase.js tiedosto viestiobjektin alustamisen jälkeen.

viedäkonst requestPermission = () => {
konsoli.Hirsi("Pyydetään käyttäjän lupaa...");
 Notification.requestPermission().then((lupa) => {


jos (lupa "myönnetty") {


konsoli.Hirsi("Ilmoituskäyttäjän lupa myönnetty."); 
palata getToken (viestit, { vapidKey: "Notification_key_pair". })
 .sitten((currentToken) => {


jos (currentToken) {


konsoli.Hirsi("Asiakastunnus:", currentToken);
 } muu {

konsoli.Hirsi("Sovelluksen rekisteröintitunnuksen luominen epäonnistui.");
 }
 })
 .ottaa kiinni((err) => {


konsoli.Hirsi("Tapahtui virhe pyydettäessä vastaanottaa tunnus.", err);
 });
 } muu {


konsoli.Hirsi("Käyttäjän lupa estetty.");
 }
 });


 }
requestPermission();

Annettu koodi pyytää käyttäjältä lupaa ilmoituksiin ja käsittelee lupavastauksen. Jos lupa myönnetään, se hankkii rekisteröintitunnuksen sovellukselle käyttämällä getToken toiminto.

Rekisteröintitunnus toimii ilmoitukset vastaanottavan laitteen tai selaimen tunnisteena. Tämän tunnuksen avulla voit sitten määrittää ilmoituskampanjan Firebase Cloud Messaging -asetussivulla.

Varmista, että vaihdat paikkamerkin Notification_key_pair todellisen avainparin kanssa, jonka loit aiemmin Verkkoasetukset osio.

Määritä ilmoitusten kuuntelijat

Kaikentyyppisten saapuvien ilmoitusten käsittelemiseksi on tarpeen määrittää viestikuuntelijoita seuraamaan saapuvia ilmoituksia ja takaisinsoittotoimintoja viestitapahtumien käynnistämiseksi.

Sinun firebase.js tiedosto, lisää seuraava koodi.

viedäkonst onMessageListener = () =>
UusiLupaus((ratkaista) => {
 onMessage (viestintä, (hyötykuorma) => {
 ratkaista (hyötykuorma);
 });
});

Tämä toiminto määrittää viestikuuntelijan erityisesti push-ilmoituksia varten. The onMessage toimi sisällä onMessageListener laukeaa aina, kun sovellus vastaanottaa push-ilmoituksen ja on tarkentunut.

Kun ilmoitus vastaanotetaan, viestin hyötykuorma sisältää ilmoitukseen liittyvät olennaiset tiedot, kuten viestin otsikon ja tekstin.

Määritä Firebase Messaging Service Worker

FCM vaatii Firebase Messagingin palvelutyöntekijä käsitelläksesi saapuvia push-ilmoituksia.

Service Worker on JavaScript-tiedosto, joka toimii taustalla ja käsittelee push-ilmoituksia – se mahdollistaa verkon sovellus vastaanottaa ja näyttää ilmoituksia, vaikka käyttäjä olisi sulkenut sovelluksen tai vaihtanut toiselle välilehdelle tai ikkuna.

Vuonna /public hakemistoon, luo uusi firebase-messaging-sw.js tiedosto ja sisällytä seuraava koodi.

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-määritysobjekti 
konst firebaseConfig = {
"määritystiedot"
 };


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


messaging.onBackgroundMessage(toiminto(hyötykuorma) {
konsoli.Hirsi('Vastaanotettu taustaviesti', hyötykuorma);
konst notificationTitle = payload.notification.title;
konst ilmoitusasetukset = {
 body: payload.notification.body,
 };
 self.registration.showNotification (notificationTitle,
 ilmoitusasetukset);
});

Tämä koodi määrittää Firebase Cloud Messagingin palvelutyöntekijän React-sovelluksessa, mikä mahdollistaa ilmoitusten käsittelyn ja näyttämisen.

Luo ilmoituskomponentti

Luoda uusi komponentit/Notification.js tiedosto tiedostoon /src hakemistoon ja lisää seuraava koodi.

tuonti React, { useState, useEffect } alkaen'reagoi';
tuonti { Leivänpaahdin, paahtoleipä } alkaen'react-hot-toast';
tuonti { requestPermission, onMessageListener } alkaen"../firebase";
toimintoIlmoitus() {
konst [notification, setNotification] = useState({ otsikko: '', kehon: '' });
 useEffect(() => {
 requestPermission();
konst unsubscribe = onMessageListener().then((hyötykuorma) => {
 setNotification({
 title: payload?.notification?.title,
 body: payload?.notification?.body,
 });
 toast.success(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
 kesto: 60000, 
 asema: 'Yläoikea', jakso / selaimen sivulle
 });
});
palata() => {
 unsubscribe.catch((err) =>konsoli.Hirsi('epäonnistui:', err));
 };
 }, []);
palata (



 </div>
 );
}
viedäoletuksena Ilmoitus;

Tämä koodi määrittelee komponentin, joka käsittelee push-ilmoituksia. Se hyödyntää reagoi-kuuma-paahtoleipää kirjasto näyttääksesi ilmoitukset käyttäjälle.

Komponentti pyytää käyttäjän lupaa, kuuntelee saapuvia viestejä käyttäen onMessageListener -toimintoa ja näyttää oletusarvoisesti selainsivun oikeassa yläkulmassa yhden minuutin ajan ilmoituksen vastaanotetusta otsikosta ja tekstistä. Voit muokata ilmoitusta edelleen virkamiehen avulla reagoi-kuuma-paahtoleipää dokumentaatio ja CSS-sijaintiominaisuus.

Päivitä lopuksi App.js tiedosto tuodaksesi Ilmoitus komponentti.

tuonti'./App.css';
tuonti Ilmoitus alkaen'./components/Notification';
toimintoSovellus() {
palata (
"Sovellus">
"Sovelluksen otsikko"> 

 </header> 
 </div>
 );
}
viedäoletuksena Sovellus;

Testaa Push Notification -ominaisuutta

Siirry eteenpäin ja pyöritä kehityspalvelin ja avaa http://locahlhost: 3000 selaimessasi päästäksesi sovellukseen. Sinun pitäisi saada seuraava ponnahdusikkuna, jotta sovellus voi vastaanottaa ilmoituksia.

Klikkaus Sallia. The asiakastunnus tulee luoda ja kirjautua sisään selainkonsoli. Käytät tunnusta lähettääksesi ilmoituskampanjoita React-sovellukseesi.

Kopioi asiakastunnus ja siirry Firebasen kehittäjäkonsoliin Projektin Yleiskatsaus sivu. Klikkaa Cloud Messaging kortti alla Kasvata ja sitouta yleisöäsi osio.

Klikkaus Luo ensimmäinen kampanjasi, valitse Firebase-ilmoitusviestitja anna ilmoituksellesi otsikko ja viesti. Alla Laitteen esikatselu osio, napsauta Lähetä testiviesti.

Liitä ja lisää asiakastunnus seuraavaan ponnahdusikkunaan ja napsauta Testata lähettääksesi push-ilmoituksen.

Jos olet sovelluksessa, saat push-ilmoituksen. Jos ei, saat taustailmoituksen.

Push-ilmoitusten lähettäminen Firebase Cloud Messaging Service -palvelun avulla

Push-ilmoitukset ovat arvokas ominaisuus käyttökokemuksen parantamiseksi sekä verkko- että mobiilisovelluksissa. Tässä oppaassa korostettiin vaiheita push-ilmoitusten integroimiseksi Firebasen avulla, mukaan lukien käyttäjien käyttöoikeuksien käsittely ja viestikuuntelijoiden määrittäminen.

Firebase Cloud Messaging -sovellusliittymiä hyödyntämällä voit toimittaa tehokkaasti oikea-aikaisia ​​päivityksiä ja personoituja viestejä React-sovelluksiisi.