Como implementar notificações push em um aplicativo React Native usando o Sendbird Chat
Introdução: O que são notificações push e por que são importantes?
Uma notificação push é uma mensagem pop-up automatizada e clicável enviada por um aplicativo aos seus usuários. A mensagem é entregue imediatamente a um dispositivo quando ele está ocioso ou executando o aplicativo em segundo plano. As notificações push são importantes porque:
- Forneça informações importantes, lembretes e notícias relacionadas às atividades ou interesses do usuário
- Aumentar as métricas de engajamento com aplicativos para dispositivos móveis
- Mostre conteúdo em destaque
- Direcione tráfego direcionado e relevante que aumente as taxas de conversão
- Crie uma experiência de usuário perfeita com conteúdo personalizado, oportuno e relevante
Nosso guia para notificações push em dispositivos móveis contém tudo o que você precisa saber sobre notificações push, seus benefícios e como elas podem ser usadas.< /span>
Vale ressaltar que o usuário médio de smartphone nos EUA recebe 45 notificações push por dia. De acordo com RubyGarage, as organizações que implementam notificações push têm uma retenção de clientes 3 vezes maior e um envolvimento 88% maior do que as empresas que não o fazem. Embora existam variações na aceitação de notificações push e nas taxas de cliques com base no setor, localização, tipo, e muitos outros fatores, fica claro que o argumento para a implementação de notificações push é forte.
Este tutorial fornece instruções passo a passo para implementar notificações push do React Native. Mas primeiro, vamos dar uma olhada em alguns pré-requisitos.
Pré-requisitos
- Crie uma conta Sendbird.
- Certifique-se de que Sendbird Chat funcione bem em seu aplicativo React Native.
Lembre-se de que quando uma mensagem é enviada ao servidor Sendbird a partir de um aplicativo (por meio do SDK do Chat para JavaScript), o servidor se comunica com FCM. O FCM então entrega uma notificação push ao dispositivo Android ou se comunica com APNs para entregar a notificação push ao dispositivo iOS.
Notificações push para aplicações React Native
Notificações push podem ser enviadas para usuários de aplicativos móveis híbridos (Android e iOS) usando o SDK do Sendbird Chat para JavaScript. Atualmente, a funcionalidade de notificação push do JavaScript SDK é compatível apenas com React Native. Este tutorial fornece detalhes para ativar notificações push em um aplicativo React Native usando Firebase Cloud Messaging (FCM) e o Sendbird Chat SDK.
Antes de nos aprofundarmos nos detalhes da implementação, vamos falar sobre mensagens FCM. Existem dois tipos de mensagens FCM: mensagens de notificação e mensagens de dados. De acordo com a documentação do Firebase, “As mensagens de notificação têm um conjunto predefinido de chaves visíveis ao usuário e uma carga útil de dados opcional de pares de chave-valor personalizados”. As mensagens de dados contêm apenas pares de valores-chave definidos pelo usuário. Sendbird usa mensagens de dados, permitindo que aplicativos clientes criem a carga útil da mensagem personalizada que consiste nesses pares de valores-chave personalizados.
Notificações push não são suportadas para aplicativos da web. Se você precisar implementar notificações push para aplicativos web, recomendamos usar os eventos de webhook para implementar notificações push para aplicativos web.
Antes de começar, verifique se você tem acesso ao Console do Firebase. Vamos mergulhar! 💻
Etapa 1: Registrar credenciais FCM e certificado APNs no painel do Sendbird
O servidor Sendbird requer uma chave de servidor FCM para Android e certificado APNs para iOS para entregar notificações push.
Siga as etapas 1 e 2 deste tutorial para registrar as credenciais do FCM e siga as instruções no docs para registrar o certificado APNs no painel Sendbird.
Etapa 2: Instalar o módulo Firebase do React Native e adicionar os arquivos de configuração
React Native Firebase é a coleção de pacotes oficialmente recomendada que oferece suporte ao React Native para todos os serviços do Firebase em aplicativos Android e iOS. Configure o FCM para Android e APNs para iOS no seu projeto React Native seguindo as instruções na documentação oficial. Ao final desta etapa, você deverá ter os aplicativos Android e iOS adicionados ao projeto Firebase e os respectivos arquivos de configuração adicionados ao projeto React Native.
Consulte a página notificações do React Native Firebase para saber mais sobre como exibir e lidar com notificações do FCM.
Etapa 3: Registrar um token push no servidor Sendbird
Para enviar mensagens de notificação para um aplicativo cliente específico, o FCM requer um token de registro FCM para dispositivos Android e um token de dispositivo APNs para dispositivos iOS, emitido pela instância do aplicativo cliente. Portanto, o servidor Sendbird também precisa do token de registro de cada instância do aplicativo cliente para enviar solicitações de notificação ao FCM em seu nome. O Chat SDK fornece uma interface para registrar e cancelar o registro desses dois tipos de tokens no servidor Sendbird.
O trecho de código abaixo mostra o registro do token do dispositivo.
O push token registrado aparece no painel em ‘Usuários > ID_do_usuário > Bater papo':
Etapa 4: Receber mensagens de notificação push
Depois que o token do dispositivo for registrado, a instância do aplicativo cliente poderá receber e processar as mensagens de notificação do FCM, independentemente da plataforma iOS ou Android. Consulte a página de uso da documentação do React Native Firebase para saber mais sobre a implementação.
O Sendbird Chat SDK para JavaScript não detecta automaticamente o estado do seu aplicativo, portanto, setForegroundState() e Os métodos setBackgroundState() fornecidos pelo SDK Sendbird precisam ser chamados explicitamente.
Revise a documentação do React Native Firebase para entender os manipuladores de eventos disponíveis para receber mensagens. O snippet de código abaixo mostra a análise das mensagens FCM recebidas.
Observação: os canais são um conceito exclusivo do Android usado para categorizar e permitir que os usuários controlem como as notificações são tratadas em seus dispositivos.
O objeto de dados analisado a partir de uma mensagem de dados FCM contém um conjunto de itens de valor-chave, conforme mostrado no código JSON abaixo.
Dicas para solucionar problemas com notificações push
A solução de problemas de notificações push pode ser complexa; aqui estão algumas dicas sobre como fazer isso.
- Para facilitar aos desenvolvedores a depuração e a solução de problemas de notificações push, criamos uma ferramenta de teste que pode ser útil. Consulte este tutorial para entender como usar a ferramenta, que você pode acessar através do painel do Sendbird.
- Confira este guia abrangente para solucionar problemas de notificações push de bate-papo do Android.
- Se você quiser depurar condições de falha, consulte os códigos de erro do FCM.
Conclusão
E pronto! Agora você sabe enviar notificações push para aplicativos React Native com Sendbird Chat. Com as orientações deste tutorial e os documentos, você estará no caminho certo para enviar notificações push oportunas, relevantes e envolventes rapidamente!
Estamos sempre aqui para ajudar; entre em contato conosco se tiver alguma dúvida, comentário ou preocupação.
Feliz construção de notificações push! 💻