Intégration de notifications Push

Cet article de référence explique comment paramétrer les notifications push pour React Native. L’intégration des notifications push nécessite de configurer séparément chaque plateforme native. Suivez les guides respectifs listés pour terminer l’installation.

Étape 1 : Terminer la configuration initiale

• expo
• android
• ios

1
"firebaseCloudMessagingSenderId": "693679403398"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "expo": {
    "android": {
      "googleServicesFile": "PATH_TO_GOOGLE_SERVICES"
    },
    "plugins": [
      [
        "@braze/expo-plugin",
        {
          "androidApiKey": "YOUR-ANDROID-API-KEY",
          "iosApiKey": "YOUR-IOS-API-KEY",
          "enableBrazeIosPush": true,
          "enableFirebaseCloudMessaging": true,
          "firebaseCloudMessagingSenderId": "YOUR-FCM-SENDER-ID",
          "androidHandlePushDeepLinksAutomatically": true
        }
      ],
    ]
  }
}

Étape 2 : Demander une autorisation de notification push

Utilisez la méthode Braze.requestPushPermission() (disponible sur v1.38.2 et supérieures) pour demander une autorisation des notifications push à l’utilisateur sur iOS et Android 13 et supérieurs. Pour Android 12 et inférieurs, cette méthode n’est pas opérationnelle.

Cette méthode intègre in paramètre requis qui précise les autorisations que SDK doit demander à l’utilisateur sur iOS. Ces options n’ont pas d’effet sur Android.

1
2
3
4
5
6
7
8
const permissionOptions = {
  alert: true,
  sound: true,
  badge: true,
  provisional: false
};

Braze.requestPushPermission(permissionOptions);

Étape 2.1 : Écouter les notifications push (facultatif)

Vous pouvez en outre vous abonner aux événements au cours desquels Braze a détecté et traité une notification push entrante. Utilisez la clé d’auditeur Braze.Events.PUSH_NOTIFICATION_EVENT.

1
2
3
4
Braze.addListener(Braze.Events.PUSH_NOTIFICATION_EVENT, data => {
  console.log(`Push Notification event of type ${data.payload_type} seen. Title ${data.title}\n and deeplink ${data.url}`);
  console.log(JSON.stringify(data, undefined, 2));
});

Champs d’événements de la notification push

Pour obtenir une liste complète des champs de notifications push, reportez-vous au tableau ci-dessous :

Étape 3 : Activer la création de liens profonds (facultatif)

Pour permettre à Braze de gérer les liens profonds à l’intérieur des composants React lorsqu’une notification push est cliquée, suivez les étapes supplémentaires.

• expo
• android
• ios

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"BrazeProject";
  self.initialProps = @{};

  BRZConfiguration *configuration = [[BRZConfiguration alloc] initWithApiKey:apiKey endpoint:endpoint];
  configuration.triggerMinimumTimeInterval = 1;
  configuration.logger.level = BRZLoggerLevelInfo;
  Braze *braze = [BrazeReactBridge initBraze:configuration];
  AppDelegate.braze = braze;

  [self registerForPushNotifications];
  [[BrazeReactUtils sharedInstance] populateInitialUrlFromLaunchOptions:launchOptions];

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Linking.getInitialURL()
  .then(url => {
    if (url) {
      console.log('Linking.getInitialURL is ' + url);
      showToast('Linking.getInitialURL is ' + url);
      handleOpenUrl({ url });
    }
  })
  .catch(err => console.error('Error getting initial URL', err));

// Handles deep links when an iOS app is launched from a hard close via push click.
Braze.getInitialURL(url => {
  if (url) {
    console.log('Braze.getInitialURL is ' + url);
    showToast('Braze.getInitialURL is ' + url);
    handleOpenUrl({ url });
  }
});

Étape 4 : Tester l’affichage des notifications push

À ce stade, vous devriez pouvoir envoyer des notifications aux appareils. Suivez ces étapes pour tester votre intégration de notification push.

1. Définissez un utilisateur actif dans l’application React en appelant la méthode Braze.changeUserId('your-user-id').
2. Allez dans Campagnes et créez une nouvelle campagne de notification push. Choisissez les plateformes que vous souhaitez tester.
3. Composez votre notification test et sélectionnez l’onglet Test. Ajoutez le même user-id que l’utilisateur test et cliquez sur Envoyer le test. Vous devriez recevoir rapidement la notification sur votre appareil.

Transférer les notifications push Android vers un autre FMS

Si vous souhaitez utiliser un service de messagerie Firebase (FMS) supplémentaire, vous pouvez spécifier un FMS de repli à appeler si votre application reçoit une notification push qui ne provient pas de Braze. Par exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "expo": {
    "plugins": [
      [
        "@braze/expo-plugin",
        {
          ...
          "androidFirebaseMessagingFallbackServiceEnabled": true,
          "androidFirebaseMessagingFallbackServiceClasspath": "com.company.OurFirebaseMessagingService"
        }
      ]
    ]
  }
}

Configurer les extensions d’applications avec Expo

Activation des notifications push riches pour iOS

Pour activer les notifications push enrichies sur iOS à l’aide d’Expo, configurez la propriété enableBrazeIosRichPush sur true dans votre objet expo.plugins dans app.json :

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "expo": {
    "plugins": [
      [
        "@braze/expo-plugin",
        {
          ...
          "enableBrazeIosRichPush": true
        }
      ]
    ]
  }
}

Enfin, ajoutez l’identifiant du bundle de cette extension d’application à la configuration des informations d’identification de votre projet : <your-app-bundle-id>.BrazeExpoRichPush. Pour plus de détails sur ce processus, reportez-vous à la section Utiliser les extensions d’applications avec Expo Application Services.

Activation des contenus push pour iOS

Pour activer les contenus push sur iOS à l’aide d’Expo, assurez-vous qu’un groupe d’applications est défini pour votre application. Pour plus d’informations, voir Ajouter un groupe d’applications.

Ensuite, configurez la propriété enableBrazeIosPushStories sur true et attribuez votre ID de groupe d’applications à iosPushStoryAppGroup dans votre objet expo.plugins dans app.json :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "expo": {
    "plugins": [
      [
        "@braze/expo-plugin",
        {
          ...
          "enableBrazeIosPushStories": true,
          "iosPushStoryAppGroup": "group.com.company.myApp.PushStories"
        }
      ]
    ]
  }
}

Enfin, ajoutez l’identifiant du bundle de cette extension d’application à la configuration des informations d’identification de votre projet : <your-app-bundle-id>.BrazeExpoPushStories. Pour plus de détails sur ce processus, reportez-vous à la section Utiliser les extensions d’applications avec Expo Application Services.

Utiliser les extensions d’applications avec Expo Application Services

Si vous utilisez Expo Application Services (EAS) et que vous avez activé enableBrazeIosRichPush ou enableBrazeIosPushStories, vous devrez déclarer les identifiants de bundle correspondants pour chaque extension d’application dans votre projet. Vous pouvez aborder cette étape de plusieurs manières, selon la façon dont votre projet est configuré pour gérer la signature de code avec EAS.

Une approche consiste à utiliser la configuration appExtensions dans votre fichier app.json en suivant la documentation sur les extensions d’applications d’Expo. Vous pouvez également définir le paramètre multitarget dans votre fichier credentials.json en suivant la documentation sur les identifiants locaux d’Expo.