Como posso integrar notificações push em meu aplicativo nativo react e enviar a notificação push recebida para o Freshchat SDK?

Android

1. Configuração do Firebase

Se você tiver uma conta Firebase para seu aplicativo, pode pular esta etapa. Se você não tiver uma conta Firebase para seu aplicativo, consulte https://firebase.google.com/docs/android/setup e crie uma conta para seu aplicativo.

2. Configuração de teclas do Freshchat FCM

1. No console do Firebase, em seu projeto, vá para a guia de mensagens na nuvem e você verá sua chave do servidor, copie-a. 
2. No portal da Web do Freshchat, cole a chave do servidor em Admin > Mobile SDK .

3. Adicione o projeto Android ao Firebase

1. Clique em Adicionar Firebase ao seu aplicativo Android e siga as etapas de configuração. Se você estiver importando um projeto existente do Google, isso pode acontecer automaticamente e você pode apenas baixar o arquivo de configuração.
2. Quando solicitado, digite o nome do pacote do seu aplicativo . É importante inserir o nome do pacote que seu aplicativo está usando; isso só pode ser definido quando você adiciona um aplicativo ao seu projeto do Firebase.
3. Durante o processo, você fará o download de um arquivo google-services.json . Você pode baixar este arquivo novamente a qualquer momento.
4. Adicione regras ao seu arquivo build.gradle de nível raiz , para incluir o plug-in google-services e o repositório Maven do Google,

buildscript {      // ...      dependencies {          // ...          classpath 'com.google.gms:google-services:4.2.0' // google-services plugin      }  }   allprojects {      // ...      repositories {          // ...          google() // Google's Maven repository      }  }

     v. Em seguida, no arquivo Gradle do módulo (geralmente app/build.gradle), adicione a linha apply plugin na parte inferior do arquivo para habilitar o plug-in Gradle,

apply plugin: 'com.android.application'  android {      // ...    }    dependencies {      // ...      implementation 'com.google.firebase:firebase-core:16.0.6'      // Getting a "Could not find" error? Make sure you have      // added the Google maven respository to your root build.gradle    }    // ADD THIS AT THE BOTTOM    apply plugin: 'com.google.gms.google-services'

Depois de adicionar o código de inicialização, execute seu aplicativo para enviar a verificação ao Firebase console de que você instalou o Firebase com sucesso.

4. Recebendo token push

Você precisa criar FirebaseMessagingService.java

Para usar o FirebaseMessagingService, você precisa adicionar o seguinte código no manifesto do aplicativo,

<service android:name=".java.MyFirebaseMessagingService">      <intent-filter>          <action android:name="com.google.firebase.MESSAGING_EVENT" />      </intent-filter>  </service>

O token push será recebido na função onNewToken da classe FirebaseMessagingService . 

Consulte https://firebase.google.com/docs/cloud-messaging/android/client#monitor-token-generation para obter mais detalhes.

Ao receber o push token, você pode passá-lo para o Freshchat usando o snippet abaixo.

Freshchat.getInstance(context).setPushRegistrationToken(token);

5. Recebendo notificação por push e passando para o SDK do Freshchat nativo do React

Substituindo o método onMessageReceived() em FirebaseMessagingService, você pode acessar o payload da notificação push.

Use o snippet abaixo para passar o payload de recebimento para o SDK do Freshchat nativo do React. Adicione-o a FirebaseMessagingService.java

package com.example.hotlineapp;

import com.freshchat.consumer.sdk.Freshchat;
import com.google.firebase.messaging.FirebaseMessagingService;
import com.google.firebase.messaging.RemoteMessage;

public class MyFirebaseMessagingService extends FirebaseMessagingService {

    @Override
    public void onMessageReceived(RemoteMessage remoteMessage) {
        if (Freshchat.isFreshchatNotification(remoteMessage)) {
            Freshchat.handleFcmMessage(this, remoteMessage);
        }
    }
}

Observação: como o SDK nativo do Freshchat faz parte do SDK do Freshchat do React Native,

você pode ver “com.freshchat.consumer.sdk.Freshchat” na cor vermelha (não é possível resolver o erro de classe).

Mas essas classes serão adicionadas durante a geração do build.

iOS

1. Push Notification p12 Criação de certificado e upload para Freshchat

Consulte https://support.freshchat.com/support/solutions/articles/232534 .

2. Ativando os recursos de notificação por push

Vá para a seção de recursos do seu projeto Xcode e habilite o recurso Push Notification. 

3. Configuração da Estrutura de Notificações do Usuário

eu. Importe a estrutura UserNotifications dentro de sua classe Appdelegate.

ii. Faça com que sua classe Appdelegate esteja em conformidade com o protocolo UNUserNotificationCenterDelegate e adicione o seguinte código dentro dela.

application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions [UIApplicationLaunchOptionsKey: Any]?) -> Bool function,
    UNUserNotificationCenter.current().delegate = self
    UNUserNotificationCenter.current().requestAuthorization(options:[.badge, .alert, .sound]){ (granted, error) in }
    UIApplication.shared.registerForRemoteNotifications()

iii. Implemente os seguintes métodos do protocolo UNUserNotificationCenterDelegate na classe Appdelegate.

* func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void) 
// To handle Push notification click event.
    * func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) 
// To pass the device token generated from the device

4. Passando o token do dispositivo para o Freshchat

A função a seguir será executada depois que o usuário conceder permissão para Notificação por Push e, em seguida, passar o token do dispositivo de volta para o SDK do Freshchat.

func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
        Freshchat.sharedInstance().setPushRegistrationToken(deviceToken)
    }

5. Lidando com a notificação por push, clique no estado morto do aplicativo

Adicione a seguinte linha em application(_ application: UIApplication,didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool function,

if Freshchat.sharedInstance().isFreshchatNotification(launchOptions) {            Freshchat.sharedInstance().handleRemoteNotification(launchOptions, andAppstate: application.applicationState)
}

6. Lidando com a notificação por push, clique no estado de execução do aplicativo

Adicione o seguinte código para lidar com a manipulação de cliques de notificação por push quando o aplicativo estiver em execução,

func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void) {
        let dictionary = response.notification.request.content.userInfo
        let appstate = UIApplication.shared.applicationState
        if Freshchat.sharedInstance().isFreshchatNotification(dictionary) {
            Freshchat.sharedInstance().handleRemoteNotification(dictionary, andAppstate: appstate)
        }
    }

Recentemente, atualizamos nossa marca em nossas ofertas e alteramos os nomes de nossos planos de preços. Se você se inscreveu antes de 9 de agosto de 2021, clique em Planos anteriores para visualizar seus planos aplicáveis. 
Garantimos que essa alteração não afetará sua experiência com o produto e nenhuma ação é necessária de sua parte.