Configurazione delle notifiche push per app React Native utilizzando PushEngage

L'SDK React Native di PushEngage semplifica l'integrazione delle notifiche push nelle tue app React Native, offrendo un supporto impeccabile per Android e iOS. Offriamo tre framework per l'implementazione delle notifiche push per app: React, Native e Flutter. Puoi trovare guide per le notifiche push per app Native Android, iOS e Flutter per ulteriore assistenza.

In questa guida, ti guideremo attraverso la configurazione dell'SDK React Native di PushEngage per abilitare le notifiche push sia su Android che su iOS.

Prima di iniziare

Ecco un elenco delle cose che ti serviranno

• Un progetto React Native e supporto per moduli turbo. Se non hai un account, puoi registrarti qui.
• Account Firebase con configurazione di Firebase Cloud Messaging (FCM) per Android.
• Un account sviluppatore Apple per configurare i servizi Apple Push Notification (APN) per iOS.

Installazione dell'SDK React Native di PushEngage

Puoi installare l'SDK React Native di PushEngage utilizzando npm o yarn

npm install @pushengage/pushengage-react-native

Per React Native 0.77.0 o versioni precedenti

Se stai utilizzando la versione 0.77.0 o precedente di React Native, utilizza la versione 0.0.1 dell'SDK come mostrato di seguito:

npm install @pushengage/[email protected]

Configurazione di Android

Configurazione di Firebase Cloud Messaging (FCM)

Per abilitare le notifiche push per Android, dovrai configurare Firebase Cloud Messaging (FCM)

1. Accedi alla console Firebase utilizzando il tuo account Google.

2. Fai clic su “Aggiungi progetto” per creare un nuovo progetto, oppure seleziona un progetto esistente dal tuo elenco. Se stai utilizzando un progetto esistente, procedi direttamente al passaggio 4.

3. Inserisci un nome per il tuo progetto e fai clic su Continua. Completa il processo di configurazione facendo clic su “Crea progetto” nella schermata finale.

4. Nella dashboard del tuo progetto Firebase, fai clic sull'icona Android per aggiungere un'app Android.

5. Inserisci il nome del pacchetto della tua app Android (trovato in android/app/build.gradle nel blocco android) e fornisci un nome all'app. Fai clic su Registra al termine.

6. Scarica il file google-services.json e posizionalo nella root del tuo modulo app Android in android/app/.

7. Genera JSON del Service Account

• Nella console Firebase, fai clic sull'icona Impostazioni accanto a “Panoramica progetto” in alto a sinistra, quindi seleziona Impostazioni progetto.
• Naviga nella scheda Account di servizio.
• Fai clic su Genera nuova chiave privata e scarica il file .json.
• Conserva questo file al sicuro poiché ti servirà per la configurazione della dashboard di PushEngage.

8. Recupera l'ID mittente

• Nella console Firebase, fai clic sull'icona Impostazioni accanto a Panoramica del progetto in alto a sinistra e seleziona “Impostazioni del progetto”.
• Seleziona la scheda Cloud Messaging. Qui troverai l'ID mittente, necessario per l'inizializzazione dell'SDK di PushEngage.

Integra FCM con PushEngage

Per integrare senza problemi i dettagli FCM con la dashboard di PushEngage, puoi seguire i passaggi seguenti.

1. Accedi al tuo account PushEngage effettuando l'accesso

2. Nella navigazione a sinistra, vai su Impostazioni » Installazione. Scegli SDK Android

3. Dall'elenco delle piattaforme disponibili, scegli l'opzione SDK Android per configurare le notifiche push per Android.

4. Configura le impostazioni FCM – Inserisci il tuo ID mittente Firebase (recuperato dalla console Firebase). Carica il file JSON del Service Account (scaricato da Firebase). Fai clic sul pulsante Aggiorna per salvare queste impostazioni.

5. Dopo aver configurato le impostazioni FCM, ti verrà fornito un ID app. Copia questo ID app poiché è necessario per inizializzare l'SDK PushEngage Android nella tua app Flutter.

Configurazione iOS

Puoi seguire i passaggi dopo aver aperto nome_tua_app » iOS » nome_tua_app.xcworkspace.

Passaggio 1: Abilita notifiche remote

1. Apri il tuo progetto Xcode e seleziona il progetto radice nel Navigatore di progetto.

2. Scegli il tuo target principale dell'app.

3. Vai su “Firma e funzionalità“.

4. Assicurati che la funzionalità Modalità in background sia aggiunta. In caso contrario, aggiungila facendo clic sul pulsante “+ Funzionalità“.

5. Allo stesso modo, assicurati che la funzionalità Notifiche push sia aggiunta. In caso contrario, aggiungila utilizzando il pulsante “+ Funzionalità“.

Se la funzionalità “Notifiche push” non è visibile in Xcode:

1. Vai al tuo account sviluppatore Apple.

2. Vai su “Certificati, identificatori e profili“.

3. Seleziona l'identificatore della tua app.

4. Modifica la configurazione del tuo ID app e assicurati che le Notifiche push siano abilitate.

5. Torna a Xcode e prova ad aggiungere nuovamente la funzionalità Notifiche push.

Passaggio 2: Abilita le modalità in background

1. Nel tuo progetto Xcode, vai su “Firma e funzionalità“.

2. All'interno di “Modalità in background“, abilita sia “Notifiche remote” che “Fetch in background“.

Questo passaggio garantisce che la tua app possa gestire in modo efficiente le notifiche remote e i fetch in background.

Crea certificato APNs per iOS

Puoi fare riferimento alla guida qui per creare un certificato APNs per iOS se non ne hai già uno.

Aggiungi l'estensione Notification Service e l'estensione Notification Content

Questo è applicabile solo per i dispositivi iOS.

Creazione dell'estensione del servizio di notifica

La Notification Service Extension migliora la capacità della tua app iOS di ricevere notifiche. Viene utilizzata per modificare il contenuto della notifica o per recuperare/elaborare dati alla ricezione della notifica. Segui questi passaggi per creare una Notification Service Extension:

1. Apri Xcode e vai al tuo progetto.

2. Seleziona File » Nuovo » Target dal menu.

3. Nella finestra di selezione del modello, scegli Notification Service Extension e fai clic su Avanti.

4. Fornisci un nome per la tua estensione, ad esempio, PushEngageNotificationServiceExtension, e fai clic su Fine. 

Una volta terminata la creazione della Notification Service Extension, potrebbe esserti richiesto di attivarla. Non attivarla immediatamente.

5. Nel navigatore di progetto, seleziona la directory principale del progetto e seleziona il target NotificationServiceExtension nell'elenco dei target creato al punto 4.

6. Imposta il Deployment Target su iOS 10 o versioni successive, che è la versione di iOS in cui Apple ha introdotto il supporto per questa estensione. 

Inizializzazione dell'SDK di PushEngage per l'estensione del servizio di notifica

Per garantire il corretto funzionamento del PushEngage SDK nella tua iOS Notification Service Extension, segui questi passaggi:

1. Apri nome_tuo_progetto » ios » Podfile.

2. Aggiungi quanto segue al blocco post_install del target dell'app principale

post_install do |installer|
    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false,
      # :ccache_enabled => true
    )
  end

3. Aggiungi in fondo al file

target 'Your_Notification_Service_Extension_Name' do
  pod 'PushEngageExtension', '1.0.0'
end

4. Installa la dipendenza

pod repo update 
pod install  

5. Nel tuo target Notification Service Extension, assicurati di importare il framework PushEngage e aggiungere il codice di inizializzazione necessario.

Swift

import UserNotifications
import PushEngageExtension

class NotificationService: UNNotificationServiceExtension {

    var contentHandler: ((UNNotificationContent) -> Void)?
    var bestAttemptContent: UNMutableNotificationContent?
    var request: UNNotificationRequest?

    override func didReceive(_ request: UNNotificationRequest,
                             withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
        self.request = request
        self.contentHandler = contentHandler
        self.bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)

        if let bestContent = bestAttemptContent {
            PushEngageExtension.didReceiveNotificationExtensionRequest(request, bestContentHandler: bestContent)
            contentHandler(bestContent)
        }
    }

    override func serviceExtensionTimeWillExpire() {
        // Called just before the extension will be terminated by the system.
        // Use this as an opportunity to deliver your "best attempt" at modified
        // content, otherwise the original push payload will be used.
        if let contentHandler = contentHandler, let request = request, let bestAttemptContent = bestAttemptContent {
            guard let content = PushEngageExtension.serviceExtensionTimeWillExpire(request, content: bestAttemptContent) else {
                contentHandler(bestAttemptContent)
                return
            }
            contentHandler(content)
        }
    }
}

Creazione dell'estensione del contenuto di notifica

Per migliorare il modo in cui aggiungere un'interfaccia utente personalizzata, dovrai creare una Notificaton Content Extension. Segui i passaggi seguenti per configurare l'estensione:

1. In Xcode, vai su File » Nuovo » Target.

2. Seleziona Notificaton Content Extension e fai clic su Avanti.

3. Non selezionare “Attiva” nella finestra di dialogo che appare dopo aver fatto clic su Fine. Annullando, Xcode continuerà a eseguire il debug della tua app invece dell'estensione. Se la attivi accidentalmente, torna al debug della tua app all'interno di Xcode (accanto al pulsante di esecuzione).

4. Nel navigatore di progetto, seleziona la directory principale del progetto e seleziona il target NotificatonContentExtension nel progetto dall'elenco dei target creato al passaggio n. 2.

5. Imposta il Deployment Target su iOS 10 o versioni successive, che è la versione di iOS in cui Apple ha rilasciato il supporto per questa estensione. 

Inizializzazione dell'SDK di PushEngage per l'estensione del contenuto di notifica

Per garantire il corretto funzionamento del PushEngage SDK nella tua iOS Notification Content Extension, segui questi passaggi:

1. Apri nome_tuo_progetto » iOS » Podfile.

2. Aggiungi quanto segue in fondo al tuo Podfile:

target 'Your_Notification_Content_Extension_Name' do
  pod 'PushEngageExtension', '1.0.0'
end

3. Installa la dipendenza:

Entra nella directory ios del tuo progetto con cd ed esegui il comando seguente

pod repo update 
pod install 

4. Nel tuo target Notification Content Extension, assicurati di importare il framework PushEngage e aggiungere il codice di inizializzazione necessario. Ecco come puoi farlo con alcuni esempi di elementi UI:

Swift

import UIKit
import UserNotifications
import UserNotificationsUI
import SwiftUI
import PushEngageExtension

@available(iOSApplicationExtension 13.0, *)
class NotificationViewController: UIViewController, UNNotificationContentExtension {

    fileprivate var hostingView: UIHostingController<ContentView>?

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .white
    }

    func didReceive(_ notification: UNNotification) {
        if notification.request.content.categoryIdentifier == "your_identifier" {
            let payLoad = PushEngageExtension.getCustomUIPayLoad(for: notification.request)
            // Pass the payload to your custom SwiftUI view
            let view = ContentView(payLoadInfo: payLoad)
            hostingView = UIHostingController(rootView: view)
            if let hostingView = hostingView {
                addChild(hostingView)
                hostingView.view.translatesAutoresizingMaskIntoConstraints = false
                self.view.addSubview(hostingView.view)
                NSLayoutConstraint.activate([
                    hostingView.view.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
                    hostingView.view.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
                    hostingView.view.topAnchor.constraint(equalTo: self.view.topAnchor),
                    hostingView.view.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
                ])
            }
        }
    }
}

Aggiungi gruppi di app

I gruppi di app sono essenziali per abilitare la comunicazione tra l'app principale, l'estensione del servizio di notifica e l'estensione del contenuto di notifica. Segui questi passaggi per aggiungere i gruppi di app al tuo progetto iOS:

Se hai un gruppo di app esistente e desideri utilizzarlo, puoi saltare al punto 4.

1. Nel tuo progetto Xcode, nel navigatore di progetto, seleziona la directory principale del progetto e seleziona il target principale dell'app.

2. Naviga alla scheda Firma e funzionalità.

3. Fai clic sul pulsante “+ Funzionalità” e seleziona Gruppi di app dall'elenco.

4. Fai clic sul pulsante + per aggiungere un Gruppo di app.

5. Aggiungi un nome univoco al tuo Gruppo di app e fai clic su OK.

6. Nell'area dell'editor principale, seleziona il target principale della tua app. Se hai creato un gruppo di app, fornisci il nome del gruppo nella Info.plist della tua applicazione con la chiave PushEngage_App_Group_Key.

7. Aggiungi la stessa chiave e valore nel file Info.plist della Notification Service Extension.

8. Assicurati di selezionare lo stesso gruppo di app sia nel Target dell'Applicazione Principale che nella Tua_Notification_Service_Extension.

Inizializza PushEngage SDK

Nel tuo index.js, inizializza il PushEngage SDK.

import PushEngage from '@pushengage/pushengage-react-native';
PushEngage.setAppId('your-app-id');

Nel tuo AppDelegate.mm dell'app iOS

@import PushEngage;

@implementation AppDelegate

- (instancetype)init
{
    self = [super init];
    if (self) {
        [PushEngage swizzleInjectionWithIsEnabled: YES];
    }
    return self;
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"PushengageReactNativeExample";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};
  [PushEngage setInitialInfoFor:application with:launchOptions];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {
    completionHandler(UIBackgroundFetchResultNewData);
}

Gestione deepLink

Ascolta gli eventi deep link e gestiscili nella tua applicazione

const listenerSubscription = React.useRef<null | EventSubscription>(null);
React.useEffect(() => {
  // 1. Runtime taps — notification tapped while the app is running/backgrounded.
  listenerSubscription.current = PushEngage.onValueChanged((data) => {
    Alert.alert(`Deeplink: ${data.deepLink}`);
    console.log('Data:', data.data);
  });
  // 2. Cold-boot tap — the notification that launched the app from a killed
  //    state. Delivered once here, NOT through onValueChanged.
  PushEngage.getInitialNotification().then((initial) => {
    if (initial) {
      Alert.alert(`Deeplink: ${initial.deepLink}`);
      console.log('Data:', initial.data);
    }
  });
  return () => {
    listenerSubscription.current?.remove();
    listenerSubscription.current = null;
  };
}, []);

Risoluzione dei problemi

Aggiungi -fcxx-modules in Altre flag C++ per l'errore: uso di '@import' quando i moduli c++ sono disabilitati, considera l'uso di -fmodules e -fcxx-modules  nelle Impostazioni di Compilazione del progetto iOS.

Se desideri esplorare ulteriormente le capacità dell'SDK iOS, puoi consultare la nostra documentazione API dettagliata.

Se riscontri problemi, ti preghiamo di contattarci cliccando qui. Il nostro team di supporto sarà in grado di aiutarti.