Implementare le notifiche push nel react Nativo Usando Firebase

Firebase Cloud Messaging (FCM) offre una soluzione affidabile e facile da integrare per la gestione delle notifiche push attraverso le piattaforme. Questa guida ti accompagna attraverso i passaggi per implementare le notifiche push in React Native utilizzando Firebase.

Prerequisiti

Impostazione di un Firebase

In primo luogo, creare un progetto Firebase e aggiungere la tua app ad esso.

Per Android

Scarica il file google-services.json e posizionalo nella directory Android/app del tuo progetto. Assicurati di aggiungere il Firebase SDK alle dipendenze del tuo progetto.

Per iOS

Scarica il file GoogleService-Info.plist e aggiungilo al tuo progetto Xcode. Installa il Firebase SDK tramite CocoaPods.

Installazione delle dipendenze

Installare i pacchetti Firebase necessari:

Utilizzare l'SDK di base di fuoco di Expo o espellere per il flusso di lavoro nudo per i moduli nativi.

Richiesta di autorizzazioni e di ottenere gettone

Nel codice React Native, richiedere il permesso per le notifiche e recuperare il token del dispositivo:

Esempio:

import messaging from '@react-native-firebase/messaging';

async function requestUserPermission() {
 const authStatus = await messaging().requestPermission();
 const enabled =
 authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
 authStatus === messaging.AuthorizationStatus.PROVISIONAL;

 if (enabled) {
 console.log('Authorization status:', authStatus);
 getFcmToken();
 }
}

async function getFcmToken() {
 const fcmToken = await messaging().getToken();
 if (fcmToken) {
 console.log('FCM Token:', fcmToken);
 // Send token to your server for push notifications
 }
}

requestUserPermission();

Gestione delle notifiche in entrata

Impostare gli ascoltatori per gestire le notifiche e le risposte di primo piano:

messaging().onMessage(async remoteMessage => {
 console.log('A new FCM message arrived!', remoteMessage);
 // Show local notification or update UI
});

messaging().setBackgroundMessageHandler(async remoteMessage => {
 console.log('Message handled in the background!', remoteMessage);
 // Handle background message
});

Inviare notifiche push

Utilizzare Firebase Cloud Messaging API o Firebase Console per inviare notifiche. Esempio di payload:

{
 "to": "",
 "notification": {
 "title": "Hello!",
 "body": "This is a push notification."
 }
}

Invia il messaggio tramite Firebase Cloud Messaging REST API o Firebase Console.

Conclusioni

Integrare le notifiche push con Firebase in React Native comporta l'impostazione di Firebase, la richiesta di autorizzazioni, il recupero dei token del dispositivo e la gestione dei messaggi.