Configurando Firebase para receber notificações push – RN

Aprenda a configurar o firebase no seu app para receber notificações push 100% gratuito.

No post de hoje vamos falar sobre notificações push no firebase. Vou te mostrar como instalar e configurar o firebase no seu App para receber notificações.

Espero ajudar a comunidade com este post, tive bastante dificuldade para fazer essa configuração no início e a documentação não me ajudou muito.

O nosso app de exemplo será a replica de um blog. Ele terá 2 telas e será capaz de receber notificações e navegar para uma determinada postagem. 

Nesse tutorial vou abordar apenas o sistema android. Por ser um tutorial muito longo decidi quebrar ele em várias partes e dividir por sistemas. Em breve teremos um tutorial especial para IOS.

Antes de tudo, se você gosta desse tipo de conteúdo aproveite para assinar nossa newsletter e ficar por dentro de todas as novidades do blog.

O Inicio – Configurando a lib React Native firebase V6

Antes de mais nada, vou assumir que você já tem um app criado e que você já tem uma conta no firebase. Não é complicado criar a conta. O resto vou falar aqui.

Se você quiser seguir a documentação original você pode consultar clicando aqui.

A primeira parte é configurar o firebase no seu projeto React Native. Vamos instalar o seguinte pacote.

# Using npm
npm install --save @react-native-firebase/app

# Using Yarn
yarn add @react-native-firebase/app

O segundo passo é baixar os arquivos de configuração do firebase. É nesse passo que as coisas começam a ficar confusas.

Existe um passo a passo no firebase para baixar um json que faz toda a configuração no app. Para baixar e instalar esse arquivo é só seguir o passo a passo no vídeo.

Explicando o vídeo:

Você precisa registrar seu app no firebase.

No processo do vídeo eu criei os arquivos que permite me autenticar no servidor do projeto e consumir os recursos da minha conta.

Validar credenciais do Android

Para permitir que o Android valide as credenciais, o arquivo google-services.json (é aquele JSON que baixamos) deve estar ativado no projeto. Isso requer modificação para dois arquivos no diretório Android.

Primeiro, adicione o google-services.json plugin como uma dependência dentro do /android/build.gradle

buildscript {
  dependencies {
    // ... other dependencies
    classpath 'com.google.gms:google-services:4.2.0'
  }
}

Por fim, execute o plugin adicionando o seguinte na parte inferior do /android/app/build.gradle

apply plugin: 'com.google.gms.google-services'

Agora pare o seu app e rode um yarn android ou npx react-native run-android. Isso vai compilar a parte native novamente e se tudo estiver certo vamos para a próxima etapa.

Segundo passo – Utilizando a lib do Cloud Messaging

Primeiramente vamos instalar o cloud messaging utilizando o seguinte comando:

# Install the messaging module
yarn add @react-native-firebase/messaging

Antes que os dispositivos possam receber e enviar mensagens via FCM, eles devem ser registrados. A biblioteca expõe o método registerDeviceForRemoteMessages que deve ser chamado no início do ciclo de vida dos aplicativos. É recomendável que esse método seja chamado em toda inicialização do aplicativo:

import messaging from '@react-native-firebase/messaging';

async function registerAppWithFCM() {
  await messaging().registerDeviceForRemoteMessages();
}

Em outras palavras, coloca o código na App.js

Se tudo deu certo até aqui então parabéns! Seu app já pode receber notificações push. Mas espera um pouco que ainda não acabou…

A essa altura você já consegue receber notificações push do seu projeto no firebase, mas você quer fazer o seu app e seu usuário interagir com a notificação. Para isso você vai precisar entender alguns detalhes importantes.

Os estados de um app para o firebase

Seu app pode assumir 1 dos 3 estados dentro do sistema operacional. Além disso ele pode mudar de estado conforme o usuário interage. Saber os estados será importante para escolher os metodos corretos para interagir com a notificação.

Mensagens de estado de primeiro plano

Vamos supor que seu usuário está navegando no seu app e nesse momento é disparado uma notificação com uma promoção ou algo do tipo. Você pode fazer com que um modal apareça destacando aquela campanha.

Para ouvir as mensagens em primeiro plano, chame o método onMessage dentro do código do aplicativo. O código executado através deste manipulador tem acesso ao contexto React e é capaz de interagir com seu aplicativo (por exemplo, atualizando o estado ou a interface do usuário).

import React, { useEffect } from 'react';
import { Alert } from 'react-native';
import messaging from '@react-native-firebase/messaging';

function App() {
  useEffect(() => {
    const unsubscribe = messaging().onMessage(async remoteMessage => {
      Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
    });

    return unsubscribe;
  }, []);
}

A propriedade remoteMessage contém todas as informações sobre a mensagem enviada ao FCM para o dispositivo, incluindo dados personalizados (via dataprops) e dados de notificação. Para saber mais, consulte a RemoteMessage referência da API.

Mensagens de estado em segundo plano e sair

Quando o aplicativo estiver em background ou quit, o manipulador onMessage não será chamado ao receber mensagens. Em vez disso, você precisa configurar um manipulador de call back em segundo plano por meio do métodosetBackgroundMessageHandler

// index.js
import { AppRegistry } from 'react-native';
import messaging from '@react-native-firebase/messaging';
import App from './App';

// Register background handler
messaging().setBackgroundMessageHandler(async remoteMessage => {
  console.log('Message handled in the background!', remoteMessage);
});

AppRegistry.registerComponent('app', () => App);

O manipulador deve retornar uma promise assim que sua lógica for concluída para liberar recursos do dispositivo. Ele não deve tentar atualizar nenhuma interface do usuário (por exemplo, via estado) – você pode executar solicitações de rede, atualizar o armazenamento local etc.

A propriedade remoteMessage contém todas as informações sobre a mensagem enviada ao FCM para o dispositivo, incluindo quaisquer dados personalizados por meio da propriedade data. Para saber mais, consulte a RemoteMessage referência da API.

Abrindo o app pela notificação push em uma rota específica.

Quando um usuário interage com sua notificação pressionando-o, o comportamento padrão é abrir o aplicativo (uma vez que as notificações via FCM são exibidas apenas quando o aplicativo está em segundo plano, o aplicativo sempre será aberto).

Em muitos casos, é útil detectar se o aplicativo foi aberto pressionando uma notificação (para que você possa abrir uma tela específica, por exemplo). A API fornece duas APIs para lidar com a interação:

• getInitialNotification: Quando o aplicativo é aberto a partir de um estado de encerramento.
• onNotificationOpenedApp: Quando o aplicativo está sendo executado, mas em segundo plano.

Para lidar com os dois cenários, o código pode ser executado durante a instalação. Por exemplo, usando o React Navigation , podemos definir uma rota inicial quando o aplicativo for aberto a partir de um estado de encerramento e avançar para uma nova tela quando o aplicativo estiver em um estado de segundo plano:

import React, { useState, useEffect } from 'react';
import messaging from '@react-native-firebase/messaging';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  const navigation = useNavigation();
  const [loading, setLoading] = useState(true);
  const [initialRoute, setInitialRoute] = useState('Home');

  useEffect(() => {
    // Assume a message-notification contains a "type" property in the data payload of the screen to open

    messaging().onNotificationOpenedApp(remoteMessage => {
      console.log(
        'Notification caused app to open from background state:',
        remoteMessage.notification,
      );
      navigation.navigate(remoteMessage.data.type);
    });

    // Check whether an initial notification is available
    messaging()
      .getInitialNotification()
      .then(remoteMessage => {
        if (remoteMessage) {
          console.log(
            'Notification caused app to open from quit state:',
            remoteMessage.notification,
          );
          setInitialRoute(remoteMessage.data.type); // e.g. "Settings"
        }
        setLoading(false);
      });
  }, []);

  if (loading) {
    return null;
  }

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={initialRoute}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Settings" component={SettingsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Finalizando…

Ufa!! Foi cansativo escrever esse texto todo rsrs… se você quiser se aprofundar no assunto consulte a documentação oficial da lib em rnfirebase.io lá você encontra tudo com mais detalhes.

Eu vou ficando por aqui, deixa nos comentários o que você achou do post ! =D

Veja também

• Deep Link – guia prático para configurar seu app
• React Native – Agora cria aplicativos ficou mais fácil
• que é o ReactJS – Tire suas dúvidas e comece hoje a usar