Implementando notificações de push no iOS

Resolvi escrever esse texto devido as dificuldades que encontrei na implementação das notificações por push para iOS. Aqui no Elliot nós já tínhamos essa implementação para android utilizando a library react-native-push-notification e o serviço de Firebase Cloud Messaging (FCM). Isso nos fez pensar que a implementação para iOS seria semelhante, só precisaríamos seguir o recomendado pelos desenvolvedores da própria library e tudo funcionaria perfeitamente.

Mas não foi bem assim que as coisas aconteceram :(

CONCEITOS

Primeiro, uma breve descrição dos conceitos envolvidos.

• O que é notificação de push?

“São mensagens de alertas enviadas aos dispositivos móveis e que notificam os usuários assim de sua chegada diretamente na tela principal do smartphone.”

Qual usar? Notificações de Push ou SMS? - Gestão

• O que é a library react-native-push-notification?

É uma library de react-native que facilita a implementação de notificações de push para dispositivos iOS e android.

zo0r/react-native-push-notification

• O que é FCM?

“É uma solução de mensagens entre plataformas que permite o envio confiável de notificações sem custo.”

Firebase Cloud Messaging | Firebase

FLUXO DAS NOTIFICAÇÕES POR PUSH

O diagrama abaixo explica o funcionamento do fluxo de notificações de push (já estamos considerando que o aplicativo está registrado para receber as notificações de push). Esse era o objetivo final da implementação.

1. O aplicativo solicita um token para o iOS do dispositivo.
2. O iOS solicita um token único para o servidor APNS.
3. O aplicativo recebe o token enviado pelo servidor APNS.
4. O aplicativo envia o token para a api do Elliot.
5. Quando é necessário enviar um notificação, a api do Elliot envia a notificação de push para o FCM, junto com o token que deve identificar o dispositivo que vai receber a notificação.
6. O Firebase envia a notificação de push para o servidor APNS
7. O servidor APNS envia a notificação por push para o aplicativo.

CONTEXTO

A library react-native-push-notification faz a integração entre o aplicativo react-native e os serviços do FCM. Então boa parte das etapas descritas no fluxo acima seriam realizadas através dessa library. Mas ainda assim tivemos vários desafios ao longo dessa implementação que durou aproximadamente um mês.

Primeiro, eu sou uma iniciante na programação de aplicativos e, apesar de encontrar vários tutoriais na internet, achei bem complicado entender os conceitos envolvidos. Segundo, eu nunca tinha encostado em um Mac ou iPhone na vida antes de março de 2019, então esse ambiente era totalmente novo para mim.

LINHA DO TEMPO

Nas primeiras duas semanas eu fiquei tentando entender como funcionava o ambiente do Xcode e apanhei um pouco para rodar o aplicativo no iPhone. Não vou explicar o que é necessário para fazer essa configuração nesse artigo, mas você pode utilizar essa documentação para criar o código do aplicativo e o perfil de provisionamento:

Configuring APNs with FCM | Firebase

No início da terceira semana, eu achei que estava me aproximando da implementação em si, até me dar conta de que eu precisaria de mais um certificado, o APNs. Foram alguns dias até conseguirmos gerar o certificado correto seguindos os passos das seções abaixo em:

Implementing Push Notifications on iOS with Firebase

• Generating a CSR file (Gerando um arquivo CSR)
• Uploading Your CSR File (Fazendo upload do seu arquivo CSR)
• Preparing the APNs Certificate (Preparando o certificado APNs)
• Configuring Firebase for Push Notifications (Configurando Firebase para as Notificações de push)

No início da quarta semana, eu pensei que as coisas fluiriam melhor. Fiz as configurações necessárias seguindo os passos do próprio Firebase:

Set up a Firebase Cloud Messaging client app on iOS | Firebase

Porém, para minha surpresa, passei a receber a seguinte mensagem de erro ao testar o envio das notificações pela api do Elliot e pelo pushtry (site que permite enviar notificações de push de teste):

{"multicast_id":xxxx,"success":0,"failure":1,"canonical_ids:0,"results":[{"error":"InvalidRegistration"}]}

Continuei pesquisando até perceber que eu estava passando o token errado para o Firebase. O token que eu estava passando para o Firebase era o device token, semelhante ao abaixo no iOS:

58eee168359d8c0db63dc8d917c46130aac5ecbc1ab930d3af315d5659a6ebfd

Mas, o token que o Firebase estava esperando era o FCM Token, semelhante ao abaixo:

ew3IWPmgOJM:APA91bHuqcSbkHGkaZF0FtiNoz4EDrx2NWlp417sVA0wVaJ4b4XWwCQrkyZh_mC8OZWUXykMjb_pE61yJU3nWi3nQ081nZOHjugN-HfSEF9drMo96XIASxmijE_zaAMydb4ZLb8yQQ7M

SOLUÇÃO

Essa foi a parte crucial, onde eu decidi escrever esse artigo. Eu demorei muito para encontrar como deveria ser criado o FCM Token, inclusive a documentação do próprio Firebase não deixa muito claro essa diferença entre o device e o FCM token que é necessário para as push notifications. Pelo que eu pude entender, o device token é apenas o token do dispositivo em si, enquanto que o FCM Token é o token registrado que vai fazer a comunicação com o Firebase, enviado pelo servidor APNs no caso do iOS.

Seguem os passos adicionais a instalação padrão da library react-native-push-notification que eu tive que fazer para chegar ao FCM token:

• instalar o react-native-firebase
• linkar o react-native-firebase
• deixar o PodFile da seguinte forma:

• alterar o AppDelegate.m:

• alterar o arquivo que envia o token para a api do Elliot, para reconhecer o FCM token:

Depois de ter realizado essas alterações na implementação padrão sugerida pelo Firebase, eu consegui recuperar o FCM token e o envio das notificações de push passou a funcionar.

Espero que esse tutorial possa auxiliar as pessoas que estiverem implementando as notifications de push para iOS via FCM.

OBSERVAÇÃO

Essa implementação durou aproximadamente um mês. Como a equipe do Elliot trabalha de forma 100% remota, a comunicação entre as pessoas foi muito importante para alcançar o objetivo final. Por mais que eu tenha conversados com pessoas diferentes para resolver problemas específicos com a utilização da library react-native-push-notification, a comunicação entre o Xcode e o iPhone, a criação do projeto no Firebase ou os problemas com a instalação da library react-native-firebase no projeto no aplicativo, a colaboração de todos foi muito importante para que as notificações de push funcionassem também no iOS. Em vários momentos eu me senti perdida, mas chamei outras pessoas para me auxiliar, que me deram os insights certos. Fica aqui o meu agradecimento a todos!!!

Acompanhe o Elliot nas redes sociais (@eusouelliot) ou através do nosso site eusouelliot.com

Facebook
Instagram
Twitter
LinkedIn