Scopri come utilizzare la funzionalità Firebase Cloud Messaging (FCM) per incorporare le notifiche push all'interno di un'applicazione React.

Le notifiche push consentono alle applicazioni di inviare aggiornamenti tempestivi, avvisi o messaggi personalizzati direttamente ai dispositivi degli utenti, indipendentemente dal loro utilizzo attivo dell'applicazione. Queste notifiche garantiscono un coinvolgimento continuo degli utenti e una connettività istantanea.

Nel caso delle applicazioni web, il browser acquisisce inizialmente queste notifiche e successivamente le inoltra all'applicazione corrispondente.

Imposta un progetto Firebase

Segui i passaggi seguenti per iniziare e impostare un progetto Firebase:

  1. Vai a Console per gli sviluppatori di Firebase, accedi utilizzando il tuo indirizzo email Google e fai clic su Vai alla console pulsante per accedere alla pagina di panoramica della console.
  2. Nella pagina della panoramica della console, fare clic su Crea un progetto pulsante per creare un nuovo progetto. Quindi fornire il nome del progetto.
    3. instagram viewer
  3. Una volta che il progetto è stato creato con successo, vai alla pagina della panoramica del progetto. Devi registrare un'applicazione su Firebase per generare chiavi API. Per registrare un'app, fare clic su ragnatela icona, fornire il nome dell'app e fare clic sull'icona Registra l'app pulsante.
  4. Copia il codice di configurazione di Firebase dopo aver registrato la tua app React.

Configura il servizio Firebase Cloud Messaging (FCM).

Dopo aver registrato la tua applicazione su Firebase, il passaggio successivo è configurare il servizio Firebase Cloud Messaging (FCM).

  1. Naviga verso il Impostazioni del progetto pagina.
  2. Quindi, fare clic su Messaggi sulla nuvola scheda sul Impostazioni del progetto pagina. Firebase Cloud Messaging utilizza le coppie di chiavi di Application Identity per connettersi con i servizi push esterni. Per questo motivo, devi generare la tua chiave di identità univoca.
  3. Sul Messaggi sulla nuvola impostazioni, vai a Configurazione web sezione e fare clic su Genera coppia di chiavi pulsante per generare la tua chiave univoca.

Configura l'app React

Primo, creare un'app React. Una volta installato, vai avanti e installa il file base di fuoco E reagire-hot-toast pacchetti che utilizzerai per implementare le notifiche push nell'app React.

npm installa firebase react-hot-toast

Puoi trovare il codice sorgente di questo progetto in questo Deposito GitHub.

Configura Firebase e il servizio di messaggistica cloud

Vai al tuo Impostazioni del progetto pagina nella console per sviluppatori e copia l'oggetto di configurazione Firebase fornito. Nel src directory, creane una nuova firebase.js file e aggiungere il seguente codice.

importare { inizializzaApp } da"firebase/app";
importare { getMessaging, getToken, onMessage } da'firebase/messaggi';
cost firebaseConfig = {
 Chiave API: "",
 authDominio: "",
 ID progetto: "",
 secchio di stoccaggio: "",
 messaggisticaSenderId: "",
 ID app: ""
};
cost app = initializeApp (firebaseConfig);
cost messaggistica = getMessaging (app);

Sostituisci quanto sopra firebaseConfig oggetto con quello che hai copiato da Impostazioni del progetto pagina. Questo codice configurerà l'istanza Firebase e inizializzerà l'oggetto di messaggistica cloud per abilitare la funzionalità FCM nella tua applicazione.

Gestisci le richieste di autorizzazione utente delle notifiche

Per consentire alle applicazioni React di ricevere notifiche push dal servizio di messaggistica cloud di Firebase, è necessario gestire le autorizzazioni utente.

Ciò comporta la definizione e la chiamata di richiesta di permesso metodo fornito dall'oggetto di messaggistica, che è stato configurato in precedenza. Garantisce la corretta gestione delle risposte dell'utente alle richieste di autorizzazione delle notifiche.

Aggiungere il seguente codice al file firebase.js file dopo aver inizializzato l'oggetto di messaggistica.

esportarecost richiestaPermesso = () => {
consolare.tronco d'albero("Richiesta autorizzazione utente...");
 Notification.requestPermission().then((autorizzazione) => {


Se (autorizzazione "concesso") {


consolare.tronco d'albero("Autorizzazione utente notifica concessa."); 
ritorno getToken (messaggistica, { vapidKey: `Coppia_di_chiavi_di_notifica` })
 .Poi((token corrente) => {


Se (token corrente) {


consolare.tronco d'albero("Token cliente: ", Token corrente);
 } altro {

consolare.tronco d'albero("Impossibile generare il token di registrazione dell'app.");
 }
 })
 .presa((errare) => {


consolare.tronco d'albero('Si è verificato un errore durante la richiesta di ricevere il token.', errare);
 });
 } altro {


consolare.tronco d'albero("Autorizzazione utente negata.");
 }
 });


 }
richiesta di permesso();

Il codice fornito richiede l'autorizzazione dell'utente per le notifiche e gestisce la risposta dell'autorizzazione. Se l'autorizzazione viene concessa, procede all'ottenimento di un token di registrazione per l'applicazione utilizzando il file getToken funzione.

Il token di registrazione funge da identificatore per il dispositivo o il browser che riceve le notifiche. Puoi quindi utilizzare questo token per configurare una campagna di notifica nella pagina delle impostazioni di Firebase Cloud Messaging.

Assicurati di sostituire il segnaposto Notification_key_pair con la coppia di chiavi effettiva che hai generato in precedenza nel file Configurazione web sezione.

Definire i listener di notifica

Per gestire qualsiasi tipo di notifica in arrivo, è necessario configurare i listener di messaggi per tenere traccia delle notifiche in arrivo e le funzioni di richiamata per attivare qualsiasi evento di messaggistica.

Nel tuo firebase.js file, aggiungere il seguente codice.

esportarecost onMessageListener = () =>
nuovoPromettere((risolvere) => {
 onMessage (messaggistica, (payload) => {
 risolvere (carico utile);
 });
});

Questa funzione imposta un listener di messaggi specifico per le notifiche push. IL onMessage funzione all'interno onMessageListener viene attivato ogni volta che l'app riceve una notifica push ed è attiva.

Quando viene ricevuta una notifica, il payload del messaggio conterrà i dati rilevanti associati alla notifica, come il titolo e il corpo del messaggio.

Definisci un Firebase Messaging Service Worker

FCM richiede un messaggio Firebase lavoratore di servizio per gestire le notifiche push in arrivo.

Il service worker è un file JavaScript che viene eseguito in background e gestisce le notifiche push: consente al web app per ricevere e visualizzare le notifiche, anche se l'utente ha chiuso l'app o è passato a un'altra scheda o finestra.

Nel /public directory, creane una nuova firebase-messaging-sw.js file e includere il seguente codice.

importScript(" https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js");
importScript(" https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js");
//l'oggetto di configurazione Firebase 
cost firebaseConfig = {
"informazioni sulla configurazione"
 };


firebase.initializeApp (firebaseConfig);
cost messaggistica = firebase.messaging();


messaggistica.onBackgroundMessage(funzione(carico utile) {
consolare.tronco d'albero('Messaggio in background ricevuto', carico utile);
cost NotificationTitle = payload.notification.title;
cost opzioni di notifica = {
 corpo: payload.notification.body,
 };
 self.registration.showNotification (notificationTitle,
 opzioni di notifica);
});

Questo codice configura un service worker per Firebase Cloud Messaging nell'applicazione React, abilitando la gestione e la visualizzazione delle notifiche.

Crea un componente di notifica

Crea un nuovo componenti/Notification.js file nel /src directory e aggiungere il seguente codice.

importare Reagire, {useState, useEffect} da'reagire';
importare {Tostapane, toast} da'reagire-hot-toast';
importare { requestPermission, onMessageListener } da'../base di fuoco';
funzioneNotifica() {
cost [notifica, setNotifica] = useState({ titolo: '', corpo: '' });
 usaEffetto(() => {
 richiesta di permesso();
cost unsubscribe = onMessageListener().then((carico utile) => {
 setNotification({
 titolo: payload?.notifica?.titolo,
 corpo: payload?.notifica?.corpo,
 });
 brindisi.successo(`${carico utile?.notifica?.titolo}: ${carico utile?.notifica?.corpo}`, {
 durata: 60000, 
 posizione: 'in alto a destra', sezione Di la pagina del browser
 });
});
ritorno() => {
 disiscriviti.catch((errare) =>consolare.tronco d'albero('fallito: ', err));
 };
 }, []);
ritorno (



 </div>
 );
}
esportarepredefinito Notifica;

Questo codice definisce un componente che gestisce le notifiche push. Utilizza il reagire-hot-toast libreria per visualizzare le notifiche per l'utente.

Il componente richiede l'autorizzazione dell'utente, ascolta i messaggi in arrivo utilizzando onMessageListener funzione e per impostazione predefinita visualizza una notifica popup con il titolo e il corpo ricevuti per una durata di un minuto nella sezione in alto a destra della pagina del browser. Puoi personalizzare ulteriormente la notifica con l'aiuto del funzionario reagire-hot-toast documentazione e la proprietà posizione CSS.

Infine, aggiorna il file App.js file per importare il file Notifica componente.

importare'./App.css';
importare Notifica da'./componenti/Notifica';
funzioneApp() {
ritorno (
"App">
"Intestazione app"> 

 </header> 
 </div>
 );
}
esportarepredefinito Applicazione;

Prova la funzione di notifica push

Vai avanti e avvia il server di sviluppo e apri http://locahlhost: 3000 sul tuo browser per accedere all'applicazione. Dovresti ottenere il seguente pop-up per consentire all'applicazione di ricevere notifiche.

Clic Permettere. IL token cliente dovrebbe essere generato e registrato nel file console del browser. Utilizzerai il token per inviare campagne di notifica alla tua app React.

Copia il token cliente e vai alla console per sviluppatori di Firebase Panoramica del progetto pagina. Clicca il Messaggi sulla nuvola carta sotto il Fai crescere e coinvolgi il tuo pubblico sezione.

Clic Crea la tua prima campagna, Selezionare Messaggi di notifica Firebasee fornire un titolo e un messaggio per la notifica. Sotto il Anteprima del dispositivo sezione, fare clic su Invia messaggio di prova.

Incolla e aggiungi il token client nella finestra pop-up che segue e fai clic Test per inviare la notifica push.

Se sei sull'applicazione, riceverai una notifica push. In caso contrario, riceverai una notifica in background.

Invio di notifiche push tramite Firebase Cloud Messaging Service

Le notifiche push sono una funzionalità preziosa per migliorare l'esperienza dell'utente sia per le applicazioni Web che per dispositivi mobili. Questa guida ha evidenziato i passaggi per l'integrazione delle notifiche push utilizzando Firebase, inclusa la gestione delle autorizzazioni degli utenti e l'impostazione dei listener di messaggi.

Sfruttando le API di Firebase Cloud Messaging, puoi fornire in modo efficace aggiornamenti tempestivi e messaggi personalizzati alle tue applicazioni React.