As notificações desempenham um papel importante em nossos aplicativos. Eles são a principal fonte de incentivo ao engajamento dos usuários com nosso aplicativo. Freqüentemente, as empresas notificam os usuários sobre mensagens recém-recebidas e notificações em aplicativos de carteira, por exemplo, informam os usuários sobre os próximos pagamentos de contas.
Existem vários tipos de notificações que podemos implementar em nossos aplicativos, como remotas e notificações locais, notificações interativas e notificações silenciosas. Neste artigo, vamos cobrir como implementar esses tipos de notificações usando react-native-Notifications .
O que é react-native-notifications?
O React-native-notifications é um produto de código aberto da Wix que ajuda os desenvolvedores a implementar notificações facilmente nos aplicativos React Native. De acordo com a documentação , você pode integrá-lo ao iOS 10 e Android 5 (API 21). Também pode ser compilado nos sistemas operacionais Windows, macOS e Linux.
No momento em que este artigo foi escrito, a biblioteca oferece suporte a:
Notificações remotas Notificações locais Notificações gerenciadas pelo servidor Notificações interativas
Instalando react-native-Notifications
Vamos começar instalando a biblioteca. Este guia assume que você está executando o React Native v10.x.
Com npm:
npm install–save react-native-notifications
Com Yarn:
yarn add react-native-notificações
Agora precisamos fazer algumas alterações nos arquivos nativos para trabalhar com as notificações react-nativas.
Vinculando as notificações react-nativas com iOS
Se cocoapods não está instalado
O React Native funciona com cocoapods. Se não estiver instalado em sua máquina, execute este comando:
sudo gem install cocoapods
Agora vá para o diretório do projeto usando cd.
Se o cocoapods for instalado antes da instalação do react-native-Notifications
É hora de instalar os cocoapods no diretório iOS do projeto. Quando instalamos a biblioteca react-native-notification, ela adiciona pods automaticamente ao Podfile. Portanto, só precisamos executar este comando:
pod install–project-directory=ios/
Se cocoapods foi instalado posteriormente e os pods não foram adicionados ao Podfile por react-native-Notifications
Se você instalou cocoapods recentemente ou o pod necessário não foi adicionado ao Podfile, você pode adicioná-lo manualmente:
Abra./ios/Podfile (supondo que você esteja no diretório do projeto) e adicione isso à lista de pods:
pod’react-native-Notifications’,: podspec=>’../node_modules/react-native-notifications/react-native-notifications.podspec’
Agora execute isto:
cd iOS && pod install
Na próxima etapa, faremos algumas alterações no arquivo AppDelegate.m. Abra o arquivo./ios/{project_name}/AppDelegate.m e conclua as etapas a seguir.
Adicione esta linha ao início do arquivo: #import”RNNotifications.h”Inicie monitorNotifications com este snippet de código:-( BOOL) aplicativo: (UIApplication *) aplicativo didFinishLaunchingWithOptions: (NSDictionary *) launchOptions {[RNNotifications startMonitorNotifications];//-> Adicionar esta linha return YES; } Adicione as seguintes funções para oferecer suporte ao registro:-(void) aplicativo: (UIApplication *) aplicativo didRegisterForRemoteNotificationsWithDeviceToken: (NSData *) deviceToken {[RNNotifications didRegisterForRemoteNotificationsWithDeviceToken: deviceToken]; }-(vazio) aplicativo: (UIApplication *) aplicativo didFailToRegisterForRemoteNotificationsWithError: (NSError *) error {[RNNotifications didFailToRegisterForRemoteNotificationsWithError: erro]; }
Vinculando react-native-Notifications com Android
Primeiro abra MainApplication.java e adicione-o à biblioteca:
import com.wix.reactnativenotifications.RNNotificationsPackage;
No Android, as notificações push são gerenciadas pelo Google Firebase Cloud Messaging (FCM) , então você precisará usá-lo daqui para frente. Se você nunca usou o Firebase em seu projeto antes, siga as etapas fornecidas em guia de configuração .
Precisamos vincular as notificações react-native-no arquivo./android/settings.gradle, assim:
include’: react-native-notificações’project (‘: react-native-Notifications’). projectDir=new File (rootProject.projectDir,’../node_modules/react-native-notifications/lib/android/app’)
Se desejar , você pode definir algumas configurações padrão para as notificações no Android, como o ícone padrão, cor do texto, etc., a serem exibidos. Essas configurações serão usadas se não fornecermos configurações específicas ao enviar notificações.
Em seguida, abra AndroidManifest.xml e adicione o seguinte código:
Aqui, estamos definindo um ícone de notificação padrão, que é armazenado em uma pasta drawable. Observe que o nome do ícone deve ser notification_icon. Também estamos definindo uma cor de texto padrão, que adicionaremos ao arquivo colors.xml.
Implementação notificações push no React Native
Em primeiro lugar, precisamos entender como funcionam as notificações push. Cada dispositivo possui um ID de dispositivo exclusivo. Para enviar uma notificação, precisamos deste ID. Vamos revisar como implementar notificações push passo a passo.
Registre o dispositivo nos servidores do fornecedor (FCM, por exemplo) ou obtenha permissões no iOS Adquira o token de atualização e armazene-o no servidor de notificação, como Amazon SNS Envie notificações usando tokens armazenados
Obtendo permissão e registrando o dispositivo
No iOS , precisamos obter permissão dos usuários para exibir notificações.
Fonte: Apple.com
No Android , registramos o dispositivo no FCM e obtemos o token de atualização.
Isso é feito chamando a função remoteNotificationsRegistered (). Funciona para ambas as plataformas.
import {Notifications} from’react-native-notifications’; class App extends Component {constructor () {//Solicitar permissões no iOS, atualizar token no Android Notifications.registerRemoteNotifications (); Notifications.events (). RegisterRemoteNotificationsRegistered ((event: Registered)=> {//TO-DO: Envie o token para o meu servidor para que ele possa enviar de volta notificações push… console.log (“Device Token Received”, evento. deviceToken);}); Notifications.events (). RegisterRemoteNotificationsRegistrationFailed ((event: RegistrationError)=> {console.error (event);}); }}
Primeiro, importamos a biblioteca react-native-Notifications em App.js. No construtor, chamamos registerRemoteNotifications (), que mostrará a caixa de diálogo de permissão no iOS e registrará o aplicativo no FCM no Android.
Dependendo do sucesso desta função, a função registerRemoteNotificationsRegistered () ou registerRemoteNotificationsRegistrationFailed () função será chamada.
Se falhar, você não terá permissão para enviar notificações. Você pode tentar obter as permissões novamente mais tarde e esperar o sucesso.
Se for bem-sucedido, registerRemoteNotificationsRegistered () fornecerá o deviceToken, que precisamos enviar ao back-end e registrar nos serviços de notificação.
Veja como verificar quais permissões o usuário concedeu no iOS.
Notifications.ios.checkPermissions (). then ((currentPermissions)=> {console.log (‘Badges enabled:’+ !! currentPermissions.badge); console.log (‘Sons habilitados:’+ !! currentPermissions.sound); console.log (‘Alertas habilitados:’+ !! currentPermissions.alert); console.log (‘Car Play habilitado:’+! ! currentPermissions.carPlay); console.log (‘Alertas críticos habilitados:’+ !! currentPermissions.criticalAlert); console.log (‘Provisório habilitado:’+ !! currentPermissions.provisional); console.log (‘Fornece configurações de notificação de aplicativos habilitado:’+ !! currentPermissions.providesAppNotificationSettings); console.log (‘Anúncio habilitado:’+ !! currentPermissions. anúncio); });
Lidando com notificações recebidas no React Native
Do seu servidor, você pode enviar notificações usando tokens de atualização. Agora é a hora de lidar com eles em seu aplicativo, mas como fazemos isso depende se o aplicativo está em primeiro ou segundo plano.
Quando o aplicativo está em primeiro plano, o que significa que está ativo e usado pelo user-o evento notificationReceivedForeground () é disparado. Da mesma forma, se o aplicativo estiver sendo executado em segundo plano, o evento notificationReceivedBackground () será acionado.
Este é o bloco de código para se o aplicativo estiver sendo executado em primeiro plano:
Notifications.events (). registerNotificationReceivedForeground ((notificação: Notificação, conclusão: (resposta: NotificationCompletion)=> void)=> {console.log (“Notification Received-Foreground”, notification.payload);//Chamar a conclusão no iOS com `alert: true` irá apresentar a notificação inApp nativa do iOS. conclusão ({alert: true, sound: true, badge: false});});
É importante chamar o retorno de chamada de conclusão para indicar que o processo foi concluído.
Este é o código se o aplicativo estiver em segundo plano.
Notifications.events (). registerNotificationReceivedBackground ((notification: Notificação, conclusão: (resposta: NotificationCompletion)=> void)=> {console.log (“Notification Received-Background”, notification.payload);//Chamar a conclusão no iOS com `alert: true` apresentará o iOS nativo notificação inApp. conclusão ({alerta: verdadeiro, som: verdadeiro, emblema: falso});});
Se uma notificação for aberta quando um usuário tocar nela, um evento notificationOpened será disparado.
Notifications.events (). registerNotificationOpened ((notificação: Notificação, conclusão: ()=> void, ação: NotificationActionResponse)=> {console.log (“Notificação aberta pelo usuário do dispositivo”, notification.payload); console.log (`Notificação aberta com um identificador de ação: $ {action.identifier} e texto de resposta: $ {action.text}`); conclusão ();});
Os dados recebidos em notification.payload são:
identificador título subtítulo corpo som emblema categoria carga útil
Envio de notificações locais do aplicativo React Native
Quando enviamos notificações do aplicativo , eles são chamados de notificações locais. Eles são totalmente suportados no React Native usando postLocalNotification ().
let localNotification=Notifications.postLocalNotification ({body:”Local notification!”, Title:”Local Notification Title”, sound:”chime.aiff”, silent: falso, categoria:”SOME_CATEGORY”, userInfo: {}, fireDate: new Date (),});
Com ele, podemos passar várias opções como corpo, título, som e categoria. A propriedade fireDate programa a notificação para uma data e hora e é necessária quando você deseja mostrar a notificação no futuro.
Esta propriedade funciona apenas no iOS. O evento retorna um ID de notificação exclusivo, que armazenamos em uma variável local, localNotification. Isso é usado para cancelar a notificação agendada caso seja necessário.
Cancelando notificações locais no React Native
Para cancelar a notificação local, precisamos passar a variável localNotification para cancelLocalNotification () função.
Notifications.cancelLocalNotification (localNotification);
Para iOS, temos mais funções que podemos usar para cancelar notificações:
cancelAllLocalNotifications () é usado para cancelar todas as notificações locais agendadas. Não requer nenhuma notificação removeDeliveredNotifications () remove notificações do centro de notificação que já existiam entregue. Você precisa passar o conjunto de IDs de notificação para removê-los removeAllDeliveredNotifications () remove todas as notificações entregues do centro de notificação
Conclusão
React-native-Notifications é a ponte entre React Native e APIs de notificação nativa e funciona com Android e iOS.
Nesta postagem do blog, aprendemos sobre notificações push e locais e como elas ajudam a aumentar o envolvimento do usuário. Embora muitas opções sejam específicas para plataformas, as notificações reac-nativas lidam bem com ambas as plataformas e fornecem funções comuns sempre que possível.
