Configurando Notificação Push de App em Flutter usando PushEngage

O SDK Flutter da PushEngage facilita a integração de notificações push em seus aplicativos Flutter, oferecendo compatibilidade perfeita com as plataformas Android e iOS.

Este guia o guiará pelas etapas para configurar o SDK Flutter da PushEngage e habilitar notificações push em seus aplicativos Android e iOS.

Antes de Começar

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

• Um projeto Flutter e conta PushEngage. Se você não tiver 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.

Instalação

1. Abra seu projeto Flutter em seu editor de código.

2. Adicione a seguinte dependência em seu arquivo pubspec.yaml:

dependencies:
	pushengage_flutter_sdk: ^1.0.0

3. Execute o seguinte comando para instalar o pacote.

dependencies:
flutter pub get

Configurando Android

Adicione o repositório JitPack. O SDK Android da PushEngage é distribuído via JitPack, portanto, é um repositório obrigatório para que sua configuração de SDK seja executada com sucesso.

Projetos mais novos →

Dentro de android/settings.gradle

dependencyResolutionManagement { repositories { … } } 

Projetos mais antigos →

Dentro de android/build.gradle

allprojects { repositories { … } } 

Groovy:

maven { url 'https://jitpack.io' } 

Kotlin DSL:

maven { url = uri("https://jitpack.io") }

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. Crie um novo projeto ou selecione um projeto existente: 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. Insira os detalhes do projeto: Adicione um nome para seu projeto e clique em Continuar. Conclua o processo de configuração clicando em “Criar projeto” na tela final.

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

5. Configure o aplicativo Android: Insira 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 de configuração: 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. Recupere o 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.

Integre o FCM com o Painel PushEngage

Para integrar perfeitamente os detalhes do FCM com o Painel PushEngage, siga as etapas descritas abaixo:

1. Acesse sua conta PushEngage fazendo login com suas credenciais.

2. Navegue até Configurações » Instalação e escolha a guia SDK Android

4. Agora, Configure as Configurações do FCM

• Insira 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. Copie o ID do aplicativo: Após configurar as configurações do FCM, você receberá um ID do aplicativo. Copie este ID do aplicativo, pois ele é necessário para inicializar o SDK PushEngage Android em seu aplicativo Flutter.

Configurando o iOS

Configurando o projeto

Pedimos que siga as etapas abaixo após abrir seu projeto.

Veja como abrir um projeto: nome_do_seu_projeto » iOS » Runner.xcworkspace.

1. Habilite Notificações Remotas

• Abra seu projeto Xcode e selecione o projeto raiz no Navegador de Projetos.
• Escolha seu principal destino de aplicativo.
• Navegue até “Assinatura e Recursos“.
• Certifique-se de que o recurso Modos de segundo plano esteja adicionado. Se não estiver, adicione-o clicando no botão “+ Recurso“.
• Da mesma forma, certifique-se de que o recurso Notificações Push esteja adicionado. Se não estiver, adicione-o usando o botão “+ Recurso“.

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

• Acesse sua conta de desenvolvedor Apple.
• Navegue até “Certificados, Identificadores e Perfis“. Selecione o identificador do seu aplicativo.
• Edite a configuração do seu ID de aplicativo e certifique-se de que as notificações push estejam habilitadas.
• Volte para o Xcode e tente adicionar o recurso de notificações push novamente.

2. Habilitar Modos de Plano de Fundo

• No seu projeto Xcode, navegue até “Signing & Capabilities.“
• 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.

Se você não tiver um certificado APN para iOS, poderá criar um usando o guia aqui.

Em seguida, você precisa adicionar a extensão Notification Service e a extensão Notification Content apenas para 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.

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

5. Ao terminar de criar a Extensão de Serviço de Notificação, você pode ser solicitado a ativá-la. Não a ative imediatamente. Como a ativação da extensão mudaria o foco de depuração do Xcode do seu aplicativo para a extensão. Se você ativá-la por acidente, não se preocupe; você pode voltar a depurar seu aplicativo dentro do Xcode.

6. No navegador do projeto, selecione o diretório de projeto de nível superior e selecione o destino NotificationServiceExtension no projeto na lista de destinos criada na etapa nº 4.

7. Defina o Deployment Target 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 Serviço de Notificação

Para garantir o funcionamento adequado do SDK PushEngage em sua Extensão de Serviço de Notificação iOS, siga as etapas abaixo

1. Abra seu_nome_do_projeto » ios » Podfile.
2.  Adicione o seguinte ao final do seu Podfile:

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
  end
end

target 'Your_Notification_Service_Extension_Name' do
    use_frameworks!
    pod 'PushEngageExtension', '1.0.0'

  end

3. Instale a dependência:

Agora você precisa digitar o comando no diretório iOS do seu projeto e executar o seguinte comando:

pod repo update 

pod install

4. Em seu destino de 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. Veja como você pode fazer isso usando 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() {
        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 File » New » Target.
2. Selecione Notification Content Extension e clique em Next.

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:

Abra seu_nome_do_projeto » iOS » Podfile.

Adicione o seguinte ao final do seu Podfile:

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

1. Instale a dependência: Aqui está o código que você precisa executar em sua linha de comando.

e

pod repo update 
pod install

2. Na sua meta de Extensão de Conteúdo de Notificação, 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 usando Swift.

import UIKit
import UserNotifications
import UserNotificationsUI
import PushEngageExtension

@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 = PushEngageExtension.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 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á tem um grupo de aplicativos e deseja usar apenas esse, pule para a etapa nº 4.

1. No seu projeto Xcode, no navegador de projetos, selecione o diretório de projeto de nível superior e selecione a meta principal do aplicativo.
2. Navegue até a aba Signing & Capabilities.
3. Clique no botão “+ Capability” e selecione App Groups 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 do editor principal, selecione a meta 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

Em seu main.dart, inicialize o SDK PushEngage.

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    initPlatformState();
  }

  Future<void> initPlatformState() async {
    PushEngage.setAppId("your_pushengage_app_id");
  }
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'PushEngage',
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

Em seu AppDelegate.swift do aplicativo iOS

import Flutter
import UIKit
import PushEngage

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    
    override init() {
        super.init()
        PushEngage.swizzleInjection(isEnabled: true)
    }
    
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        if #available(iOSApplicationExtension 10.0, *) {
            UNUserNotificationCenter.current().delegate = self
        }
        GeneratedPluginRegistrant.register(with: self)
        PushEngage.setBadgeCount(count: 0)
        PushEngage.setNotificationWillShowInForegroundHandler { notification, completion in
            if notification.contentAvailable == 1 {
                // in case developer failed to set completion handler. After 25 sec handler will call.
                completion(nil)
            } else {
                completion(notification)
            }
        }
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

Lidando com deepLink

Um deepLinkStream é algo que emite dados de deep link. 

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  late StreamSubscription _deepLinkSubscription;

  @override
  void initState() {
    super.initState();
    PushEngage.deepLinkStream.listen((data) {
      _handleDeepLink(data);
    });
  }

  void _handleDeepLink(Map<String, dynamic>? data) {
    // Parse the deep link and navigate accordingly
    Uri uri = Uri.parse(data?['deepLink']);
    print('Path: ${uri.path}');
    updateResponseText(data.toString());
    switch (uri.path) {
      case 'trigger':
      case '/trigger':
        print(‘your_implementation’)
        break;
    }
  }

É isso, você integrou com sucesso o SDK Flutter para Android e iOS App.

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