Naučte se, jak využít funkci Firebase Cloud Messaging (FCM) k začlenění push notifikací do aplikace React.

Push notifikace umožňují aplikacím posílat včasné aktualizace, upozornění nebo personalizované zprávy přímo do zařízení uživatelů, bez ohledu na jejich aktivní používání aplikace. Tato upozornění zajišťují nepřetržité zapojení uživatelů a okamžité připojení.

V případě webových aplikací prohlížeč nejprve zachytí tato upozornění a následně je předá příslušné aplikaci.

Nastavte projekt Firebase

Chcete-li začít a nastavit projekt Firebase, postupujte takto:

  1. Zamiřte k Firebase Developer Console, přihlaste se pomocí své e-mailové adresy Google a klikněte na Přejděte do konzoly tlačítko pro přechod na stránku přehledu konzoly.
  2. Na stránce přehledu konzoly klikněte na Vytvořte projekt tlačítko pro vytvoření nového projektu. Poté zadejte název projektu.
  3. Jakmile je projekt úspěšně vytvořen, přejděte na stránku s přehledem projektu. Chcete-li generovat klíče API, musíte aplikaci zaregistrovat na Firebase. Chcete-li zaregistrovat aplikaci, klikněte na
    instagram viewer
    Web ikonu, zadejte název aplikace a klikněte na Registrovat aplikaci knoflík.
  4. Po registraci aplikace React zkopírujte konfigurační kód Firebase.

Nakonfigurujte službu Firebase Cloud Messaging (FCM).

Jakmile svou aplikaci zaregistrujete na Firebase, dalším krokem je konfigurace služby Firebase Cloud Messaging (FCM).

  1. Přejděte na Nastavení projektu strana.
  2. Dále klikněte na Cloud Messaging kartu na Nastavení projektu strana. Firebase Cloud Messaging používá páry klíčů Application Identity pro připojení k externím službám push. Z tohoto důvodu si musíte vygenerovat svůj jedinečný klíč identity.
  3. Na Cloud Messaging nastavení, přejděte na Webová konfigurace a klikněte na Vygenerujte pár klíčů tlačítko pro vygenerování vašeho jedinečného klíče.

Nastavte aplikaci React

První, vytvořit aplikaci React. Po instalaci pokračujte a nainstalujte Firebase a reagovat-horký-toast balíčky, které použijete k implementaci push notifikací v aplikaci React.

npm install firebase reagovat-hot-toast

Zdrojový kód tohoto projektu najdete zde úložiště GitHub.

Nakonfigurujte Firebase a Cloud Messaging Service

Zamiřte ke svému Nastavení projektu stránku na konzoli pro vývojáře a zkopírujte poskytnutý konfigurační objekt Firebase. V src adresář, vytvořte nový firebase.js soubor a přidejte následující kód.

import { initializeApp } z"firebase/app";
import { getMessaging, getToken, onMessage } z'firebase/messaging';
konst firebaseConfig = {
 apiKey: "",
 authDomain: "",
 ID projektu: "",
 úložný kbelík: "",
 messagingSenderId: "",
 appId: ""
};
konst app = initializeApp (firebaseConfig);
konst zasílání zpráv = getMessaging (aplikace);

Vyměňte výše uvedené firebaseConfig objekt s tím, který jste zkopírovali z Nastavení projektu strana. Tento kód nastaví instanci Firebase a inicializuje objekt pro zasílání zpráv v cloudu, aby byla ve vaší aplikaci povolena funkce FCM.

Spravujte požadavky na oprávnění uživatele pro oznámení

Chcete-li povolit aplikacím React přijímat oznámení push ze služby Cloud Messaging Firebase, musíte zpracovat uživatelská oprávnění.

To zahrnuje definování a volání požádat o povolení metoda poskytovaná objektem zasílání zpráv, který jste dříve nakonfigurovali. Zajišťuje, že správně zpracujete reakce uživatele na žádosti o povolení oznámení.

Přidejte následující kód do firebase.js soubor po inicializaci objektu zasílání zpráv.

vývozníkonst requestPermission = () => {
řídicí panel.log("Žádost o uživatelské oprávnění...");
 Notification.requestPermission().then((povolení) => {


-li (povolení "uděleno") {


řídicí panel.log("Udělování oprávnění uživatele k upozornění."); 
vrátit se getToken (zasílání zpráv, { vapidKey: `Notification_key_pair` })
 .pak((aktuální token) => {


-li (currentToken) {


řídicí panel.log('Token klienta:', aktuální token);
 } jiný {

řídicí panel.log("Nepodařilo se vygenerovat registrační token aplikace.");
 }
 })
 .chytit((chybovat) => {


řídicí panel.log("Při požadavku na přijetí tokenu došlo k chybě.", chyba);
 });
 } jiný {


řídicí panel.log("Uživatelské oprávnění odepřeno.");
 }
 });


 }
requestPermission();

Poskytnutý kód vyžaduje oprávnění uživatele pro oznámení a zpracovává odpověď na oprávnění. Pokud je povolení uděleno, pokračuje v získání registračního tokenu pro aplikaci pomocí getToken funkce.

Registrační token slouží jako identifikátor zařízení nebo prohlížeče, který přijímá oznámení. Tento token pak můžete použít k nastavení oznamovací kampaně na stránce nastavení Firebase Cloud Messaging.

Ujistěte se, že jste nahradili zástupný symbol Notification_key_pair se skutečným párem klíčů, který jste vygenerovali dříve v Webová konfigurace sekce.

Definujte posluchače oznámení

Aby bylo možné zpracovat jakýkoli typ příchozích oznámení, je nutné nastavit posluchače zpráv pro sledování příchozích oznámení a funkce zpětného volání pro spouštění událostí zasílání zpráv.

Ve vašem firebase.js soubor, přidejte následující kód.

vývozníkonst onMessageListener = () =>
NovýSlib((odhodlání) => {
 onMessage (zasílání zpráv, (užitné zatížení) => {
 vyřešit (užitné zatížení);
 });
});

Tato funkce nastaví posluchače zpráv speciálně pro oznámení push. The onMessage funkce uvnitř onMessageListener se spustí vždy, když aplikace obdrží oznámení push a je zaostřená.

Když je přijato oznámení, obsah zprávy bude obsahovat relevantní data spojená s oznámením, jako je název a tělo zprávy.

Definujte Firebase Messaging Service Worker

FCM vyžaduje Firebase Messaging servisní pracovník pro zpracování příchozích push notifikací.

Service worker je soubor JavaScriptu, který běží na pozadí a zpracovává oznámení push – umožňuje web aplikace pro příjem a zobrazení upozornění, i když uživatel aplikaci zavře nebo přepne na jinou kartu nebo okno.

V /public adresář, vytvořte nový firebase-messaging-sw.js soubor a zahrňte následující 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 konfigurace Firebase 
konst firebaseConfig = {
"informace o konfiguraci"
 };


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


messaging.onBackgroundMessage(funkce(užitečné zatížení) {
řídicí panel.log('Přijata zpráva na pozadí', užitečné zatížení);
konst notificationTitle = payload.notification.title;
konst možnosti upozornění = {
 tělo: užitečné zatížení.oznámení.tělo,
 };
 self.registration.showNotification (notificationTitle,
 možnosti upozornění);
});

Tento kód nastavuje servisního pracovníka pro Firebase Cloud Messaging v aplikaci React, který umožňuje zpracování a zobrazování oznámení.

Vytvořte komponentu oznámení

Vytvoř nový komponenty/Notification.js soubor v /src adresář a přidejte následující kód.

import Reagovat, { useState, useEffect } z'reagovat';
import { Toustovač, toasty } z'react-hot-toast';
import { requestPermission, onMessageListener } z'../firebase';
funkceOznámení() {
konst [notification, setNotification] = useState({ titul: '', tělo: '' });
 useEffect(() => {
 requestPermission();
konst unsubscribe = onMessageListener().then((užitečné zatížení) => {
 setNotification({
 title: užitečné zatížení?.oznámení?.titul,
 tělo: užitečné zatížení?.oznámení?.tělo,
 });
 přípitek.úspěch(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
 doba trvání: 60000, 
 pozice: 'vpravo nahoře', sekce z stránku prohlížeče
 });
});
vrátit se() => {
 unsubscribe.catch((chybovat) =>řídicí panel.log('se nezdařilo:', chyba));
 };
 }, []);
vrátit se (



 </div>
 );
}
vývoznívýchozí Oznámení;

Tento kód definuje komponentu, která zpracovává oznámení push. Využívá reagovat-horký-toast knihovny pro zobrazení upozornění pro uživatele.

Komponenta vyžaduje oprávnění uživatele, naslouchá příchozím zprávám pomocí onMessageListener a ve výchozím nastavení zobrazí oznámení o přípitku s přijatým názvem a tělem po dobu jedné minuty v pravé horní části stránky prohlížeče. Oznámení můžete dále upravit pomocí úředníka reagovat-horký-toast dokumentaci a vlastnost CSS position.

Nakonec aktualizujte App.js soubor k importu Oznámení komponent.

import'./App.css';
import Oznámení z'./components/Notification';
funkceAplikace() {
vrátit se (
"Aplikace">
"Záhlaví aplikace"> 

 </header> 
 </div>
 );
}
vývoznívýchozí Aplikace;

Vyzkoušejte funkci oznámení push

Pokračujte, roztočte vývojový server a otevřete jej http://locahlhost: 3000 ve vašem prohlížeči pro přístup k aplikaci. Mělo by se zobrazit následující vyskakovací okno, které aplikaci umožní přijímat upozornění.

Klikněte Dovolit. The klientský token by měl být vygenerován a přihlášen konzole prohlížeče. Token použijete k odesílání oznamovacích kampaní do vaší aplikace React.

Zkopírujte klientský token a přejděte do vývojářské konzole Firebase Přehled projektu strana. Klikněte na Cloud Messaging kartu pod Rozvíjejte a zapojte své publikum sekce.

Klikněte Vytvořte svou první kampaň, vyberte Zprávy Firebase Notificationa zadejte název a zprávu pro oznámení. Pod Náhled zařízení sekce, klikněte Odeslat zkušební zprávu.

Vložte a přidejte klientský token do vyskakovacího okna, které následuje, a klikněte Test k odeslání oznámení push.

Pokud jste v aplikaci, obdržíte oznámení push. Pokud ne, obdržíte upozornění na pozadí.

Odesílání oznámení Push pomocí služby Firebase Cloud Messaging Service

Push notifikace jsou cennou funkcí pro vylepšení uživatelského zážitku pro webové i mobilní aplikace. Tento průvodce zdůraznil kroky k integraci oznámení push pomocí Firebase, včetně zpracování uživatelských oprávnění a nastavení posluchačů zpráv.

Využitím rozhraní Firebase Cloud Messaging API můžete efektivně doručovat včasné aktualizace a personalizované zprávy do aplikací React.