Einrichtung der React Native App Push-Benachrichtigung mit PushEngage

Das PushEngage React Native SDK vereinfacht die Integration von Push-Benachrichtigungen in Ihre React Native Apps und bietet nahtlose Unterstützung für Android und iOS. Wir bieten drei Frameworks für die Implementierung von App-Push-Benachrichtigungen: React, Native und Flutter. Anleitungen für Native Android, iOS und Flutter App-Push-Benachrichtigungen finden Sie zur weiteren Unterstützung.

In dieser Anleitung führen wir Sie durch die Einrichtung des PushEngage React Native SDK, um Push-Benachrichtigungen sowohl für Android als auch für iOS zu aktivieren.

Bevor Sie beginnen

Hier ist eine Liste der Dinge, die Sie benötigen würden

• Ein React Native-Projekt & Turbo-Modul-Unterstützung.  Wenn Sie noch kein Konto haben, können Sie sich hier registrieren.
• Firebase-Konto mit eingerichteter Firebase Cloud Messaging (FCM) für Android.
• Ein Apple Developer-Konto zur Konfiguration von Apple Push Notification (APN)-Diensten für iOS.

Installation des PushEngage React Native SDK

Sie können das PushEngage React Native SDK entweder mit npm oder yarn installieren.

npm install @pushengage/pushengage-react-native

Für React Native 0.77.0 oder früher

Wenn Sie die React Native-Version 0.77.0 oder früher verwenden, nutzen Sie die Version 0.0.1 des SDK wie unten gezeigt:

npm install @pushengage/[email protected]

Android einrichten

Firebase Cloud Messaging (FCM) Einrichtung

Um Push-Benachrichtigungen für Android zu aktivieren, müssen Sie Firebase Cloud Messaging (FCM) konfigurieren.

1. Greifen Sie über Ihr Google-Konto auf die Firebase-Konsole zu.

2. Klicken Sie auf „Projekt hinzufügen“, um ein neues Projekt zu erstellen, oder wählen Sie ein vorhandenes Projekt aus Ihrer Liste aus. Wenn Sie ein vorhandenes Projekt verwenden, fahren Sie direkt mit Schritt 4 fort.

3. Geben Sie einen Namen für Ihr Projekt ein und klicken Sie auf Weiter. Schließen Sie den Einrichtungsvorgang ab, indem Sie auf dem letzten Bildschirm auf „Projekt erstellen“ klicken.

4. Klicken Sie im Dashboard Ihres Firebase-Projekts auf das Android-Symbol, um eine Android-App hinzuzufügen.

5. Geben Sie den Paketnamen Ihrer Android-App (zu finden in android/app/build.gradle unter dem Android-Block) ein und geben Sie einen App-Namen an. Klicken Sie auf Registrieren, wenn Sie fertig sind.

6. Laden Sie die Datei google-services.json herunter und legen Sie sie im Stammverzeichnis Ihres Android-App-Moduls unter android/app/ ab.

7. Service Account JSON generieren

• Klicken Sie in der Firebase-Konsole auf das Einstellungen-Symbol neben „Projektübersicht“ oben links und wählen Sie dann Projekteinstellungen.
• Navigieren Sie zur Registerkarte Dienstkonten.
• Klicken Sie auf Neuen privaten Schlüssel generieren und laden Sie die .json-Datei herunter.
• Bewahren Sie diese Datei sicher auf, da Sie sie für die Einrichtung des PushEngage-Dashboards benötigen.

8. Sender-ID abrufen

• Klicken Sie in der Firebase-Konsole auf das Einstellungen-Symbol neben Projektübersicht oben links und wählen Sie „Projekteinstellungen“.
• Wählen Sie die Registerkarte Cloud Messaging. Hier finden Sie die Sender-ID, die für die Initialisierung des PushEngage SDK benötigt wird.

FCM mit PushEngage integrieren

Um FCM-Details nahtlos in das PushEngage-Dashboard zu integrieren, können Sie die folgenden Schritte ausführen.

1. Greifen Sie auf Ihr PushEngage-Konto zu, indem Sie sich anmelden.

2. Gehen Sie in der linken Navigation zu Einstellungen » Installation. Wählen Sie Android SDK.

3. Wählen Sie aus der Liste der verfügbaren Plattformen die Option Android SDK, um Push-Benachrichtigungen für Android zu konfigurieren.

4. FCM-Einstellungen konfigurieren – Geben Sie Ihre Firebase Sender ID (abgerufen von der Firebase-Konsole) ein. Laden Sie die Service Account JSON-Datei (von Firebase heruntergeladen) hoch. Klicken Sie auf die Schaltfläche Aktualisieren, um diese Einstellungen zu speichern.

5. Nach der Konfiguration der FCM-Einstellungen erhalten Sie eine App-ID. Kopieren Sie diese App-ID, da sie zur Initialisierung des PushEngage Android SDK in Ihrer Flutter-App benötigt wird.

Einrichtung von iOS

Sie können die Schritte befolgen, nachdem Sie Ihr_projektname » iOS » Ihr_projektname.xcworkspace. geöffnet haben.

Schritt 1: Remote-Benachrichtigungen aktivieren

1. Öffnen Sie Ihr Xcode-Projekt und wählen Sie das Stammprojekt im Projektnavigator aus.

2. Wählen Sie Ihr Haupt-App-Ziel.

3. Navigieren Sie zu „Signing & Capabilities.“

4. Stellen Sie sicher, dass die Background Modes-Berechtigung hinzugefügt wurde. Wenn nicht, fügen Sie sie hinzu, indem Sie auf die Schaltfläche „+ Capability“ klicken.

5. Stellen Sie auf ähnliche Weise sicher, dass die Push Notifications-Berechtigung hinzugefügt wurde. Wenn nicht, fügen Sie sie mit der Schaltfläche „+ Capability“ hinzu.

Wenn die Berechtigung „Push-Benachrichtigungen“ in Xcode nicht sichtbar ist:

1. Gehen Sie zu Ihrem Apple Developer-Konto.

2. Navigieren Sie zu „Certificates, Identifiers & Profiles.“

3. Wählen Sie Ihren App-Identifikator aus.

4. Bearbeiten Sie die Konfiguration Ihrer App ID und stellen Sie sicher, dass Push Notifications aktiviert ist.

5. Kehren Sie zu Xcode zurück und versuchen Sie erneut, die Push Notifications-Berechtigung hinzuzufügen.

Schritt 2: Hintergrundmodi aktivieren

1. Navigieren Sie in Ihrem Xcode-Projekt zu „Signing & Capabilities.“

2. Aktivieren Sie unter „Background Modes“ sowohl „Remote notifications“ als auch „Background fetch.“

Dieser Schritt stellt sicher, dass Ihre App Remote-Benachrichtigungen und Hintergrundabrufe effizient verarbeiten kann.

iOS APNs-Zertifikat erstellen

Sie können sich auf die Anleitung hier beziehen, um ein iOS APNs-Zertifikat zu erstellen, falls Sie noch keines haben.

Notification Service-Erweiterung und Notification Content-Erweiterung hinzufügen

Dies gilt nur für iOS-Geräte.

Erstellen einer Notification Service Extension

Die Notification Service Extension erweitert die Fähigkeit Ihrer iOS-App, Benachrichtigungen zu empfangen. Sie wird verwendet, um den Inhalt der Benachrichtigung zu ändern oder Daten beim Empfang der Benachrichtigung abzurufen/zu verarbeiten. Befolgen Sie diese Schritte, um eine Notification Service Extension zu erstellen:

1. Öffnen Sie Xcode und navigieren Sie zu Ihrem Projekt.

2. Wählen Sie im Menü File » New » Target aus.

3. Wählen Sie im Fenster zur Vorlagenauswahl Notification Service Extension aus und klicken Sie auf Next.

4. Geben Sie einen Namen für Ihre Erweiterung ein, z. B. PushEngageNotificationServiceExtension, und klicken Sie auf Finish. 

Sobald Sie die Notification Service Extension erstellt haben, werden Sie möglicherweise aufgefordert, sie zu aktivieren. Aktivieren Sie sie nicht sofort.

5. Wählen Sie im Projektnavigator das oberste Projektverzeichnis aus und wählen Sie in der Zielliste, die in Schritt 4 erstellt wurde, das NotificationServiceExtension-Ziel aus.

6. Setzen Sie das Deployment Target auf iOS 10 oder höher, da dies die iOS-Version ist, für die Apple die Unterstützung für diese Erweiterung veröffentlicht hat. 

Initialisierung des PushEngage SDK für Notification Service Extension

Befolgen Sie diese Schritte, um die ordnungsgemäße Funktion des PushEngage SDK in Ihrer iOS Notification Service Extension sicherzustellen:

1. Öffnen Sie your_project_name » ios » Podfile.

2. Fügen Sie Folgendes zum post_install-Block des Haupt-App-Ziels hinzu

 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
    )
      installer.pods_project.targets.each do |target|
        target.build_configurations.each do |config|
          config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'No'
         end
      end
  end

3. Fügen Sie am Ende der Datei hinzu

target 'Your_Notification_Service_Extension_Name' do
  pod 'PushEngage', '~>0.0.5'
end

4. Installieren Sie die Abhängigkeit

pod repo update 
pod install  

5. Stellen Sie in Ihrem Notification Service Extension-Ziel sicher, dass Sie das PushEngage-Framework importieren und den erforderlichen Initialisierungscode hinzufügen.

Swift

import UserNotifications
import PushEngage

@available(iOSApplicationExtension 10.0, *)
class PushEngageNotificationServiceExtension: 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 {
            PushEngage.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 = PushEngage.serviceExtensionTimeWillExpire(request, content: bestAttemptContent) else {
                contentHandler(bestAttemptContent)
                return
            }
            contentHandler(content)
        }
    }

}

Erstellung einer Notification Content Extension

Um die Art und Weise durch Hinzufügen einer benutzerdefinierten Benutzeroberfläche zu verbessern, müssen Sie eine Notification Content Extension erstellen. Befolgen Sie die nachstehenden Schritte, um die Erweiterung einzurichten:

1. Gehe in Xcode zu File » New » Target.

2. Wähle Notification Content Extension und klicke auf Next.

3. Wählen Sie im Dialogfeld, das nach dem Klicken auf Fertig stellen erscheint, nicht „Aktivieren“. Das Abbrechen bewirkt, dass Xcode Ihre App anstelle der Erweiterung debuggt. Wenn Sie sie versehentlich aktivieren, wechseln Sie in Xcode zurück zum Debuggen Ihrer App (neben der Schaltfläche Ausführen).

4. Wählen Sie im Projektnavigator das oberste Projektverzeichnis aus und wählen Sie in der Zielliste, die in Schritt 2 erstellt wurde, das Ziel NotificationContentExtension aus.

5. Setzen Sie das Bereitstellungsziel auf iOS 10 oder höher, da dies die iOS-Version ist, für die Apple die Unterstützung für diese Erweiterung eingeführt hat. 

Initialisierung des PushEngage SDK für Notification Content Extension

Um die ordnungsgemäße Funktion des PushEngage SDK in Ihrer iOS Notification Content Extension sicherzustellen, befolgen Sie diese Schritte:

1. Öffne your_project_name » iOS » Podfile.

2. Füge Folgendes am Ende deiner Podfile hinzu:

target 'Your_Notification_Content_Extension_Name' do
  pod 'PushEngage', '0.0.5'
end

3. Installiere die Abhängigkeit:

Wechsle in das iOS-Verzeichnis deines Projekts und führe den folgenden Befehl aus

pod repo update 
pod install 

4. Stelle in deinem Notification Content Extension-Ziel sicher, dass du das PushEngage-Framework importierst und den notwendigen Initialisierungscode hinzufügst. Hier ist, wie du es mit einigen Beispielen von UI-Elementen tun kannst:

Swift

import UIKit
import UserNotifications
import UserNotificationsUI
import PushEngage

@available(iOSApplicationExtension 10.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 = PushEngage.getCustomUIPayLoad(for: notification.request)
  //pass the payload to your custom View
            let view = CustomView(payLoadInfo: payLoad)
            hostingView = UIHostingController(rootView: view)
If let customView = self.hostingView {
            addChild(hostingView!)
}
        }
    }
    
}

App-Gruppen hinzufügen

App-Gruppen sind unerlässlich, um die Kommunikation zwischen der Haupt-App, der Benachrichtigungsdienst-Erweiterung und der Benachrichtigungsinhalts-Erweiterung zu ermöglichen. Befolgen Sie diese Schritte, um Ihrem iOS-Projekt App-Gruppen hinzuzufügen:

Wenn du eine bestehende App-Gruppe hast und diese verwenden möchtest, kannst du zu Schritt 4 springen.

1. Wähle in deinem Xcode-Projekt im Projektnavigator das oberste Projektverzeichnis aus und wähle das Hauptziel der App aus.

2. Navigiere zur Registerkarte Signing & Capabilities.

3. Klicke auf die Schaltfläche „+ Capability“ und wähle App Groups aus der Liste aus.

4. Klicken Sie auf die Schaltfläche +, um eine App-Gruppe hinzuzufügen.

5. Fügen Sie Ihrer App-Gruppe einen eindeutigen Namen hinzu und klicken Sie auf OK.

6. Wähle im Hauptbearbeitungsbereich das Hauptziel deiner App aus. Wenn du eine App-Gruppe erstellt hast, gib den Namen der Gruppe in der Info.plist deiner Anwendung mit dem Schlüssel PushEngage_App_Group_Key an.

7. Fügen Sie denselben Schlüssel und Wert in die Info.plist-Datei der Benachrichtigungsdienst-Erweiterung ein.

8. Stellen Sie sicher, dass Sie dieselbe App-Gruppe sowohl im Hauptanwendungsziel als auch in Ihrer Benachrichtigungsdienst-Erweiterung auswählen.

PushEngage SDK initialisieren

Initialisiere das PushEngage SDK in deiner index.js.

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

In deiner AppDelegate.mm der iOS-App

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

DeepLink-Verarbeitung

Lausche auf Deep-Link-Ereignisse und verarbeite sie in deiner Anwendung

const listenerSubscription = React.useRef<null | EventSubscription>(null);

  React.useEffect(() => {
    listenerSubscription.current = PushEngage.onValueChanged((data) => {
      Alert.alert(`Deeplink: ${data.deepLink}`);
      console.log('Data:', data.data);
    });

    return () => {
      listenerSubscription.current?.remove();
      listenerSubscription.current = null;
    };
  }, []);

Fehlerbehebung

Füge -fcxx-modules zu Other C++ flags hinzu für den Fehler: use of ‘@import’ when c++ modules are disabled, consider using -fmodules and -fcxx-modules unter iOS project’s Build Settings.

Wenn du mehr über die Funktionen des iOS SDK erfahren möchtest, kannst du unsere detaillierte API-Dokumentation durchgehen.

Wenn du auf Probleme stößt, kontaktiere uns bitte, indem du hier klickst. Unser Support-Team wird dir helfen können.