Notificări în fundal în React Native: integrarea Firebase și Expo pas cu pas

În dezvoltarea cu React Native ne-am confruntat cu complexitatea notificărilor în fundal, o provocare întâlnită de mulți dezvoltatori. Pe măsură ce încercam să integrăm Firebase Cloud Messaging (FCM) în aplicațiile noastre, am observat că lipseau resursele care să explice complet procesul. Am început astfel să explorăm particularitățile notificărilor în fundal în React Native.

Acest articol prezintă lecțiile învățate și un parcurs pentru propria implementare. La final vei avea o imagine mai clară a integrării notificărilor în fundal cu Firebase Cloud Messaging. Să trecem la detalii.

Ce este Firebase?

Firebase Cloud Messaging (FCM) este infrastructura care le permite dezvoltatorilor să stabilească un canal de comunicare între serviciile din cloud și aplicațiile React Native. FCM oferă suport pentru Android și iOS, inclusiv pentru comunicarea cu aplicația atunci când aceasta nu este activă. Să vedem ce înseamnă acest lucru în dezvoltarea React Native.

Condiții preliminare: pregătirea proiectului

Înainte să integrăm FCM, trebuie să pregătim proiectul React Native. Urmează acești pași pentru a-l configura folosind Expo:

1. Creează un proiect numit notifire-react-native

npx create-expo-app notifire-react-native

2. Intră în directorul proiectului

cd notifire-react-native

3. Pornește serverul de dezvoltare

npx expo start

Dacă folosești Ubuntu 20.04, vei avea nevoie de un tunel pentru a accesa serverul de dezvoltare:

expo start --tunnel

Pentru instrucțiuni mai detaliate despre crearea proiectului cu Expo, consultă documentația oficială.

Acum putem integra Firebase. Urmează pașii:

1. Creează un proiect nou în Firebase Console

2. Creează în noul proiect câte o aplicație pentru fiecare platformă: iOS și Android.

Configurarea Firebase în proiectul React Native

Înainte să folosim serviciile Firebase, trebuie configurată baza integrării. Pașii de mai jos descriu această configurare.

1. Instalează modulul @react-native-firebase/app

Asigură-te că ai instalat modulul necesar. Folosește Expo pentru instalarea pachetului @react-native-firebase/app în rădăcina aplicației:

npx expo install @react-native-firebase/app

2. Adaugă fișierele de configurare Firebase

Descarcă din aplicațiile Firebase Console fișierul corespunzător fiecărei platforme:

• Pentru Android: google-services.json.
• Pentru iOS: GoogleService-Info.plist.

Pune aceste fișiere în rădăcina proiectului.

3. Configurează app.json

Actualizează app.json pentru a include googleServicesFile. Fragmentul de configurare arată astfel:

{
  "expo": {
    "android": {
      "googleServicesFile": "./google-services.json"
    },
    "ios": {
      "googleServicesFile": "./GoogleService-Info.plist"
    },
    "package": "com.notifire",
    "plugins": [
      "@react-native-firebase/app",
      "@react-native-firebase/perf",
      "@react-native-firebase/crashlytics"
    ]
  }
}

Configurare specifică iOS

Pentru iOS sunt necesare configurări suplimentare din cauza dependenței use_frameworks din firebase-ios-sdk. Configurează expo build properties în app.json:

[
  "expo-build-properties",
  {
    "ios": {
      "useFrameworks": "static"
    }
  }
]

Crearea fișierului firebase.ts în rădăcina proiectului

Acum creăm fișierul firebase.ts și configurăm setările necesare.

1. Creează configurația pentru inițializarea aplicației Firebase

În exemple, înlocuiește valorile demonstrative cu identificatorii propriului proiect.

const firebaseConfig = {
  apiKey: 'YOUR_FIREBASE_API_KEY',
  projectId: 'notifire-react-native',
  project_number: 'YOUR_FIREBASE_PROJECT_NUMBER',
  messagingSenderId: 'YOUR_FIREBASE_PROJECT_NUMBER',
  packageName: 'com.notifire',
  appId: 'YOUR_FIREBASE_APP_ID',
}

Iată principalele componente ale configurației:

• apiKey: cheia API client din google-services.json.
• projectId: identificatorul unic ales pentru proiectul Firebase, folosit ca alias de referință. Îl găsești în Firebase Console → Project overview → fila General → proiectul tău.
• project_number / messagingSenderId: identificatori numerici unici la nivel global, folosiți pentru configurarea integrărilor și a apelurilor API către Firebase sau servicii terțe. Sunt disponibili în Firebase Console → Project overview → General → proiectul tău.
• packageName: numele pachetului aplicației, comun pentru Android și iOS. Îl găsești în Firebase Console → Project overview → General → Your apps.
• appId: identificatorul unic al aplicației Android sau iOS, disponibil în Firebase Console → Project overview → General → Your apps.

Instalează firebase pentru a inițializa aplicația:

npm install firebase

2. Inițializează aplicația Firebase

import { initializeApp } from 'firebase/app';
initializeApp(firebaseConfig);

Conectarea FCM cu API-ul aplicației este importantă pentru comunicare. Se folosește un token FCM obținut din modulul messaging al @react-native-firebase/messaging. Acest token este apoi utilizat de API pentru a trimite notificări aplicației React Native. Pentru ca procesul să funcționeze, tokenul trebuie obținut, stocat local și transmis API-ului.

3. Obține tokenul FCM

Înainte să obții tokenul prin messaging(), mai ales pe iOS, trebuie să ceri permisiunea aplicației pentru mesagerie. Acest pas permite trimiterea și primirea mesajelor.

await messaging().requestPermission();

Aspecte specifice iOS

Pe dispozitivele iOS, dacă înregistrarea automată APNs este dezactivată, dispozitivul trebuie înregistrat explicit pentru a primi mesaje de la FCM. Ghidul original folosește și o cheie VAPID, generată în setările proiectului Firebase, la Cloud Messaging → Web Configuration.

Pentru stocarea globală a tokenului în aplicația React Native se poate folosi @react-native-async-storage/async-storage, instalat prin npm sau yarn. Pentru trimiterea tokenului către un endpoint API pot fi utilizați interceptori axios.

După clarificarea rolului tokenului FCM, fișierul firebase.ts are următoarea structură:

import 'firebase/firestore';
import 'firebase/auth';
import 'firebase/analytics';
// @ts-ignore
import { initializeApp } from 'firebase/app';
import { Platform } from 'react-native';

import messaging from '@react-native-firebase/messaging';
import AsyncStorage from '@react-native-async-storage/async-storage';

const firebaseConfig = {
    apiKey: 'YOUR_FIREBASE_API_KEY',
    projectId: 'notifire-react-native',
    project_number: 'YOUR_FIREBASE_PROJECT_NUMBER',
    messagingSenderId: 'YOUR_FIREBASE_PROJECT_NUMBER',
    packageName: 'com.notifire',
    appId: 'YOUR_FIREBASE_APP_ID',
};
export default function Firebase() {
    const vapidKey = 'YOUR_FIREBASE_VAPID_KEY';
    async function getFirebaseToken() {
        initializeApp(firebaseConfig);
// store FCM token on the app current user ID
        const authUserId = 1;
//check if the app has the right permissions before getting the FCM token
        const hasPermissions = await messaging().hasPermission();
        function getFCMToken() {
            return messaging().getToken({
                vapidKey: vapidKey,
            });
        }
        if (Platform.OS === 'ios') {
            if (hasPermissions) {
                await messaging().registerDeviceForRemoteMessages();

                const fcmToken = await getFCMToken();

                await AsyncStorage.setItem('authUser', JSON.stringify({ fcm_token: fcmToken, id: authUserId }));
            } else {
                await messaging().requestPermission();
            }
        } else if (Platform.OS === 'android') {
            if (hasPermissions) {
                const fcmToken = await getFCMToken();
                await AsyncStorage.setItem('authUser', JSON.stringify({ fcm_token: fcmToken, id: authUserId }));
            }
        }
    }
    getFirebaseToken()
        .then((r) => console.log(r))
        .catch((error) => console.log(error));
}

Testarea Firebase Cloud Messaging pe Android

React Native Firebase nu se integrează direct cu Expo Go, deoarece necesită cod nativ personalizat. Pentru acest flux se recomandă un build de dezvoltare creat cu EAS Build.

Testarea Firebase Cloud Messaging pe iOS

Pentru testarea FCM pe iOS este utilă o platformă precum TestFlight. Aceasta oferă un mediu controlat înainte de publicarea oficială a aplicației, în care utilizatorii pot verifica funcționalități precum integrarea FCM în condiții reale. Consultă documentația oficială Firebase pentru instrucțiuni privind configurarea iOS și testarea.

Trimiterea mesajelor în fundal din Firebase Console

După configurarea aplicației pentru primirea mesajelor FCM și testarea pe Android și iOS, putem trimite mesaje direct din Firebase Console.

Prin această implementare, aplicația React Native ajunge la un rezultat important: notificări în fundal integrate în fluxul său de funcționare.

Instrumente

Scopul acestui ghid despre Firebase Cloud Messaging în React Native cu Expo a fost să simplifice parcursul de dezvoltare. Am oferit o structură clară, astfel încât să nu fie nevoie să reconstruiești procesul din multe surse separate.

Sperăm că materialul te ajută să înțelegi și să implementezi mai repede notificările push în proiectele React Native.

React Native

React Native Firebase

Firebase

Expo EAS Build