Implementere push varsler i en React Native app kan betydelig forbedre brukeren engasjement ved å gi rettidige oppdateringer og varsler. Firebase Cloud Memories (FCM) tilbyr en pålitelig og enkel å integrere løsning for å administrere push varsler på tvers av plattformer. Denne guiden går deg gjennom trinnene for å implementere push varsler i React Native ved hjelp av Firebase.

Forutsetninger

  • Et react-institusjonelt prosjekt som er satt opp med Expo eller React Native CLI
  • Et Firebase-prosjekt opprettet i Firebase Console
  • Grunnleggende kunnskap om JavaScript og React Native
  • Firebase SDK installert i prosjektet ditt

Sette opp brannbase

Først opprette et Firebase-prosjekt og legge appen til det. Last ned konfigurasjonsfilene:

For Android

Last ned google-services.json-filen og legg den i prosjektets Android/app-katalog. Sørg for å legge til Firebase SDK i prosjektavhengighetene.

For iOS

Last ned GoogleService-Info.plist-filen og legg den til i Xcode-prosjektet. Installer Firebase SDK via CocoaPods.

Installere avhengigheter

Installer de nødvendige Firebase-pakkene:

  • For React Native CLI:]

Kjør:

  • For Expo forvaltet arbeidsflyt:

Bruk Expo Firebase SDK eller utløp til å bare arbeidsflyt for innfødte moduler.

Be om tillatelser og å få tak i

I din React Native-kode ber du om tillatelse til varsling og hente enhetssymbolet:

Eksempel:

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();

Håndtering av innkommende varsler

Sett opp lyttere til å håndtere forgrunnsvarsler og svar:

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
});

Sende pushvarsler

Bruk Firebase Cloud Meading API eller Firebase Console til å sende varsler. Eksempel nyttelast:

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

Send meldingen via Firebase Cloud Meading REST API eller Firebase Console.

Konklusjon

Integrering av pressevarsler med Firebase i React Native innebærer å sette opp Firebase, be om tillatelser, hente enhetstokenser og håndtere meldinger. Korrekt implementering kan forbedre brukeren engasjement og holde appen dynamisk og interaktiv.