Push Notification no IOS e Android, com React Native
Olá pessoal, eu tive muito trabalho e dificuldade para inserir notificações em meu projeto, e decidi ajudar a todos vocês, para que não percam o tempo que eu perdi fazendo isso…
O OneSignal é a ferramenta mais utilizada no momento para enviar notificações, usada até por grandes empresas como o UBER e WIX (entre outros), e o melhor de tudo: É Grátis!
Faça uma conta no OneSignal. (Se você está fazendo um aplicativo, não preciso ensinar a criar uma conta… rss…)
Crie um novo App no OneSignal, clicando em "New App";
Clique em Fechar (canto superior direito) e em Leave Setup;
Se você ainda não está com o React-Native instalado, abra o CMD (Ou terminal, no Mac) e digite a seguinte linha de comando:
react-native init — version=”0.53.3" PushNotifications
Eu escolhi a versão 0.53.3, pois é a que eu achei mais estável, e é a que eu uso atualmente.
Ainda no Terminal, instale a biblioteca "React-Native-OneSignal"com o seguinte comando:
yarn add react-native-onesignal
(ou npm i react-native-onesignal — save)
Em seguida temos que linkar a biblioteca:
react-native link react-native-onesignal
Feito isso, vamo ao código!
Android
Para finalizarmos a instalação das Pushs no sistema Android, abra o arquivo "android/app/src/main/AndroidManifest.xml", e alteraremos o seguinte:
(…)
<uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION”/>
(…)
<activity
andoid:launchMode=”singleTop”
(…)
ficando assim, então:
Agora editaremos o arquivo: "android/app/src/main/java/com/pushnotifications/MainApplication.java"
→ Logo após o primeiro import, coloque o seguinte:
buildscript {
repositories {
maven { url 'https://plugins.gradle.org/m2/' } // Gradle Plugin Portal
}
dependencies {
classpath 'gradle.plugin.com.onesignal:onesignal-gradle-plugin:[0.10.0, 0.99.99]'
}
}
apply plugin: 'com.onesignal.androidsdk.onesignal-gradle-plugin'ficando assim:
Agora veja se o seu Min SDK Version está (no mínimo) em 26, em:
"android/build.gradle"
Tudo pronto, agora é só configurar o OneSignal, então vamos lá!
Primeiramente vamos criar o nosso login no Firebase! (Não vou te ensinar a fazer isso, mas o link é esse aqui: Firebase). Feito isso, vamos criar um novo app em nosso Console, e dar um nome a ele (conforme a figura):
Em "Project Overview" > configurações do projeto (à sua esquerda), clique em "Cloud Messaging" para visualizar suas credenciais, conforme a figura.
No DashBoard do OneSignal, clique em Settings > Google Android, e irá abrir a seguinte tela:
Vá até o Firebase, copie e cole as credenciais nos locais adequados (Chave do servidor = Firebase Server Key; Código do remetente = Firebase Sender ID). Salve e feche. Agora já pode testar sua notificação no Android!
IOS
O iOS é um pouco mais chato. Mas já que estamos aqui, vamos lá!! Lembre-se de que você precisa ser um usuário "Developer", ou seja, pagar a anuidade da Apple em: https://developer.apple.com/
(Detalhe: Para fazer o processo automático, você precisa que sua conta não tenha a verificação em duas etapas habilitado. Caso esteja habilitado e você não quer desabilitar / não consegue desabilitar — por ser um id muito novo, sugiro que entre na conta principal em: https://developer.apple.com e clique em "People", convidando o seu usuário secundário para ser um administrador da conta de desenvolvedor. Em seguida, vá em https://appstoreconnect.apple.com também em sua conta primária de desenvolvedor, e convide sua conta secundária - a que não tem a verificação em duas etapas, em: "Usuários e Acesso").
Tudo pronto?
Abra o XCode modifique o seu Bundle Identifier para um valor único, e selecione o seu Team para assinar o aplicativo:
Em Capabilities (lá em cima), adicione a permission para Background Modes e em seguida Remote Notifications:
Agora habilite o Push Notifications:
Então entre na URL: https://onesignal.com/provisionator, clique em "Get Started" e coloque seu usuário e senha para continuar, conforme a figura a seguir:
Perfeito. Agora volte no Dashboard do OneSignal, e em seu app clique em Settings, lá em cima. Selecione "Apple IOS" e faça upload do seu certificado P12 (o primeiro, que tem a senha) e coloque a senha.
Clique em "Keys & Ids" e copie o "ONESIGNAL APP ID", conforme a figura:
Abra o seu editor, e o arquivo root de seu projeto (No meu caso, App.js).
Importe o component do OneSignal, e inicie a instância dele no componentDidMount(), conforme a figura a seguir, com o código do "OneSignal APP ID" copiado anteriormente:
Lembre-se que não é possível testar no simulador do Macbook, ele deve necessariamente ser testado em um device físico.
Testando
Agora chegou a parte legal: Vamos testar nossas notificações!
Volte no OneSignal, e clique em: Messages / New Push:
O único campo que você precisa preencher é o TITLE e o MESSAGE, e depois clicar em CONFIRM. Lembre-se de testar em um device físico, e não no emulador.
Se você fez tudo certo, deve ter recebido a Push logo em seguida, não costuma demorar nem 5 segundos.
Parabéns! E obrigado por ler!
