React Native App Pushmeldingen Instellen met PushEngage

De PushEngage React Native SDK vereenvoudigt de integratie van pushmeldingen in uw React Native apps en biedt naadloze ondersteuning voor Android en iOS. We bieden drie frameworks voor het implementeren van app pushmeldingen: React, Native en Flutter. U kunt handleidingen vinden voor Native Android, iOS en Flutter app pushmeldingen voor verdere hulp.

In deze handleiding doorlopen we het instellen van de PushEngage React Native SDK om pushmeldingen op zowel Android als iOS in te schakelen.

Voordat u begint

Hier is een lijst met dingen die u nodig heeft

• Een React Native project & turbo module ondersteuning.  Als u nog geen account heeft, kunt u zich  hier aanmelden.
• Firebase-account met Firebase Cloud Messaging (FCM) ingesteld voor Android.
• Een Apple Developer-account om Apple Push Notification (APN) services te configureren voor iOS.

De PushEngage React Native SDK Installeren

U kunt de PushEngage React Native SDK installeren met npm of yarn

npm install @pushengage/pushengage-react-native

Voor React Native 0.77.0 of Eerder

Als u React Native versie 0.77.0 of eerder gebruikt, gebruik dan versie 0.0.1 van de SDK zoals hieronder weergegeven:

npm install @pushengage/[email protected]

Android instellen

Firebase Cloud Messaging (FCM) instellen

Om pushmeldingen voor Android in te schakelen, moet u Firebase Cloud Messaging (FCM) configureren

1. Ga naar de Firebase console met uw Google-account.

2. Klik op “Project Toevoegen” om een nieuw project aan te maken, of selecteer een bestaand project uit uw lijst. Als u een bestaand project gebruikt, ga dan direct door naar stap 4.

3. Voer een naam in voor uw project en klik op Doorgaan. Voltooi het instelproces door op “Project aanmaken” te klikken op het laatste scherm.

4. Klik in het dashboard van uw Firebase-project op het Android-pictogram om een Android-app toe te voegen.

5. Voer de pakketnaam van uw Android-app in (te vinden in android/app/build.gradle onder het android-blok) en geef een app-naam op. Klik op Registreren wanneer u klaar bent.

6. Download het google-services.json-bestand en plaats het in de hoofdmap van uw Android-appmodule op android/app/.

7. Genereer Service Account JSON

• Klik in de Firebase console op het Instellingen-pictogram naast "Projectoverzicht" linksboven en selecteer Projectinstellingen.
• Navigeer naar het tabblad Serviceaccounts.
• Klik op Nieuwe privésleutel genereren en download het .json-bestand.
• Bewaar dit bestand veilig, want u heeft het nodig voor de instelling van het PushEngage-dashboard.

8. Sender ID Ophalen

• Klik in de Firebase console op het Instellingen-pictogram naast Projectoverzicht linksboven en selecteer "Projectinstellingen."
• Selecteer het tabblad Cloud Messaging. Hier vindt u de Sender ID, die nodig is voor de initialisatie van de PushEngage SDK.

FCM Integreren met PushEngage

Om FCM-gegevens naadloos te integreren met het PushEngage Dashboard, kunt u de onderstaande stappen volgen.

1. Ga naar uw PushEngage-account door in te loggen

2. Ga in de linker navigatie naar Instellingen » Installatie. Kies Android SDK

3. Kies uit de lijst met beschikbare platforms de optie Android SDK om pushmeldingen voor Android te configureren.

4. FCM-instellingen configureren – Voer uw Firebase Sender ID in (opgehaald uit de Firebase Console). Upload het Service Account JSON-bestand (gedownload van Firebase). Klik op de knop Bijwerken om deze instellingen op te slaan.

5. Na het configureren van de FCM-instellingen krijgt u een App ID. Kopieer dit App ID, aangezien dit nodig is om de PushEngage Android SDK in uw Flutter-app te initialiseren.

iOS instellen

U kunt de stappen volgen na het openen van uw_project_naam » iOS » uw_project_naam.xcworkspace.

Stap 1: Remote Meldingen Inschakelen

1. Open uw Xcode-project en selecteer het hoofdproject in de Project Navigator.

2. Kies uw hoofdapp-doel.

3. Navigeer naar “Ondertekening & Mogelijkheden.“

4. Zorg ervoor dat de Achtergrondmodi-mogelijkheid is toegevoegd. Zo niet, voeg deze toe door op de knop “+ Mogelijkheid” te klikken.

5. Zorg er op dezelfde manier voor dat de Pushmeldingen-mogelijkheid is toegevoegd. Zo niet, voeg deze toe met de knop “+ Mogelijkheid“.

Als de "Pushmeldingen"-mogelijkheid niet zichtbaar is in Xcode:

1. Ga naar uw Apple Developer-account.

2. Navigeer naar “Certificaten, Identificaties & Profielen.“

3. Selecteer uw app-identificatie.

4. Bewerk de configuratie van uw App ID en zorg ervoor dat Pushmeldingen is ingeschakeld.

5. Keer terug naar Xcode en probeer de Pushmeldingen-mogelijkheid opnieuw toe te voegen.

Stap 2: Achtergrondmodi inschakelen

1. Navigeer in uw Xcode-project naar “Ondertekening & Mogelijkheden.“

2. Schakel binnen “Achtergrondmodi” zowel “Externe meldingen” als “Achtergrondophalen.“ in.

Deze stap zorgt ervoor dat uw app externe meldingen en achtergrondophalingen efficiënt kan verwerken.

iOS APNs-certificaat maken

U kunt de handleiding hier raadplegen om een iOS APNs-certificaat te maken als u er nog geen heeft.

Melding Service-extensie en Melding Content-extensie toevoegen

Dit is alleen van toepassing op iOS-apparaten.

Meldingenservice-extensie maken

De Notification Service Extension verbetert de mogelijkheid van uw iOS-app om meldingen te ontvangen. Dit wordt gebruikt om de inhoud van de melding te wijzigen of om gegevens op te halen/verwerken bij het ontvangen van de melding. Volg deze stappen om een Notification Service Extension te maken:

1. Open Xcode en navigeer naar uw project.

2. Selecteer Bestand » Nieuw » Doel in het menu.

3. Kies in het venster voor het selecteren van sjablonen Melding Service-extensie en klik op Volgende.

4. Geef een naam op voor uw extensie, bijvoorbeeld PushEngageNotificationServiceExtension, en klik op Voltooien. 

Nadat u de Melding Service-extensie heeft gemaakt, wordt u mogelijk gevraagd deze te activeren. Activeer deze niet onmiddellijk.

5. Selecteer in de projectnavigator de hoofdmap van het project en selecteer het NotificationServiceExtension-doel in het project uit de lijst met doelen die in stap 4 zijn gemaakt.

6. Stel het Implementatiedoel in op iOS 10 of hoger, de versie van iOS waarop Apple de ondersteuning voor deze extensie heeft uitgebracht. 

PushEngage SDK initialiseren voor Meldingenservice-extensie

Volg deze stappen om de juiste werking van de PushEngage SDK in uw iOS Melding Service-extensie te garanderen:

1. Open uw_projectnaam » ios » Podfile.

2. Voeg het volgende toe aan het post_install-blok van het hoofdapp-doel

 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. Voeg toe aan de onderkant van het bestand

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

4. Installeer de afhankelijkheid

pod repo update 
pod install  

5. Zorg ervoor dat u in uw Melding Service-extensie-doel het PushEngage-framework importeert en de benodigde initialisatiecode toevoegt.

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

}

Meldinginhoud-extensie maken

Om de manier te verbeteren door een aangepaste UI toe te voegen, moet u een Notification Content Extension maken. Volg de onderstaande stappen om de extensie in te stellen:

1. Ga in Xcode naar Bestand » Nieuw » Doel.

2. Selecteer Notification Content Extension en klik op Next.

3. Selecteer "Activate" niet in het dialoogvenster dat verschijnt na het klikken op Finish. Annuleren zorgt ervoor dat Xcode uw app debugt in plaats van de extensie. Als u het per ongeluk activeert, schakelt u terug naar het debuggen van uw app binnen Xcode (naast de uitvoeren-knop).

4. Selecteer in de projectnavigator de hoofdmap van het project en selecteer het NotificationContentExtension-doel in het project uit de lijst met doelen die in stap 2 zijn gemaakt.

5. Stel de Deployment Target in op iOS 10 of hoger, wat de versie van iOS is waarop Apple de ondersteuning voor deze extensie heeft uitgebracht. 

PushEngage SDK initialiseren voor Meldinginhoud-extensie

Volg deze stappen om de juiste werking van de PushEngage SDK in uw iOS Notification Content Extension te garanderen:

1. Open uw_projectnaam » iOS » Podfile.

2. Voeg het volgende toe onderaan je Podfile:

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

3. Installeer de afhankelijkheid:

cd naar de ios-directory van je project en voer het onderstaande commando uit

pod repo update 
pod install 

4. Zorg ervoor dat je in je Notification Content Extension-target het PushEngage-framework importeert en de benodigde initialisatiecode toevoegt. Hier zie je hoe je dit kunt doen met enkele voorbeelden van UI-elementen:

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-groepen toevoegen

App Groups zijn essentieel voor het mogelijk maken van communicatie tussen de hoofdapp, de notification service extension en de notification content extension. Volg deze stappen om App Groups toe te voegen aan uw iOS-project:

Als je al een app-groep hebt en deze wilt gebruiken, kun je doorgaan naar stap 4.

1. Selecteer in uw Xcode-project, in de projectnavigator, de hoofdmap van het project en selecteer het hoofd-doel van de app.

2. Navigeer naar het tabblad Signing & Capabilities.

3. Klik op de knop “+ Capability” en selecteer App Groups uit de lijst.

4. Klik op de knop + om een App Group toe te voegen.

5. Voeg een unieke naam toe aan uw App Group en klik op OK.

6. Selecteer in het hoofd-editorgebied het hoofd-target van je app. Als je een app-groep hebt aangemaakt, geef dan de naam van de groep op in de Info.plist van je applicatie met de sleutel PushEngage_App_Group_Key.

7. Voeg dezelfde sleutel en waarde toe in het Info.plist-bestand van de Notification Service Extension.

8. Zorg ervoor dat u dezelfde app-groep selecteert in zowel het hoofddoel van de app als de Your_Notification_Service_Extension.

Initialiseer PushEngage SDK

Initialiseer de PushEngage SDK in je index.js.

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

In je AppDelegate.mm van de 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 afhandelen

Luister naar deep link-gebeurtenissen en verwerk ze in je applicatie

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;
    };
  }, []);

Probleemoplossing

Voeg -fcxx-modules toe aan Other C++ flags voor de foutmelding: use of ‘@import’ when c++ modules are disabled, consider using -fmodules and -fcxx-modules  onder de Build Settings van het iOS-project.

Als je meer van de mogelijkheden van de iOS SDK wilt ontdekken, kun je onze gedetailleerde API-documentatie bekijken.

Als u problemen ondervindt, kunt u contact met ons opnemen door hier te klikken. Ons ondersteuningsteam zal u kunnen helpen.