Aviso: Não existe documentação legada disponível para este item, pelo que está a ver a documentação atual.
O SDK React Native da PushEngage simplifica a integração de notificações push nas suas aplicações React Native, oferecendo suporte contínuo para Android e iOS. Oferecemos três frameworks para implementar notificações push de aplicações: React, Native e Flutter. Pode encontrar guias para notificações push de aplicações Native Android, iOS e Flutter para mais assistência.
Neste guia, vamos percorrer a configuração do SDK React Native da PushEngage para ativar notificações push em Android e iOS.
Antes de Começar
Aqui está uma lista de coisas que irá necessitar
- Um projeto React Native e suporte a módulo turbo. Se não tiver uma conta, pode registar-se aqui.
- Conta Firebase com configuração do Firebase Cloud Messaging (FCM) para Android.
- Uma conta de Desenvolvedor Apple para configurar os serviços Apple Push Notification (APN) para iOS.
Instalar o SDK React Native da PushEngage
Pode instalar o SDK React Native da PushEngage utilizando npm ou yarn
npm install @pushengage/pushengage-react-nativePara React Native 0.77.0 ou Anterior
Se estiver a utilizar a versão 0.77.0 ou anterior do React Native, utilize a versão 0.0.1 do SDK como mostrado abaixo:
npm install @pushengage/[email protected]Configuração do Android
Configuração do Firebase Cloud Messaging (FCM)
Para ativar notificações push para Android, terá de configurar o Firebase Cloud Messaging (FCM)
1. Aceda à consola Firebase utilizando a sua conta Google.
2. Clique em “Adicionar Projeto” para criar um novo projeto, ou selecione um projeto existente na sua lista. Se estiver a usar um projeto existente, prossiga diretamente para o passo 4.
3. Introduza um nome para o seu projeto e clique em Continuar. Complete o processo de configuração clicando em “Criar projeto” no ecrã final.
4. No painel do seu projeto Firebase, clique no ícone do Android para adicionar uma aplicação Android.
5. Introduza o nome do pacote da sua aplicação Android (encontrado em android/app/build.gradle no bloco android) e forneça um nome para a aplicação. Clique em Registar quando terminar.
6. Descarregue o ficheiro google-services.json e coloque-o na raiz do seu módulo de aplicação Android em android/app/.
7. Gerar Chave de Conta de Serviço JSON
- Na consola Firebase, clique no ícone Definições ao lado de “Visão Geral do Projeto” no canto superior esquerdo, depois selecione Definições do projeto.
- Navegue até ao separador Contas de serviço.
- Clique em Gerar nova chave privada e descarregue o ficheiro .json.
- Mantenha este ficheiro seguro, pois precisará dele para a configuração do painel PushEngage.
8. Obter ID do Remetente
- Na consola Firebase, clique no ícone Definições ao lado de Visão Geral do Projeto no canto superior esquerdo e selecione “Definições do projeto.”
- Selecione o separador Cloud Messaging. Aqui, encontrará o ID do Remetente, que é necessário para a inicialização do SDK PushEngage.
Integrar FCM com PushEngage
Para integrar perfeitamente os detalhes do FCM com o Painel PushEngage, pode seguir os passos abaixo.
1. Acesse a sua conta PushEngage fazendo login
2. Na navegação esquerda, vá para Definições » Instalação. Escolha SDK Android
3. Da lista de plataformas disponíveis, escolha a opção SDK Android para configurar notificações push para Android.
4. Configurar Definições FCM – Introduza o seu ID do Remetente Firebase (obtido da Consola Firebase). Carregue o ficheiro JSON da Conta de Serviço (descarregado do Firebase). Clique no botão Atualizar para guardar estas definições.
5. Após configurar as definições FCM, ser-lhe-á fornecido um ID da Aplicação. Copie este ID da Aplicação pois é necessário para inicializar o SDK Android PushEngage na sua aplicação Flutter.
Configuração do iOS
Pode seguir os passos após abrir o_seu_nome_de_projeto » iOS » o_seu_nome_de_projeto.xcworkspace.
Passo 1: Ativar Notificações Remotas
1. Abra o seu projeto Xcode e selecione o projeto raiz no Navegador de Projetos.
2. Escolha o seu alvo de aplicação principal.
3. Navegue até “Assinatura e Capacidades.“
4. Certifique-se de que a capacidade Modos de Segundo Plano foi adicionada. Caso contrário, adicione-a clicando no botão “+ Capacidade“.
5. Da mesma forma, certifique-se de que a capacidade Notificações Push foi adicionada. Caso contrário, adicione-a usando o botão “+ Capacidade“.
Se a capacidade “Notificações Push” não estiver visível no Xcode:
1. Vá à sua conta de Programador Apple.
2. Navegue até “Certificados, Identificadores e Perfis.“
3. Selecione o identificador da sua aplicação.
4. Edite a configuração do seu ID de Aplicação e certifique-se de que Notificações Push está ativado.
5. Volte ao Xcode e tente adicionar a capacidade Notificações Push novamente.
Passo 2: Ativar Modos de Segundo Plano
1. No seu projeto Xcode, navegue até “Assinatura e Capacidades.“
2. Dentro de “Modos de Segundo Plano“, ative tanto “Notificações Remotas” quanto “Recuperação em Segundo Plano.“
Este passo garante que a sua aplicação pode lidar com notificações remotas e buscas em segundo plano de forma eficiente.
Criar certificado APNs para iOS
Pode consultar o guia aqui para criar um certificado APNs para iOS se ainda não tiver um.
Adicionar extensão de Serviço de Notificação e extensão de Conteúdo de Notificação
Isto é aplicável apenas a dispositivos iOS.
Criação da Extensão de Serviço de Notificação
A Extensão de Serviço de Notificação melhora a capacidade da sua aplicação iOS de receber notificações. É usada para modificar o conteúdo da notificação ou buscar/processar quaisquer dados ao receber a notificação. Siga estes passos para criar uma Extensão de Serviço de Notificação:
1. Abra o Xcode e navegue até o seu projeto.
2. Selecione Arquivo » Novo » Alvo no menu.
3. Na janela de seleção de modelos, escolha Extensão de Serviço de Notificação e clique em Seguinte.
4. Forneça um nome para a sua extensão, por exemplo, PushEngageNotificationServiceExtension, e clique em Concluir.
Após concluir a criação da Extensão de Serviço de Notificação, pode ser solicitado que a ative. Não a ative imediatamente.
Ativar a extensão mudaria o foco de depuração do Xcode da sua aplicação para a extensão. Se a ativar por engano, não se preocupe; pode voltar a depurar a sua aplicação dentro do Xcode.
5. No navegador do projeto, selecione o diretório do projeto de nível superior e selecione o alvo NotificationServiceExtension no projeto a partir da lista de alvos criada no passo nº 4.
6. Defina o Alvo de Implementação para iOS 10 ou superior, que é a versão do iOS em que a Apple lançou o suporte para esta extensão.
Inicialização do SDK PushEngage para a Extensão de Serviço de Notificação
Para garantir o funcionamento correto do SDK PushEngage na sua Extensão de Serviço de Notificação iOS, siga estes passos:
1. Abra nome_do_seu_projeto » ios » Podfile.
2. Adicione o seguinte ao bloco post_install do alvo da aplicação principal
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. Adicione ao final do ficheiro
target 'Your_Notification_Service_Extension_Name' do
pod 'PushEngage', '~>0.0.5'
end
4. Instale a dependência
pod repo update
pod install
5. Na sua extensão de Serviço de Notificação, certifique-se de importar o framework PushEngage e adicionar o código de inicialização necessário.
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)
}
}
}
Criação da Extensão de Conteúdo de Notificação
Para melhorar a forma como adiciona UI personalizada, terá de criar uma Extensão de Conteúdo de Notificação. Siga os passos abaixo para configurar a extensão:
1. No Xcode, vá para Arquivo » Novo » Alvo.
2. Selecione Notification Content Extension e clique em Next.
3. Não selecione “Ativar” no diálogo que aparece após clicar em Concluir. Cancelar mantém o Xcode a depurar a sua aplicação em vez da extensão. Se a ativar acidentalmente, volte a depurar a sua aplicação dentro do Xcode (ao lado do botão de execução).
4. No navegador de projetos, selecione o diretório do projeto de nível superior e selecione o destino NotificationContentExtension no projeto na lista de destinos criada no passo 2.
5. Defina o Destino de Implementação para iOS 10 ou superior, que é a versão do iOS que a Apple lançou com suporte para esta extensão.
Inicialização do SDK PushEngage para a Extensão de Conteúdo de Notificação
Para garantir o bom funcionamento do SDK PushEngage na sua Extensão de Conteúdo de Notificação iOS, siga estes passos:
1. Abra nome_do_seu_projeto » iOS » Podfile.
2. Adicione o seguinte no final do seu Podfile:
target 'Your_Notification_Content_Extension_Name' do
pod 'PushEngage', '0.0.5'
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 target de Notification Content Extension, certifique-se de importar o framework PushEngage e adicionar o código de inicialização necessário. Veja como pode fazê-lo com alguns exemplos de elementos UI:
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!)
}
}
}
}
Adicionar Grupos de Aplicações
Os Grupos de Aplicações são essenciais para permitir a comunicação entre a aplicação principal, a extensão do serviço de notificação e a extensão de conteúdo de notificação. Siga estes passos para adicionar Grupos de Aplicações ao seu projeto iOS:
Se já tem um grupo de aplicações e deseja usar o mesmo, pode saltar para o passo 4.
1. No seu projeto Xcode, no navegador de projetos, selecione o diretório raiz do projeto e selecione o alvo principal da aplicação.
2. Navegue até ao separador Signing & Capabilities.
3. Clique no botão “+ Capability” e selecione App Groups na lista.
4. Clique no botão + para adicionar um Grupo de Aplicações.
5. Adicione um nome único ao seu Grupo de Aplicações e clique em OK.
6. Na área principal do editor, selecione o target principal da sua aplicação. Se criou um grupo de aplicações, forneça o nome do grupo na Info.plist da sua aplicação com a chave PushEngage_App_Group_Key.
7. Adicione a mesma chave e valor no ficheiro Info.plist da Extensão de Serviço de Notificação.
8. Certifique-se de que seleciona o mesmo grupo de aplicações tanto no Target da Aplicação Principal como na Sua_Extensão_de_Serviço_de_Notificação.
Inicializar SDK PushEngage
No seu index.js, inicialize o SDK PushEngage.
import PushEngage from 'pushengage-react-native';
PushEngage.setAppId('your-app-id');
No seu AppDelegate.mm da aplicação 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);
}
A tratar deepLink
Ouça eventos de deep link e trate-os na sua aplicação
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;
};
}, []);
Resolução de Problemas
Adicione -fcxx-modules em Outras flags C++ para o erro: uso de ‘@import’ quando os módulos c++ estão desativados, considere usar -fmodules e -fcxx-modules nas Definições de Compilação do projeto iOS.
Se quiser explorar mais as capacidades do SDK iOS, pode consultar a nossa detalhada documentação da API.
Se encontrar algum problema, por favor contacte-nos clicando aqui. A nossa equipa de suporte poderá ajudá-lo.
