Documentation PushEngage

Documentation, Matériaux de référence et Tutoriels pour PushEngage

Configuration de la notification push de l'application React Native à l'aide de PushEngage

Le SDK React Native de PushEngage simplifie l'intégration des notifications push dans vos applications React Native, offrant une prise en charge transparente pour Android et iOS. Nous proposons trois frameworks pour implémenter les notifications push d'applications : React, Native et Flutter. Vous trouverez des guides pour les notifications push d'applications Native Android, iOS et Flutter pour plus d'aide.

Dans ce guide, nous allons passer en revue la configuration du SDK React Native de PushEngage pour activer les notifications push sur Android et iOS.

Avant de commencer

Voici une liste des éléments dont vous aurez besoin

  • Un projet React Native & prise en charge des modules turbo.  Si vous n'avez pas de compte, vous pouvez vous inscrire ici.
  • Un compte Firebase avec la configuration de Firebase Cloud Messaging (FCM) pour Android.
  • Un compte développeur Apple pour configurer les services Apple Push Notification (APN) pour iOS.
Commencez dès maintenant avec les notifications push pour applications React Native

Installation du SDK React Native de PushEngage

Vous pouvez installer le SDK React Native de PushEngage en utilisant npm ou yarn

npm install @pushengage/pushengage-react-native

Pour React Native 0.77.0 ou antérieur

Si vous utilisez la version 0.77.0 ou antérieure de React Native, utilisez la version 0.0.1 du SDK comme indiqué ci-dessous :

npm install @pushengage/[email protected]

Configuration d’Android

Configuration de Firebase Cloud Messaging (FCM)

Pour activer les notifications push pour Android, vous devrez configurer Firebase Cloud Messaging (FCM)

1. Accédez à la console Firebase en utilisant votre compte Google.

2. Cliquez sur « Ajouter un projet » pour créer un nouveau projet, ou sélectionnez un projet existant dans votre liste. Si vous utilisez un projet existant, passez directement à l'étape 4.

3. Entrez un nom pour votre projet et cliquez sur Continuer. Terminez le processus de configuration en cliquant sur « Créer un projet » sur l'écran final.

4. Dans le tableau de bord de votre projet Firebase, cliquez sur l'icône Android pour ajouter une application Android.

5. Entrez le nom du package de votre application Android (trouvé dans android/app/build.gradle sous le bloc android) et fournissez un nom d'application. Cliquez sur Enregistrer une fois terminé.

6. Téléchargez le fichier google-services.json et placez-le à la racine de votre module d'application Android dans android/app/.

7. Générez un fichier JSON de compte de service

  • Dans la console Firebase, cliquez sur l’icône Paramètres à côté de « Vue d’ensemble du projet » en haut à gauche, puis sélectionnez Paramètres du projet.
  • Accédez à l’onglet Comptes de service.
  • Cliquez sur Générer une nouvelle clé privée et téléchargez le fichier .json.
  • Conservez ce fichier en lieu sûr car vous en aurez besoin pour la configuration du tableau de bord PushEngage.

8. Récupérer l'ID de l'expéditeur

  • Dans la console Firebase, cliquez sur l’icône Paramètres à côté de Vue d’ensemble du projet en haut à gauche et sélectionnez « Paramètres du projet ».
  • Sélectionnez l’onglet Cloud Messaging. Ici, vous trouverez l’ID de l’expéditeur, qui est nécessaire pour l’initialisation du SDK PushEngage.

Intégrer FCM avec PushEngage

Pour intégrer de manière transparente les détails FCM avec le tableau de bord PushEngage, vous pouvez suivre les étapes ci-dessous.

1. Accédez à votre compte PushEngage en vous connectant

2. Dans la navigation de gauche, allez dans Paramètres » Installation. Choisissez SDK Android

3. Dans la liste des plateformes disponibles, choisissez l'option SDK Android pour configurer les notifications push pour Android.

4. Configurer les paramètres FCM – Entrez votre ID d'expéditeur Firebase (récupéré de la console Firebase). Téléchargez le fichier JSON du compte de service (téléchargé depuis Firebase). Cliquez sur le bouton Mettre à jour pour enregistrer ces paramètres.

5. Après avoir configuré les paramètres FCM, un ID d'application vous sera fourni. Copiez cet ID d'application car il est nécessaire pour initialiser le SDK Android PushEngage dans votre application Flutter.

Configuration de iOS

Vous pouvez suivre les étapes après avoir ouvert votre_nom_de_projet » iOS » votre_nom_de_projet.xcworkspace.

Étape 1 : Activer les notifications push

1. Ouvrez votre projet Xcode et sélectionnez le projet racine dans le navigateur de projet.

2. Choisissez votre cible d'application principale.

3. Naviguez vers « Signature & Capacités ».

4. Assurez-vous que la capacité Modes d’arrière-plan est ajoutée. Sinon, ajoutez-la en cliquant sur le bouton « + Capacité ».

5. De même, assurez-vous que la capacité Notifications Push est ajoutée. Sinon, ajoutez-la en utilisant le bouton « + Capacité ».

Si la capacité « Notifications Push » n'est pas visible dans Xcode :

1. Accédez à votre compte développeur Apple.

2. Naviguez vers « Certificats, Identifiants & Profils ».

3. Sélectionnez l’identifiant de votre application.

4. Modifiez la configuration de votre ID d’application et assurez-vous que les Notifications Push sont activées.

5. Revenez à Xcode et essayez d’ajouter à nouveau la capacité Notifications Push.

Étape 2 : Activer les modes d’arrière-plan

1. Dans votre projet Xcode, naviguez vers « Signature & Capacités ».

2. Dans « Modes d’arrière-plan », activez à la fois « Notifications à distance » et « Récupération en arrière-plan ».

Cette étape garantit que votre application peut gérer efficacement les notifications à distance et les récupérations en arrière-plan.

Créer un certificat APNs pour iOS

Vous pouvez vous référer au guide ici pour créer un certificat APNs pour iOS si vous n’en avez pas déjà un.

Ajouter une extension de service de notification et une extension de contenu de notification

Ceci s’applique uniquement aux appareils iOS.

Création de l'extension de service de notification

L'extension de service de notification améliore la capacité de votre application iOS à recevoir des notifications. Elle est utilisée pour modifier le contenu de la notification ou pour récupérer/traiter des données lors de la réception de la notification. Suivez ces étapes pour créer une extension de service de notification :

1. Ouvrez Xcode et naviguez vers votre projet.

2. Sélectionnez Fichier » Nouveau » Cible dans le menu.

3. Dans la fenêtre de sélection de modèle, choisissez Notification Service Extension et cliquez sur Suivant.

4. Donnez un nom à votre extension, par exemple, PushEngageNotificationServiceExtension, et cliquez sur Terminer. 

Une fois que vous avez terminé la création de l’extension de service de notification, il se peut qu’on vous demande de l’activer. Ne l’activez pas immédiatement.

L'activation de l'extension déplacerait le focus de débogage d'Xcode de votre application vers l'extension. Si vous l'activez par accident, ne vous inquiétez pas ; vous pouvez revenir au débogage de votre application dans Xcode.

5. Dans le navigateur de projet, sélectionnez le répertoire de projet de niveau supérieur et sélectionnez la cible NotificationServiceExtension dans le projet à partir de la liste des cibles créée à l’étape 4.

6. Définissez la Cible de déploiement sur iOS 10 ou supérieur, qui est la version d’iOS pour laquelle Apple a publié la prise en charge de cette extension. 

Initialisation du SDK PushEngage pour Notification Service Extension

Pour assurer le bon fonctionnement du SDK PushEngage dans votre extension de service de notification iOS, suivez ces étapes :

1. Ouvrez votre_nom_de_projet » ios » Podfile.

2. Ajoutez ce qui suit au bloc post_install de la cible de l’application 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
    )
      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. Ajoutez au bas du fichier

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

4. Installez la dépendance

pod repo update 
pod install

5. Dans votre cible d’extension de service de notification, assurez-vous d’importer le framework PushEngage et d’ajouter le code d’initialisation nécessaire.

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

}

Création de Notification Content Extension

Pour améliorer la façon dont vous ajoutez une interface utilisateur personnalisée, vous devrez créer une Notification Content Extension. Suivez les étapes ci-dessous pour configurer l'extension :

1. Dans Xcode, allez à Fichier » Nouveau » Cible.

2. Sélectionnez Notification Content Extension et cliquez sur Suivant.

3. Ne sélectionnez pas « Activer » dans la boîte de dialogue qui apparaît après avoir cliqué sur Terminer. L'annulation permet à Xcode de déboguer votre application au lieu de l'extension. Si vous l'activez accidentellement, revenez au débogage de votre application dans Xcode (à côté du bouton d'exécution).

4. Dans le navigateur de projet, sélectionnez le répertoire de projet de niveau supérieur et sélectionnez la cible NotificationContentExtension dans le projet à partir de la liste des cibles créée à l'étape n° 2.

5. Définissez la Cible de déploiement sur iOS 10 ou supérieur, qui est la version d'iOS pour laquelle Apple a publié la prise en charge de cette extension. 

Initialisation du SDK PushEngage pour Notification Content Extension

Pour assurer le bon fonctionnement du SDK PushEngage dans votre Notification Content Extension iOS, suivez ces étapes :

1. Ouvrez votre_nom_de_projet » iOS » Podfile.

2. Ajoutez ce qui suit en bas de votre Podfile :

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

3. Installez la dépendance :

cd dans le répertoire ios de votre projet et exécutez la commande ci-dessous

pod repo update 
pod install

4. Dans la cible de votre extension de contenu de notification, assurez-vous d'importer le framework PushEngage et d'ajouter le code d'initialisation nécessaire. Voici comment vous pouvez le faire avec quelques exemples d'éléments d'interface utilisateur :

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

Ajouter des groupes d'applications

Les groupes d'applications sont essentiels pour permettre la communication entre l'application principale, l'extension de service de notification et l'extension de contenu de notification. Suivez ces étapes pour ajouter des groupes d'applications à votre projet iOS :

Si vous avez un groupe d'applications existant et que vous souhaitez l'utiliser, vous pouvez passer à l'étape n° 4.

1. Dans votre projet Xcode, dans le navigateur de projet, sélectionnez le répertoire de projet de niveau supérieur et sélectionnez la cible principale de l'application.

2. Accédez à l'onglet Signature & Capacités.

3. Cliquez sur le bouton « + Capacité » et sélectionnez Groupes d’applications dans la liste.

4. Cliquez sur le bouton + pour ajouter un groupe d'applications.

5. Ajoutez un nom unique à votre groupe d'applications et cliquez sur OK.

6. Dans la zone d'édition principale, sélectionnez la cible principale de votre application. Si vous avez créé un groupe d'applications, veuillez fournir le nom du groupe dans le Info.plist de votre application avec la clé PushEngage_App_Group_Key.

7. Ajoutez la même clé et la même valeur dans le fichier Info.plist de l'extension de service de notification.

8. Assurez-vous de sélectionner le même groupe d'applications dans la cible de l'application principale et dans votre extension de service de notification.

Initialiser le SDK PushEngage

Dans votre index.js, initialisez le SDK PushEngage.

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

Dans votre AppDelegate.mm de l'application 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);
}

Gestion des deepLinks

Écoutez les événements de deep link et gérez-les dans votre application

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

Dépannage

Ajoutez -fcxx-modules dans Autres indicateurs C++ pour l'erreur : utilisation de « @import » lorsque les modules c++ sont désactivés, envisagez d'utiliser -fmodules et -fcxx-modules sous les paramètres de build du projet iOS.

Si vous souhaitez explorer davantage les capacités du SDK iOS, vous pouvez consulter notre documentation API détaillée.

Si vous rencontrez des problèmes, veuillez nous contacter en cliquant ici. Notre équipe de support pourra vous aider.

Toujours bloqué ? Comment pouvons-nous vous aider ?
Dernière mise à jour le 11 mai 2026

Engagez et retenez les visiteurs après qu'ils aient quitté votre site Web

Augmentez la valeur de chaque visite web avec des notifications push difficiles à ignorer.

Essayez PushEngage
  • Plan gratuit à vie
  • Configuration facile
  • Support 5 étoiles

Plus de 100 milliards de notifications envoyées

100 % sécurisé et conforme au RGPD

Approuvé par des clients dans plus de 150 pays