Integração de notificações por push

Este artigo de referência aborda como definir notificações por push para o React Native. A integração de notificações por push requer a configuração de cada plataforma nativa separadamente. Siga os respectivos guias listados para concluir a instalação.

Etapa 1: Concluir a configuração inicial

• 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
        }
      ],
    ]
  }
}

Etapa 2: Solicitar permissão para notificações por push

Use o método Braze.requestPushPermission() (disponível na versão v1.38.0 e superior) para solicitar permissão para notificações por push do usuário no iOS e no Android 13+. Para o Android 12 e versões inferiores, esse método não funciona.

Esse método recebe um parâmetro obrigatório que especifica quais permissões o SDK deve solicitar do usuário no iOS. Essas opções não têm efeito no Android.

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

Braze.requestPushPermission(permissionOptions);

Etapa 2.1: Ouça as notificações por push (opcional)

Além disso, você pode se inscrever em eventos em que o Braze detectou e tratou uma notificação por push recebida. Use a tecla do ouvinte 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));
});

Campos de eventos de notificação por push

Para obter uma lista completa dos campos de notificação por push, consulte a tabela abaixo:

Etapa 3: Ativar o deep linking (opcional)

Para ativar a Braze para lidar com deep linkings dentro de componentes React quando uma notificação por push for clicada, siga as etapas adicionais.

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

Etapa 4: Teste a exibição de notificações por push

Nesse ponto, você deve poder enviar notificações aos dispositivos. Siga as etapas a seguir para testar sua integração push.

1. Defina um usuário ativo no aplicativo React chamando o método Braze.changeUserId('your-user-id').
2. Vá para Campaigns (Campanhas ) e crie uma nova campanha de notificação por push. Escolha as plataformas que você gostaria de testar.
3. Crie sua notificação de teste e vá para a guia Teste. Adicione o mesmo user-id que o usuário teste e clique em Send Test (Enviar teste). Você deverá receber a notificação em seu dispositivo em breve.

Encaminhamento de push do Android para FMS adicionais

Se quiser usar um Firebase Messaging Service (FMS) adicional, você pode especificar um FMS fallback para chamar se o aplicativo receber um push que não seja do Braze. Por exemplo:

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"
        }
      ]
    ]
  }
}

Configuração de extensões de app com o Expo

Capacitação de notificações por push avançadas para iOS

Para ativar notificações por push avançadas no iOS usando o Expo, configure a propriedade enableBrazeIosRichPush como true em seu objeto expo.plugins em app.json:

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

Por fim, adicione o identificador de pacote para essa extensão de app à configuração de credenciais de seu projeto: <your-app-bundle-id>.BrazeExpoRichPush. Para obter mais detalhes sobre esse processo, consulte Uso de extensões de app com o Expo Application Services.

Ativando o Push Stories para iOS

Para ativar os stories por push no iOS usando o Expo, é necessário ter um grupo de app definido para seu aplicativo. Para saber mais, veja Adicionando um grupo de app.

Em seguida, configure a propriedade enableBrazeIosPushStories para true e atribua o ID do grupo de app a iosPushStoryAppGroup em seu objeto expo.plugins em 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"
        }
      ]
    ]
  }
}

Por fim, adicione o identificador de pacote para essa extensão de app à configuração de credenciais de seu projeto: <your-app-bundle-id>.BrazeExpoPushStories. Para obter mais detalhes sobre esse processo, consulte Uso de extensões de app com o Expo Application Services.

Uso de extensões de app com o Expo Application Services

Se estiver usando o Expo Application Services (EAS) e tiver ativado enableBrazeIosRichPush ou enableBrazeIosPushStories, será necessário declarar os identificadores de pacote correspondentes para cada extensão de app em seu projeto. Há várias maneiras de abordar essa etapa, dependendo de como seu projeto está configurado para gerenciar a assinatura de código com o EAS.

Uma abordagem é usar a configuração appExtensions em seu arquivo app.json seguindo a documentação de extensões de app da Expo. Como alternativa, você pode definir a configuração multitarget em seu arquivo credentials.json seguindo a documentação sobre credenciais de localização da Expo.