Já pensou nas notificações que recebemos dos aplicativos que instalamos? ou Como é que Swiggy ou Zomato nos provocam a pedir comida às 3 da manhã com as suas notificações criativas? ?

Vamos nos aprofundar no conceito de notificações!

O que são notificações?

Uma notificação é uma mensagem ou alerta enviado por um aplicativo para informar os usuários sobre atualizações, eventos ou ações, normalmente entregues fora da interface do aplicativo.

Agora pode haver dois tipos de notificações conforme mostrado abaixo -

Notificação push

Notificações push são mensagens ou alertas enviados de um servidor para um aplicativo quando o aplicativo não está sendo executado ativamente em primeiro plano. Eles são usados ​​principalmente para manter os usuários envolvidos, enviando atualizações, lembretes ou conteúdo personalizado. As notificações push são entregues por meio de serviços do sistema operacional, como Apple Push Notification Service (APNs) para iOS ou Firebase Cloud Messaging (FCM) para Android.

Como funciona a notificação push:

1. Registro: quando o aplicativo é instalado ou aberto pela primeira vez, o aplicativo solicita um token de dispositivo exclusivo do serviço de notificação por push do sistema operacional (APNs ou FCM).
2. Comunicação do servidor: o aplicativo envia esse token para o servidor back-end do aplicativo, que o armazena para uso futuro.
3. Envio de notificações: o servidor envia uma carga útil de notificação (contendo título, mensagem, botões de ação, etc.) para o serviço de notificação push (APNs/FCM) com o token do dispositivo.
4. Entrega: O serviço de notificação push entrega a mensagem no respectivo dispositivo, mesmo que o aplicativo não esteja em execução.

Notificação no aplicativo

Notificações no aplicativo são mensagens ou alertas exibidos aos usuários enquanto eles estão usando ativamente o aplicativo. Ao contrário das notificações push, estas não requerem intervenção do servidor e são acionadas dentro do próprio aplicativo, geralmente como resultado de ações do usuário ou eventos do aplicativo.

Como funciona a notificação no aplicativo:

1. Acionador de evento: quando um evento específico ocorre dentro do aplicativo (como um usuário atingindo um marco ou um recurso que precisa de atenção), o aplicativo pode acionar uma notificação no aplicativo.
2. Exibição: a notificação é mostrada como um banner, modal ou pop-up na UI do aplicativo, orientando o usuário ou informando-o sobre o evento.
3. Lógica personalizada: as notificações no aplicativo são tratadas diretamente pelo código do aplicativo e podem ser mostradas dinamicamente com base no estado interno ou na lógica do aplicativo.

---

Implementação no aplicativo Android React Native:

Agora que sabemos sobre notificações e seus tipos, é hora de implementar o recurso em seu próprio aplicativo react nativo. Este guia é para implementar apenas notificações push no aplicativo Android nativo React, se você quiser iOS ou notificação no aplicativo, escreva um comentário e eu postarei isso com certeza!

Para começar, usaremos um serviço de terceiros chamado

OneSignal. Recentemente encontrei esta plataforma e fiquei chocado com os serviços que ela oferece.

Sobre OneSignal:

OneSignal é um serviço de notificação push que permite aos desenvolvedores de aplicativos enviar notificações direcionadas aos usuários em várias plataformas, incluindo aplicativos móveis, sites e e-mail. Ele oferece suporte a notificações push, no aplicativo e na web, fornecendo recursos como segmentação, automação, testes A/B e análises em tempo real. OneSignal é amplamente utilizado para melhorar o envolvimento e retenção do usuário, oferecendo uma solução fácil de integrar para envio de mensagens personalizadas. Seu nível gratuito consiste em envios de e-mail gratuitos de 10.000/mês, envios push móveis ilimitados, fluxos de trabalho de jornadas, conformidade com GDPR, testes A/B

---

Voltando ao guia, pois já sabemos que as notificações push requerem tratamento do lado do servidor via FCM (Firebase Cloud Messaging), portanto, há algumas etapas a seguir:

1. Configure o projeto do Firebase (ignore as duas primeiras etapas se você já tiver o projeto do Firebase):
   Vá para o console do Firebase e faça login na sua conta.
   Crie um projeto aqui e siga as etapas
   • 
   Depois que seu projeto for criado, vá para as configurações do projeto na barra lateral
   • 
   Navegue para contas de serviço na barra e deve ficar assim
   • 
   Clique em
   • Gerar nova chave privada e isso fará o download de um arquivo json, armazene-o com cuidado em algum lugar seguro, precisaremos disso ao configurar o OneSignal.
2. Configurar o OneSignal
   Vá para OneSignal e crie uma conta.
   Depois de criar uma conta, siga as etapas de configuração e crie uma organização e agora você verá uma página para adicionar aplicativos.
   Nesta página, forneça o nome do seu aplicativo e selecione
   • Google Android (FCM) para o nosso caso. e clique em Configurar sua plataforma
   Agora você será redirecionado para esta página onde usaremos o arquivo json da conta de serviço baixado durante a configuração do Firebase
   • Faça upload do json e depois Salvar e continuar
   Na próxima página, selecione React Native/Expo como SDK de destino e depois
   • Salvar e continuar novamente
   Na próxima tela você obterá seu
   • ID do aplicativo, este é um ID confidencial e usando esse ID qualquer pessoa pode acionar notificações em seu aplicativo, então tome cuidado com este segredo.

Concluímos a configuração do Firebase e do OneSignal, agora a única tarefa que resta é um pouco de

Café com Código

Adicione OneSignal ao seu aplicativo e configure-o

Etapa 1: adicione OneSignal ao seu aplicativo executando este comando primeiro

npm i react-nativo-onesignal

                       npm i react-native-onesignal

Etapa 2: Em seu index.js ou App.tsx ou App.js, qualquer que seja a raiz do seu projeto, importe OneSignal

importar {OneSignal} de 'react-native-onesignal';

                       npm i react-native-onesignal

e você adicionou este trecho de código para inicializar o OneSignal

OneSignal.initialize('SEU_APP_ID');

                       npm i react-native-onesignal

Você pode envolver isso em um gancho useEffect para integração e conectividade perfeitas com OneSignal.

Isso inicializará o dispositivo com um ID exclusivo para OneSignal e você pode verificar isso nas assinaturas na barra lateral. Cada dispositivo inicializado será identificado com este

OneSignal ID exclusivo e você também poderá configurá-lo manualmente se já tiver usuários com seus próprios IDs exclusivos usando este snippet de código:

OneSignal.login(userId)

                       npm i react-native-onesignal

Assim que o usuário for inscrito com sucesso, ele será exibido no painel como este

Agora você pode encontrar alguns problemas com o OneSignal não sendo usado corretamente ou alguns erros críticos, então aqui está uma parte que você pode seguir e que me ajudou a resolver esses problemas.

Etapa 3: Dentro do seu android\app\build.gradle adicione este snippet de código

dependências{ ... implementação('com.onesignal:OneSignal:[3.15.4, 3.99.99]') ... }

                       npm i react-native-onesignal

Etapa 4: No Android, para fornecer as permissões necessárias para notificações push, em Android\app\src\main\AndroidManifest.xml adicione

                       npm i react-native-onesignal

logo antes da tag do aplicativo. A permissão INTERNET é opcional, pois pode estar habilitada por padrão.

Bom? Todas as etapas são abordadas para implementar notificações push, e você pode enviar uma notificação de teste do próprio painel OneSignal.

Experimente você mesmo e qualquer dúvida pode comentar abaixo. Siga para guias mais detalhados!

Referências:

https://documentation.onesignal.com/docs/react-native-sdk-setup
https://documentation.onesignal.com/reference/push-notification
https://medium.com/tribalscale/mobile-push-notifications-implementation-in-react-native-with-one-signal-4e810dddd350

Boa codificação!?‍?