Työntö-ilmoitusten toteuttaminen React Native -sovelluksessa voi merkittävästi parantaa käyttäjän sitoutumista tarjoamalla ajantasaisia päivityksiä ja hälytyksiä. Firebase Cloud Messaging (FCM) tarjoaa luotettavan ja helposti yhdentyvän ratkaisun työntö-ilmoitusten hallintaan eri alustoilla. Tämä opas opas opastaa sinua läpi vaiheet työntö-ilmoitusten toteuttamiseksi React Native käyttäen Firebase.

Edeltävät opinnot

  • React Native -projekti, joka on perustettu Expo- tai React Native CLI:n kanssa
  • Tuliasemakonsoliin luotu paloasemaprojekti
  • Perustiedot JavaScript ja React Native
  • Projektiin asennetut Firebase SDK-asennetut

Paloaseman perustaminen

Ensin luo Firebase-projekti ja lisää siihen sovelluksesi. Lataa asetustiedostot:

Androidille

Lataa Google-services.json-tiedosto ja aseta se projektisi Android/app-hakemistoon. Varmista, että lisäät Firebase SDK:n projektin riippuvuuksiin.

iOS-järjestelmän osalta

Lataa GoogleService-Info.plist-tiedosto ja lisää se Xcode-projektiin. Asenna Firebase SDK CocoaPodin kautta.

Riippuvuussuhteiden asentaminen

Asenna tarvittavat paloasemapaketit:

  • React Native CLI:

Juokse:

  • Messujen hallinnoima työnkulku:

Käytä Expo Firebase SDK tai pois päältä työnkulun natiivi moduuleita.

Pyytävät lupia ja hakevat Tokenia

React Native -koodissasi pyydät lupaa ilmoituksiin ja haet laitteen poletin:

Esimerkki:

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

Saapuvien ilmoitusten käsittely

Perustaa kuulijoita käsittelemään tulosaineistoa koskevia ilmoituksia ja vastauksia:

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

Lähetetään työntöilmoituksia

Käytä Firebase Cloud -viestien viestien API- tai Firebase Console-viestiä lähettääksesi ilmoituksia. Esimerkki hyötykuorma:

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

Lähetä viesti Firebase Cloud -viestiviestien välityksellä REST-rajapinta tai Firebase Console.

Päätelmät

Integrointi työntö-ilmoitukset Firebase React Native sisältää perustaa Firebase, pyytää oikeuksia, noutaa laite rahakkeita, ja käsittely viestejä. Oikea toteutus voi parantaa käyttäjän sitoutumista ja pitää sovelluksen dynaaminen ja interaktiivinen.