PushEngage Dokumentation

Dokumentation, reference materiale og vejledninger til PushEngage

Opsætning af React Native App Push-meddelelse ved hjælp af PushEngage

PushEngage React Native SDK forenkler integrationen af push-notifikationer i dine React Native-apps og tilbyder problemfri understøttelse til Android og iOS. Vi tilbyder tre frameworks til implementering af app push-notifikationer: React, Native og Flutter. Du kan finde vejledninger til Native Android, iOS og Flutter app push-notifikationer for yderligere hjælp.

I denne vejledning vil vi gennemgå opsætningen af PushEngage React Native SDK for at aktivere push-notifikationer på både Android og iOS.

Før du starter

Her er en liste over ting, du skal bruge

  • Et React Native-projekt & turbo-modulunderstøttelse.  Hvis du ikke har en konto, kan du tilmelde dig her.
  • Firebase-konto med Firebase Cloud Messaging (FCM) opsat til Android.
  • En Apple Developer-konto til at konfigurere Apple Push Notification (APN) tjenester til iOS.
Kom i gang med React Native App Push-notifikationer Nu

Installation af PushEngage React Native SDK

Du kan installere PushEngage React Native SDK ved hjælp af enten npm eller yarn

npm install @pushengage/pushengage-react-native

Til React Native 0.77.0 eller tidligere

Hvis du bruger React Native version 0.77.0 eller tidligere, skal du bruge version 0.0.1 af SDK'en som vist nedenfor:

npm install @pushengage/[email protected]

Opsætning af Android

Firebase Cloud Messaging (FCM) Opsætning

For at aktivere push-notifikationer til Android skal du konfigurere Firebase Cloud Messaging (FCM)

1. Få adgang til Firebase-konsollen ved hjælp af din Google-konto.

2. Klik på "Tilføj projekt" for at oprette et nyt projekt, eller vælg et eksisterende projekt fra din liste. Hvis du bruger et eksisterende projekt, skal du fortsætte direkte til trin 4.

3. Angiv et navn til dit projekt, og klik på Fortsæt. Gennemfør opsætningsprocessen ved at klikke på "Opret projekt" på den sidste skærm.

4. På dit Firebase-projektdashboard skal du klikke på Android-ikonet for at tilføje en Android-app.

5. Angiv din Android-apps pakkenavn (findes i android/app/build.gradle under android-blokken) og angiv et appnavn. Klik på Registrer, når du er færdig.

6. Download google-services.json-filen, og placer den i roden af dit Android-appmodul på android/app/.

7. Generer Service Account JSON

  • I Firebase-konsollen skal du klikke på Indstillinger-ikonet ved siden af “Projektoversigt” øverst til venstre og derefter vælge Projektindstillinger.
  • Naviger til fanen Servicekonti.
  • Klik på Generer ny privat nøgle, og download .json-filen.
  • Opbevar denne fil sikkert, da du skal bruge den til opsætningen af PushEngage-dashboardet.

8. Hent afsender-ID

  • I Firebase-konsollen skal du klikke på Indstillinger-ikonet ved siden af Projektoversigt øverst til venstre og vælge “Projektindstillinger.”
  • Vælg fanen Cloud Messaging. Her finder du afsender-ID'et, som er nødvendigt for initialisering af PushEngage SDK.

Integrer FCM med PushEngage

For problemfrit at integrere FCM-detaljer med PushEngage Dashboard kan du følge nedenstående trin.

1. Få adgang til din PushEngage-konto ved at logge ind

2. I venstre navigation skal du gå til Indstillinger » Installation. Vælg Android SDK

3. Vælg muligheden Android SDK fra listen over tilgængelige platforme for at konfigurere push-notifikationer til Android.

4. Konfigurer FCM-indstillinger – Angiv dit Firebase Afsender-ID (hentet fra Firebase Console). Upload Service Account JSON-filen (downloadet fra Firebase). Klik på Opdater-knappen for at gemme disse indstillinger.

5. Efter konfiguration af FCM-indstillingerne får du et App ID. Kopier dette App ID, da det er nødvendigt for at initialisere PushEngage Android SDK i din Flutter-app.

Opsætning af iOS

Du kan følge trinene efter at have åbnet dit_projektnavn » iOS » dit_projektnavn.xcworkspace.

Trin 1: Aktiver fjernnotifikationer

1. Åbn dit Xcode-projekt, og vælg rodprojektet i Project Navigator.

2. Vælg dit hovedapp-mål.

3. Naviger til "Signing & Capabilities.“

4. Sørg for, at Background Modes-kapabiliteten er tilføjet. Hvis ikke, skal du tilføje den ved at klikke på knappen "+ Capability“.

5. Sørg ligeledes for, at Push Notifications-kapabiliteten er tilføjet. Hvis ikke, skal du tilføje den ved hjælp af knappen "+ Capability“.

Hvis “Push Notifications”-kapabiliteten ikke er synlig i Xcode:

1. Gå til din Apple Developer-konto.

2. Naviger til "Certificates, Identifiers & Profiles.“

3. Vælg din app-identifikator.

4. Rediger konfigurationen af din App ID, og sørg for, at Push Notifications er aktiveret.

5. Gå tilbage til Xcode, og forsøg at tilføje Push Notifications-kapabiliteten igen.

Trin 2: Aktivér baggrundstilstande

1. Naviger i dit Xcode-projekt til "Signing & Capabilities.“

2. Under "Background Modes“, aktivér både "Remote notifications“ og "Background fetch.“

Dette trin sikrer, at din app kan håndtere fjernnotifikationer og baggrundshentninger effektivt.

Opret iOS APNs-certifikat

Du kan henvise til guiden her for at oprette et iOS APNs-certifikat, hvis du ikke allerede har et.

Tilføj Notification Service-udvidelse og Notification Content-udvidelse

Dette gælder kun for iOS-enheder.

Oprettelse af Notification Service Extension

Notification Service Extension forbedrer din iOS-apps evne til at modtage notifikationer. Dette bruges til at ændre notifikationens indhold eller hente/behandle data ved modtagelse af notifikationen. Følg disse trin for at oprette en Notification Service Extension:

1. Åbn Xcode, og naviger til dit projekt.

2. Vælg File » New » Target fra menuen.

3. I vinduet til valg af skabelon skal du vælge Notification Service Extension og klikke på Next.

4. Angiv et navn til din udvidelse, f.eks. PushEngageNotificationServiceExtension, og klik på Finish. 

Når du er færdig med at oprette Notification Service Extension, kan du blive bedt om at aktivere den. Aktiver den ikke med det samme.

Aktivering af udvidelsen ville skifte Xcodes debugging-fokus fra din app til udvidelsen. Hvis du aktiverer den ved et uheld, skal du ikke bekymre dig; du kan skifte tilbage til at debugge din app i Xcode.

5. I projektnavigatoren skal du vælge den øverste projektmappe og vælge NotificationServiceExtension-målet i projektet fra listen over mål oprettet i trin 4.

6. Indstil Deployment Target til iOS 10 eller nyere, hvilket er den version af iOS, hvor Apple frigav understøttelse for denne udvidelse. 

Initialiserer PushEngage SDK til Notification Service Extension

For at sikre korrekt funktion af PushEngage SDK i din iOS Notification Service Extension, skal du følge disse trin:

1. Åbn dit_projektnavn » ios » Podfile.

2. Tilføj følgende til post_install-blokken for hovedappens mål

 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. Tilføj til bunden af filen

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

4. Installer afhængigheden

pod repo update 
pod install

5. I din Notification Service Extension-mål skal du sørge for at importere PushEngage-frameworket og tilføje den nødvendige initialiseringskode.

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

}

Oprettelse af Notification Content Extension

For at forbedre måden ved at tilføje brugerdefineret UI, skal du oprette en Notification Content Extension. Følg nedenstående trin for at opsætte udvidelsen:

1. I Xcode skal du gå til File » New » Target.

2. Vælg Notification Content Extension og klik på Næste.

3. Vælg ikke "Aktiver" i dialogboksen, der vises efter at have klikket på Udfør. Annullering holder Xcode til at debugge din app i stedet for udvidelsen. Hvis du ved et uheld aktiverer den, skal du skifte tilbage til at debugge din app i Xcode (ved siden af køreknappen).

4. I projektnavigatoren skal du vælge den øverste projektmappe og vælge NotificationContentExtension-målet i projektet fra listen over mål oprettet i trin 2.

5. Indstil Deployment Target til iOS 10 eller nyere, hvilket er den version af iOS, som Apple udgav understøttelsen for denne udvidelse. 

Initialiserer PushEngage SDK til Notification Content Extension

For at sikre korrekt funktion af PushEngage SDK i din iOS Notification Content Extension, skal du følge disse trin:

1. Åbn dit_projektnavn » iOS » Podfile.

2. Tilføj følgende nederst i din Podfile:

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

3. Installer afhængigheden:

cd ind i ios-mappen af dit projekt og kør kommandoen nedenfor

pod repo update 
pod install

4. I din Notification Content Extension-mål skal du sørge for at importere PushEngage-frameworket og tilføje den nødvendige initialiseringskode. Her er, hvordan du kan gøre det med nogle eksempler på UI-elementer:

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

Tilføj app-grupper

App Groups er essentielle for at muliggøre kommunikation mellem hovedappen, notification service extension og notification content extension. Følg disse trin for at tilføje App Groups til dit iOS-projekt:

Hvis du har en eksisterende app-gruppe og ønsker at bruge den samme, kan du springe til trin nr. 4.

1. I dit Xcode-projekt, i projektnavigatoren, skal du vælge den øverste projektmappe og vælge appens hovedmål.

2. Naviger til fanen Signing & Capabilities.

3. Klik på knappen “+ Capability” og vælg App Groups fra listen.

4. Klik på knappen + for at tilføje en App Group.

5. Tilføj et unikt navn til din App Group og klik på OK.

6. I hovedredigeringsområdet skal du vælge hovedmålet for din app. Hvis du har oprettet en app-gruppe, bedes du angive navnet på gruppen i din applikations Info.plist med nøglen PushEngage_App_Group_Key.

7. Tilføj den samme nøgle og værdi i Notification Service Extension’s Info.plist-fil.

8. Sørg for at vælge den samme app-gruppe i både Main Application Target og Your_Notification_Service_Extension.

Initialiser PushEngage SDK

I din index.js skal du initialisere PushEngage SDK.

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

I din AppDelegate.mm af 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);
}

Håndtering af deepLink

Lyt efter deep link-begivenheder og håndter dem i din applikation

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

Fejlfinding

Tilføj -fcxx-modules i Other C++ flags for fejl: brug af '@import', når c++-moduler er deaktiveret, overvej at bruge -fmodules og -fcxx-modules under iOS-projektets Build Settings.

Hvis du vil udforske flere af iOS SDK's funktioner, kan du gennemgå vores detaljerede API-dokumentation.

Hvis du støder på problemer, bedes du kontakte os ved at klikke her. Vores supportteam vil kunne hjælpe dig.

Stadig sidder fast? Hvordan kan vi hjælpe?
Sidst opdateret den 11. maj 2026

Engager og fasthold besøgende, efter de har forladt dit website

Øg værdien af hvert website-besøg med push-notifikationer, der er svære at overse.

Prøv PushEngage af
  • Evig gratis plan
  • Nem opsætning
  • 5-stjernet support

Over 100 milliarder notifikationer sendt

100% sikker og GDPR-kompatibel

Betroet af kunder i over 150 lande