Configuração de Notificações Push em React Native Android

17 min

notificações push para react native no android introdução este guia ensinará você a usar o parse para enviar notificações push para seu aplicativo react native no android você configurará o firebase e configurará seu aplicativo back4app para enviá las via painel e funções de cloud code a qualquer momento, você pode acessar o projeto android completo construído com este tutorial em nossos repositórios do github repositório de exemplo em javascript https //github com/templates back4app/react native js push notifications repositório de exemplo em typescript https //github com/templates back4app/react native ts push notifications pré requisitos para completar este tutorial, você precisará um aplicativo react native criado e conectado ao back4app https //www back4app com/docs/react native/parse sdk/react native sdk entender como implantar uma função em nuvem https //www back4app com/docs/get started/cloud functions no back4app uma conta ativa no google, para que você possa usar o google firebase objetivo envie notificações push do parse para um aplicativo react native no android, usando o painel do back4app e funções de cloud code 1 configurando o firebase o firebase é o provedor de serviços mais utilizado para enviar e receber notificações push no android é usado por uma ampla gama de empresas atualmente, juntamente com outras várias ferramentas vamos começar criando um projeto firebase para seu aplicativo seguindo os passos 1 e 2 da esta documentação https //firebase google com/docs/android/setup#console após criar seu aplicativo e antes de sair do console do firebase, certifique se de baixar e salvar o arquivo google services json e também vá para as configurações do projeto, na aba “cloud messaging” e recupere as seguintes chaves chave do servidor; id do remetente 2 habilitando notificações push no back4app para vincular seu projeto firebase com o back4app e habilitar o envio de notificações push através do seu painel e código em nuvem, siga estas etapas vá para site do back4app https //www back4app com/ , faça login, encontre seu aplicativo e clique em \configurações do servidor\ encontre o bloco “notificação push para android” e clique em \configurações\ > \editar\ o bloco “notificação push para android” se parece com isso 3\ adicione a \chave do servidor\ do firebase ao campo \chave da api\ e o \id do remetente\ ao campo \id do remetente gcm\ 4\ salve e você está pronto 3 instalando e configurando dependências no seu projeto react native, vamos instalar a \react native push notification\ biblioteca, que integrará o aplicativo com o firebase e permitirá que você gerencie qualquer notificação recebida execute o seguinte comando no diretório raiz do seu projeto yarn add react native push notification após a instalação, você ainda precisa adicionar algumas configurações ao \android/app/src/main/androidmanifest xml\ , \android/build gradle\ e \android/app/build gradle\ seguindo a documentação https //github com/zo0r/react native push notification certifique se de também adicionar no \androidmanifest xml\ um \meta data\ contendo o id do canal de notificação padrão para seu aplicativo (vamos usar \guidechannel\ como nosso exemplo) você pode adicionar o nome diretamente na diretiva ou incluí lo no \strings xml\ arquivo além disso, coloque o arquivo \google services json\ do seu projeto no diretório \android/app\ 1 \<meta data 2 android\ name="com google firebase messaging default notification channel id" 3 android\ value="guidechannel" /> 4 \<! or > 5 \<meta data 6 android\ name="com google firebase messaging default notification channel id" 7 android\ value="@string/default notification channel id" /> no próximo passo, aprenderemos como usar esta biblioteca e combiná la com o parse 4 gerenciando notificações push vamos criar um arquivo com novos métodos relacionados a notificações push chamado \pushnotificationmethods js\ (ou \pushnotificationmethods tsx\ ) e adicionar a seguinte função, que é responsável por inicializar o \react native push notification\ , criando um canal de notificação e também configurando o parse para reconhecer a configuração de push do nosso dispositivo javascript 1 import pushnotification from 'react native push notification'; 2 import parse from 'parse/react native'; 3	 4 const channelid = 'guidechannel'; 5	 6 export async function configurepushnotifications() { 7 // initialize pushnotification 8 await pushnotification configure({ 9 // (required) called when a remote is received or opened, or local notification is opened 10 onnotification function (notification) { 11 // process the notification 12 console log('notification ', notification); 13 // if notification is remote and has data, trigger local notification to show popup 14 // this is needed for parse sent notifications because firebase doesn't trigger popup 15 // notifications with data by itself 16 if ( 17 notification data !== undefined && 18 notification data data !== undefined 19 ) { 20 try { 21 // notification data comes as a stringified json, so parsing is needed 22 const notificationdata = json parse(notification data data); 23 // json parse notifications from the dashboard and cloud code 24 // should contain the default `title` and `message` parameters 25 let title = 'notification title'; 26 if (notificationdata title !== undefined) { 27 title = notificationdata title; 28 } 29 let message = 'noticiation message'; 30 if (notificationdata message !== undefined) { 31 message = notificationdata message; 32 } 33 // text parse notifications from the dashboard only have an `alert` parameter 34 if (notificationdata alert !== undefined) { 35 message = notificationdata alert; 36 } 37 pushnotification localnotification({ 38 channelid channelid, 39 title title, 40 message message, 41 }); 42 } catch (error) { 43 console log(`error triggering local notification ${error}`); 44 } 45 } 46 }, 47	 48 onregister async function (token) { 49 console log(`registered with device token ${token token}`); 50 let devicetoken = token token; 51	 52 // create the notification channel, required for android notifications 53 await pushnotification createchannel({ 54 channelid channelid, 55 channelname 'guide channel', 56 }); 57 console log('notification channel created!'); 58	 59 // create a parse installation, that will link our application's push notification 60 // to the parse server 61 try { 62 const installationid = await parse getinstallationid(); 63 const installation = new parse installation(); 64 // make sure to change any needed value from the following 65 installation set('devicetype', 'android'); 66 installation set('gcmsenderid', 'your gcm sender id'); 67 installation set('pushtype', 'gcm'); 68 installation set('appidentifier', 'your app identifier(package name)'); 69 installation set('parseversion', '3 2 0'); 70 installation set('appname', 'back4appguidepushnotifications'); 71 installation set('appversion', '1 0'); 72 installation set('localeidentifier', 'pt br'); 73 installation set('badge', 0); // set initial notification badge number 74 installation set('timezone', 'america/sao paulo'); 75 installation set('installationid', installationid); 76 installation set('channels', \[channelid]); 77 installation set('devicetoken', devicetoken); 78 await installation save(); 79 console log(`created new parse installation ${installation}`); 80 } catch (error) { 81 console log(error message); 82 } 83 }, 84 popinitialnotification true, 85 requestpermissions true, 86 }); 87 }1 import pushnotification from 'react native push notification'; 2 import parse from 'parse/react native'; 3	 4 const channelid string = 'guidechannel'; 5	 6 export async function configurepushnotifications() { 7 // initialize pushnotification 8 await pushnotification configure({ 9 // (required) called when a remote is received or opened, or local notification is opened 10 onnotification function (notification object) { 11 // process the notification 12 console log('notification ', notification); 13 // if notification is remote and has data, trigger local notification to show popup 14 // this is needed for parse sent notifications because firebase doesn't trigger popup 15 // notifications with data by itself 16 if ( 17 notification data !== undefined && 18 notification data data !== undefined 19 ) { 20 try { 21 // notification data comes as a stringified json, so parsing is needed 22 const notificationdata = json parse(notification data data); 23 // json parse notifications from the dashboard and cloud code 24 // should contain the default `title` and `message` parameters 25 let title string = 'notification title'; 26 if (notificationdata title !== undefined) { 27 title = notificationdata title; 28 } 29 let message string = 'noticiation message'; 30 if (notificationdata message !== undefined) { 31 message = notificationdata message; 32 } 33 // text parse notifications from the dashboard only have an `alert` parameter 34 if (notificationdata alert !== undefined) { 35 message = notificationdata alert; 36 } 37 pushnotification localnotification({ 38 channelid channelid, 39 title title, 40 message message, 41 }); 42 } catch (error any) { 43 console log(`error triggering local notification ${error}`); 44 } 45 } 46 }, 47	 48 onregister async function (token {os string; token string}) { 49 console log(`registered with device token ${token token}`); 50 let devicetoken string = token token; 51	 52 // create the notification channel, required for android notifications 53 await pushnotification createchannel({ 54 channelid channelid, 55 channelname 'guide channel', 56 }); 57 console log('notification channel created!'); 58	 59 // create a parse installation, that will link our application's push notification 60 // to the parse server 61 try { 62 const installationid = await parse getinstallationid(); 63 const installation = new parse installation(); 64 // make sure to change any needed value from the following 65 installation set('devicetype', 'android'); 66 installation set('gcmsenderid', 'your gcm sender id'); 67 installation set('pushtype', 'gcm'); 68 installation set('appidentifier', 'your app identifier(package name)'); 69 installation set('parseversion', '3 2 0'); 70 installation set('appname', 'back4appguidepushnotifications'); 71 installation set('appversion', '1 0'); 72 installation set('localeidentifier', 'pt br'); 73 installation set('badge', 0); // set initial notification badge number 74 installation set('timezone', 'america/sao paulo'); 75 installation set('installationid', installationid); 76 installation set('channels', \[channelid]); 77 installation set('devicetoken', devicetoken); 78 await installation save(); 79 console log(`created new parse installation ${installation}`); 80 } catch (error) { 81 console log(error message); 82 } 83 }, 84 popinitialnotification true, 85 requestpermissions true, 86 }); 87 } documentação de código aberto mais informações sobre a \parse installation\ classe podem ser encontradas aqui https //docs parseplatform org/js/guide/#push notifications observe que o manipulador de eventos \onnotification\ tem um código que aciona uma notificação local no aplicativo após receber uma remota o parse requer esse código porque o firebase não aciona notificações pop up com dados por si só mais sobre isso e os tipos de notificações do android podem ser lidos aqui https //firebase google com/docs/cloud messaging/concept options#notifications and data messages chame este \configurepushnotifications\ método no seu \app js\ (ou \app tsx\ ) arquivo após inicializar o parse e antes de declarar seu \app\ conteúdo app js 1 // other imports 2 // 3 import {configurepushnotifications} from ' /src/pushnotificationmethods'; 4	 5 // your parse initialization configuration goes here 6 // 7	 8 // initialize pushnotifications 9 configurepushnotifications(); construa e execute a aplicação agora você pode ver uma \instalação\ tabela no painel do back4app do seu aplicativo com uma entrada correspondente ao seu aplicativo 5 enviando notificações push via painel estamos agora prontos para enviar a primeira notificação push para nosso aplicativo siga os passos abaixo para enviar uma mensagem push via painel do back4app vá para site do back4app https //www back4app com/ , faça login, encontre seu aplicativo e clique em \painel\ clique em \push\ > \enviar nova push\ e crie um público para sua notificação push 3\ escreva sua mensagem e veja a prévia clicando na opção \android\ 4\ se você já revisou a notificação push e deseja enviá la, clique em \enviar push\ você pode explorar as outras opções para notificação push em \parse dashboard\ lá, também é possível olhar para \notificações passadas\ que você enviou e as \audiências\ que você criou para elas 6 enviando notificações push via cloud code usando guia de início rápido de funções em nuvem https //www back4app com/docs/get started/cloud functions , você pode desacoplar métodos reutilizáveis do seu front end e obter controle total de todos os seus recursos de backend via a chave mestre vamos usar funções de código em nuvem para enviar uma mensagem push primeiro, crie uma função em nuvem chamada \sendpush\ que chama o método \parse push send\ existem duas maneiras de selecionar quais usuários receberão a notificação consultando a classe \parse installation\ ou via nomes de canais de notificação é mais comum em aplicativos android usar canais para distinguir entre os usuários, então vamos usá lo certifique se de implantar esta função no back4app antes de prosseguir documentação de código aberto por favor, verifique a documentação de código aberto https //docs parseplatform org/js/guide/#sending options para mais detalhes sobre o método \send\ 1 parse cloud define('sendpush', async (request) => { 2 try { 3 await parse push send({ 4 channels \[ 'guidechannel' ], 5 data { 6 message 'test message', 7 title 'back4app guide notification' 8 } 9 }, { usemasterkey true }); 10 return true; 11 } catch (error) { 12 return `error ${error}` 13 } 14 }); agora vamos chamar a função do aplicativo react native adicione esta função ao \pushnotificationmethods js\ (ou \pushnotificationmethods tsx\ ) arquivo e chame a em um botão dentro da tela principal do seu aplicativo 1 export async function sendnotification() { 2 try { 3 await parse cloud run('sendpush'); 4 console log('success!'); 5 } catch (error any) { 6 console log(`error ${error}`); 7 } 8 } observe que este caso de permitir que um usuário acione uma notificação push por conta própria não é comum, usamos isso aqui apenas para mostrar como é simples integrar o envio de notificações push com o parse conclusão no final deste guia, você aprendeu como enviar notificações push usando parse para seu aplicativo react native no android no próximo guia, você aprenderá como enviá las no ios