Configurando Notificação Push de Aplicativo React Native usando PushEngage

O SDK React Native da PushEngage simplifica a integração de notificações push em seus aplicativos React Native, oferecendo suporte contínuo para Android e iOS. Oferecemos três frameworks para implementar notificações push de aplicativos: React, Native e Flutter. Você pode encontrar guias para notificações push de aplicativos Android, iOS e Flutter Native para obter mais assistência.

Neste guia, vamos detalhar a configuração do SDK React Native da PushEngage para habilitar notificações push em Android e iOS.

Antes de Começar

Aqui está uma lista de coisas que você precisará

• Um projeto React Native e suporte a módulo turbo.  Se você não tem uma conta, pode se inscrever aqui.
• Conta Firebase com Firebase Cloud Messaging (FCM) configurado para Android.
• Uma conta de Desenvolvedor Apple para configurar os serviços Apple Push Notification (APN) para iOS.

Instalando o SDK React Native da PushEngage

Você pode instalar o SDK React Native da PushEngage usando npm ou yarn

npm install @pushengage/pushengage-react-native

Para React Native 0.77.0 ou Anterior

Se você estiver usando a versão 0.77.0 ou anterior do React Native, use a versão 0.0.1 do SDK, como mostrado abaixo:

npm install @pushengage/[email protected]

Configurando Android

Configuração do Firebase Cloud Messaging (FCM)

Para habilitar notificações push para Android, você precisará configurar o Firebase Cloud Messaging (FCM)

1. Acesse o console do Firebase usando sua conta Google.

2. Clique em “Adicionar Projeto” para criar um novo projeto ou selecione um projeto existente em sua lista. Se você estiver usando um projeto existente, prossiga diretamente para a etapa 4.

3. Digite um nome para o seu projeto e clique em Continuar. Conclua o processo de configuração clicando em “Criar projeto” na tela final.

4. No painel do seu projeto Firebase, clique no ícone do Android para adicionar um aplicativo Android.

5. Digite o nome do pacote do seu aplicativo Android (encontrado em android/app/build.gradle no bloco android) e forneça um nome para o aplicativo. Clique em Registrar quando terminar.

6. Baixe o arquivo google-services.json e coloque-o na raiz do seu módulo de aplicativo Android em android/app/.

7. Gere o JSON da Conta de Serviço

• No console do Firebase, clique no ícone de Configurações ao lado de “Visão geral do projeto” no canto superior esquerdo e, em seguida, selecione Configurações do projeto.
• Navegue até a guia Contas de serviço.
• Clique em Gerar nova chave privada e baixe o arquivo .json.
• Mantenha este arquivo em segurança, pois você precisará dele para a configuração do painel PushEngage.

8. Recuperar ID do Remetente

• No console do Firebase, clique no ícone Configurações ao lado de Visão geral do projeto no canto superior esquerdo e selecione “Configurações do projeto.”
• Selecione a guia Mensagens na nuvem. Aqui, você encontrará o ID do remetente, que é necessário para a inicialização do SDK do PushEngage.

Integrar FCM com PushEngage

Para integrar perfeitamente os detalhes do FCM com o Painel PushEngage, você pode seguir as etapas abaixo.

1. Acesse sua conta PushEngage fazendo login

2. Na navegação esquerda, vá para Configurações » Instalação. Escolha SDK Android

3. Na lista de plataformas disponíveis, escolha a opção SDK Android para configurar notificações push para Android.

4. Configurar Configurações do FCM – Digite seu ID do Remetente do Firebase (recuperado do Console do Firebase). Carregue o arquivo JSON da Conta de Serviço (baixado do Firebase). Clique no botão Atualizar para salvar essas configurações.

5. Após configurar as configurações do FCM, você receberá um App ID. Copie este App ID, pois ele é necessário para inicializar o SDK do PushEngage para Android em seu aplicativo Flutter.

Configurando o iOS

Você pode seguir as etapas após abrir seu_nome_do_projeto » iOS » seu_nome_do_projeto.xcworkspace.

Etapa 1: Habilitar Notificações Remotas

1. Abra seu projeto Xcode e selecione o projeto raiz no Navegador de Projetos.

2. Escolha o seu principal destino de aplicativo.

3. Navegue até “Signing & Capabilities.“

4. Certifique-se de que a capacidade Background Modes esteja adicionada. Se não estiver, adicione-a clicando no botão “+ Capability“.

5. Da mesma forma, certifique-se de que a capacidade Push Notifications esteja adicionada. Se não estiver, adicione-a usando o botão “+ Capability“.

Se o recurso “Notificações Push” não estiver visível no Xcode:

1. Vá para sua conta de Desenvolvedor Apple.

2. Navegue até “Certificates, Identifiers & Profiles.“

3. Selecione o identificador do seu aplicativo.

4. Edite a configuração do seu App ID e certifique-se de que Push Notifications esteja habilitado.

5. Retorne ao Xcode e tente adicionar a capacidade Push Notifications novamente.

Etapa 2: Habilitar Modos de Segundo Plano

1. Em seu projeto Xcode, navegue até “Signing & Capabilities.“

2. Dentro de “Background Modes“, habilite tanto “Remote notifications” quanto “Background fetch.“

Esta etapa garante que seu aplicativo possa lidar com notificações remotas e buscas em segundo plano de forma eficiente.

Criar certificado APNs para iOS

Você pode consultar o guia aqui para criar um certificado APNs para iOS se ainda não tiver um.

Adicionar extensão Notification Service e extensão Notification Content

Isso é aplicável apenas para dispositivos iOS.

Criando a Extensão de Serviço de Notificação

A Extensão de Serviço de Notificação aprimora a capacidade do seu aplicativo iOS de receber notificações. Isso é usado para modificar o conteúdo da notificação ou buscar/processar quaisquer dados ao receber a notificação. Siga estas etapas para criar uma Extensão de Serviço de Notificação:

1. Abra o Xcode e navegue até seu projeto.

2. Selecione File » New » Target no menu.

3. Na janela de seleção de modelo, escolha Notification Service Extension e clique em Next.

4. Forneça um nome para sua extensão, por exemplo, PushEngageNotificationServiceExtension, e clique em Finish. 

Após terminar de criar a Notification Service Extension, você pode ser solicitado a ativá-la. Não a ative imediatamente.

5. No navegador de projetos, selecione o diretório raiz do projeto e selecione o destino NotificationServiceExtension no projeto a partir da lista de destinos criada na etapa 4.

6. Defina o Deployment Target para iOS 10 ou superior, que é a versão do iOS em que a Apple lançou o suporte para esta extensão. 

Inicializando o SDK do PushEngage para a Extensão de Serviço de Notificação

Para garantir o funcionamento adequado do SDK do PushEngage em sua Notification Service Extension para iOS, siga estas etapas:

1. Abra seu_nome_do_projeto » ios » Podfile.

2. Adicione o seguinte ao bloco post_install do destino principal do aplicativo

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

3. Adicione ao final do arquivo

target 'Your_Notification_Service_Extension_Name' do
  pod 'PushEngageExtension', '1.0.0'
end

4. Instale a dependência

pod repo update 
pod install  

5. No seu destino do Notification Service Extension, certifique-se de importar o framework PushEngage e adicionar o código de inicialização necessário.

Swift

import UserNotifications
import PushEngageExtension

class NotificationService: 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 {
            PushEngageExtension.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 = PushEngageExtension.serviceExtensionTimeWillExpire(request, content: bestAttemptContent) else {
                contentHandler(bestAttemptContent)
                return
            }
            contentHandler(content)
        }
    }
}

Criando a Extensão de Conteúdo de Notificação

Para melhorar a forma como você adiciona uma interface personalizada, você precisará criar uma Extensão de Conteúdo de Notificação. Siga as etapas abaixo para configurar a extensão:

1. No Xcode, vá para Arquivo » Novo » Destino.

2. Selecione Extensão de Conteúdo de Notificação e clique em Avançar.

3. Não selecione “Ativar” na caixa de diálogo que aparece após clicar em Concluir. Cancelar mantém o Xcode depurando seu aplicativo em vez da extensão. Se você ativá-la acidentalmente, volte a depurar seu aplicativo dentro do Xcode (ao lado do botão de execução).

4. No navegador do projeto, selecione o diretório raiz do projeto e selecione o destino NotificationContentExtension na lista de destinos criada na etapa nº 2.

5. Defina o Alvo de Implantação para iOS 10 ou superior, que é a versão do iOS que a Apple lançou o suporte para esta extensão. 

Inicializando o SDK do PushEngage para a Extensão de Conteúdo de Notificação

Para garantir o funcionamento adequado do SDK PushEngage em sua Extensão de Conteúdo de Notificação iOS, siga estas etapas:

1. Abra seu_nome_do_projeto » iOS » Podfile.

2. Adicione o seguinte no final do seu Podfile:

target 'Your_Notification_Content_Extension_Name' do
  pod 'PushEngageExtension', '1.0.0'
end

3. Instale a dependência:

Entre no diretório ios do seu projeto e execute o comando abaixo

pod repo update 
pod install 

4. No seu destino do Notification Content Extension, certifique-se de importar o framework PushEngage e adicionar o código de inicialização necessário. Veja como você pode fazer isso com alguns exemplos de elementos de UI:

Swift

import UIKit
import UserNotifications
import UserNotificationsUI
import SwiftUI
import PushEngageExtension

@available(iOSApplicationExtension 13.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 = PushEngageExtension.getCustomUIPayLoad(for: notification.request)
            // Pass the payload to your custom SwiftUI view
            let view = ContentView(payLoadInfo: payLoad)
            hostingView = UIHostingController(rootView: view)
            if let hostingView = hostingView {
                addChild(hostingView)
                hostingView.view.translatesAutoresizingMaskIntoConstraints = false
                self.view.addSubview(hostingView.view)
                NSLayoutConstraint.activate([
                    hostingView.view.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
                    hostingView.view.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
                    hostingView.view.topAnchor.constraint(equalTo: self.view.topAnchor),
                    hostingView.view.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
                ])
            }
        }
    }
}

Adicionar Grupos de Apps

Grupos de Aplicativos são essenciais para permitir a comunicação entre o aplicativo principal, a extensão de serviço de notificação e a extensão de conteúdo de notificação. Siga estas etapas para adicionar Grupos de Aplicativos ao seu projeto iOS:

Se você já possui um grupo de aplicativos e deseja usá-lo, pode pular para a etapa 4.

1. Em seu projeto Xcode, no navegador do projeto, selecione o diretório raiz do projeto e selecione o destino principal do aplicativo.

2. Navegue até a guia Assinatura e Recursos.

3. Clique no botão “+ Recurso” e selecione Grupos de Aplicativos na lista.

4. Clique no botão + para adicionar um Grupo de Aplicativos.

5. Adicione um nome exclusivo ao seu Grupo de Aplicativos e clique em OK.

6. Na área principal do editor, selecione o destino principal do seu aplicativo. Se você criou um grupo de aplicativos, forneça o nome do grupo no Info.plist do seu aplicativo com a chave PushEngage_App_Group_Key.

7. Adicione a mesma chave e valor no arquivo Info.plist da Extensão de Serviço de Notificação.

8. Certifique-se de selecionar o mesmo grupo de aplicativos tanto na Meta do Aplicativo Principal quanto na Sua_Extensão_de_Serviço_de_Notificação.

Inicializar o SDK PushEngage

No seu index.js, inicialize o SDK PushEngage.

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

No seu AppDelegate.mm do aplicativo 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);
}

Lidando com deepLink

Ouça eventos de deep link e manipule-os em seu aplicativo

const listenerSubscription = React.useRef<null | EventSubscription>(null);
React.useEffect(() => {
  // 1. Runtime taps — notification tapped while the app is running/backgrounded.
  listenerSubscription.current = PushEngage.onValueChanged((data) => {
    Alert.alert(`Deeplink: ${data.deepLink}`);
    console.log('Data:', data.data);
  });
  // 2. Cold-boot tap — the notification that launched the app from a killed
  //    state. Delivered once here, NOT through onValueChanged.
  PushEngage.getInitialNotification().then((initial) => {
    if (initial) {
      Alert.alert(`Deeplink: ${initial.deepLink}`);
      console.log('Data:', initial.data);
    }
  });
  return () => {
    listenerSubscription.current?.remove();
    listenerSubscription.current = null;
  };
}, []);

Solução de Problemas

Adicione -fcxx-modules em Outras flags C++ para o erro: uso de ‘@import’ quando módulos c++ estão desativados, considere usar -fmodules e -fcxx-modules sob as Configurações de Build do projeto iOS.

Se você quiser explorar mais recursos do SDK iOS, pode consultar nossa documentação detalhada da API.

Se você encontrar algum problema, por favor entre em contato conosco clicando aqui. Nossa equipe de suporte poderá ajudá-lo.