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.
Estado | Descrição |
---|---|
Primeiro plano (Foreground) | Quando o aplicativo está aberto e visível. |
fundo (Background) | Quando o aplicativo está aberto, porém em segundo plano (minimizado). Isso geralmente ocorre quando o usuário pressiona o botão “home” no dispositivo ou alterna para outro aplicativo por meio do alternador de aplicativos. |
Sair (Quit) | Quando o dispositivo está bloqueado ou o aplicativo não está ativo ou em execução. O usuário pode sair de um aplicativo “deslizando-o para longe” por meio da interface do usuário do alternador de aplicativos no dispositivo. |
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 data
props) 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
Outros links