Adicionar notificações push a um app iOS

1. Introdução

Última atualização:06/01/2020

O Firebase Cloud Messaging (FCM) é uma solução de mensagens entre plataformas que permite o envio confiável de mensagens sem custo.

Usando o FCM, você pode notificar um app cliente de que novos e-mails ou outros dados estão disponíveis para sincronização. Você pode enviar mensagens de notificação para promover o reengajamento e a retenção de usuários. Para casos de uso como mensagens instantâneas, uma mensagem pode transferir um payload de até 4 KB para um app cliente.

Como funciona?

Uma implementação do FCM inclui dois componentes principais para envio e recebimento:

  1. Um ambiente confiável, como o Cloud Functions para Firebase ou um servidor de apps, no qual criar, segmentar e enviar mensagens.
  2. Um app cliente iOS, Android ou Web (JavaScript) que recebe mensagens pelo serviço de transporte específico da plataforma.

Visão geral da arquitetura do FCM

6636933bbe959ef2.png

O FCM depende do seguinte conjunto de componentes que criam, transportam e recebem mensagens:

  1. Ferramentas para escrever ou criar solicitações de mensagens. O Editor do Notificações fornece uma opção baseada em GUI para criar solicitações de notificação. Para automação e suporte completos para todos os tipos de mensagens, crie solicitações de mensagens em um ambiente de servidor confiável que ofereça suporte ao SDK Admin do Firebase ou aos protocolos do servidor FCM. Esse ambiente pode ser o Cloud Functions para Firebase, o Google App Engine ou seu próprio servidor de apps.
  2. O back-end do FCM, que (entre outras funções) aceita solicitações de mensagens, realiza a distribuição de mensagens por tópicos e gera metadados de mensagens, como o ID da mensagem.
  3. Uma camada de transporte no nível da plataforma, que encaminha a mensagem para o dispositivo de destino, processa a entrega da mensagem e aplica a configuração específica da plataforma quando apropriado. Essa camada de transporte inclui:
  • Camada de transporte do Android (ATL, na sigla em inglês) para dispositivos Android com o Google Play Services
  • Serviço de Notificação push da Apple (APNs, na sigla em inglês) para dispositivos iOS
  • Protocolo de push da Web para apps da Web
  1. O SDK do FCM no dispositivo do usuário, onde a notificação é exibida ou a mensagem é processada de acordo com o estado de primeiro/segundo plano do app e qualquer lógica de aplicativo relevante.

O que você vai criar

Neste codelab, você vai adicionar uma notificação push a um app iOS de exemplo com o FCM.

O que você vai aprender

  • Como inscrever e cancelar a inscrição de um usuário em mensagens push
  • Como lidar com mensagens push recebidas
  • Como exibir uma notificação
  • Como responder a cliques de notificação

O que é necessário

  • Xcode 11.0 ou mais recente
  • CocoaPods 1.9.0 ou posterior
  • Conta de desenvolvedor da Apple
  • Um dispositivo físico com iOS para executar o app.
  • Conhecimento básico de Swift

2. Etapas da configuração

Fazer o download do exemplo de código

Neste codelab, você criará seu próprio app de teste, mas se quiser ver e executar o app de exemplo já existente, faça o download do exemplo de código do guia de início rápido.

Há duas maneiras de conseguir a amostra:

  • Clone o repositório Git:
$ git clone https://github.com/firebase/quickstart-ios.git
  • Faça o download do arquivo ZIP:

Se você fizer o download da origem como um arquivo ZIP, a descompactação terá uma pasta raiz quickstart-ios.

Criar um novo app

Crie seu próprio aplicativo de teste seguindo as etapas abaixo (as etapas abaixo estão no XCode 12.3):

  1. Abra o XCode e selecione Criar um novo projeto Xcode.
  2. Selecione App e clique em Próxima.

e56c631b086c6d8.png

  1. Insira o Nome do produto (por exemplo, MessagingExample)
  2. Selecione Equipe. Se você não tiver criado uma equipe, configure-a na conta de desenvolvedor da Apple.
  3. Insira o identificador da organização (por exemplo, com.your-name)
  4. de entrada do Bundle Identifier (por exemplo, com.your-name.MessagingExample, ele precisa ser único entre todos os apps iOS).
  5. Selecione Storyboard no menu suspenso Interface.
  6. Selecione UIKit App Delegate no menu suspenso Life Cycle.
  7. Selecione Swift em Idioma.
  8. Clique em Próxima.

fb860c0fa4a02818.png

Você precisará do identificador do pacote ao criar uma chave APN e registrar seu app no seu projeto do Firebase.

3. Como configurar APNs

Criar a chave de autenticação

Esta seção descreve como gerar uma chave de autenticação para um ID de aplicativo habilitado para notificações push. Se você já tem uma chave, use-a em vez de gerar uma nova.

Para criar uma chave de autenticação:

  1. Na sua conta de desenvolvedor, acesse Certificados, Identificadores e Perfis e acesse Chaves.

19ae87d0f00402b1.png

  1. Clique no botão Adicionar (+) no canto superior direito.

c4acd10dbc4f721f.png

  1. Digite uma descrição para a chave de autenticação de APNs
  2. Em "Serviços de chave", marque a caixa de seleção "APNs" e clique em Continuar.

6a3e8ff7457a8251.png

  1. Clique em Registrar e depois em Fazer download. Salve a chave em um local seguro. Este é um download único, e a chave não pode ser recuperada mais tarde.

42c205e072fbd622.png

Criar um ID de app

O ID do app é um identificador exclusivo. Por convenção, ele é representado por um domínio invertido.

  1. Acesse o Apple Developer Member Center e faça login.
  2. Navegue até Certificates, Identifiers and Profiles.
  3. Navegue até Identificadores.
  4. Clique no botão + para criar um novo ID do app. e04fc394c52a866f.png
  5. Selecione o botão de opção IDs do app e clique em Continuar.

d454fd5df3b8d93d.png

  1. Selecione App e clique em Continuar.

3bd2e836be5e0291.png

  1. Para criar o novo ID do app:
  2. Insira um Nome para o ID do app.
  3. Insira um ID de equipe. Esse valor precisa corresponder ao Team ID da guia Membership.
  4. Na seção App ID Sufixo, selecione Explícito App ID e insira o ID do pacote. 7363c4d1962b486d.png
  5. Na seção App Services, verifique se a opção Push Notifications está marcada. 552ea08703f7e323.png
  6. Clique em Continuar e verifique se a entrada está correta:
  7. O valor de Identifier precisa corresponder à concatenação dos valores de "Team ID" e de "Bundle ID".
  8. A opção Push Notifications (Notificações push) precisa estar definida como Configurável.
  9. Clique em Register para criar o ID do app.

Criar o perfil

Para testar seu app durante o desenvolvimento, você precisa de um perfil de desenvolvimento para autorizar seus dispositivos a executar um app que ainda não foi publicado na App Store.

  1. Acesse o Apple Developer Member Center e faça login.
  2. Navegue até Certificates, Identifiers and Profiles.
  3. No menu suspenso no canto superior esquerdo, selecione iOS, tvOS, watchOS, caso essa opção ainda não esteja selecionada, e navegue até Perfis.
  4. Clique no botão + para criar um novo perfil. 1fa2342cfe45a925.png
  5. Selecione Desenvolvimento de app para iOS como tipo de perfil de provisionamento e clique em Continuar.

507434a466220dfe.png

  1. No menu suspenso, selecione o ID do app que você quer usar e clique em Continue.
  2. Selecione o certificado de desenvolvimento do iOS referente ao ID do app escolhido na etapa anterior e clique em Continue.
  3. Selecione os dispositivos iOS que você deseja incluir no perfil de provisionamento e clique em Continue. Selecione todos os dispositivos que você quer usar nos testes.
  4. Insira um nome para o perfil de provisionamento (por exemplo, MessagingExampleProfile) e clique em Generate.

4395f04647afa997.png

  1. Clique em Download para salvar o perfil de provisionamento no seu Mac.

106761fa786ba580.png

  1. Clique duas vezes no arquivo do perfil de provisionamento para instalá-lo.

4. Como adicionar o Firebase ao seu projeto do iOS

Criar um projeto do Firebase

Antes de adicionar o Firebase ao seu app iOS, você precisa criar um projeto do Firebase para conectá-lo ao seu app iOS. Consulte Noções básicas sobre projetos do Firebase para mais informações.

  1. No Console do Firebase, clique em Adicionar projeto e selecione ou insira o Nome do projeto. e462afd91c149238.png

Se você tiver um projeto do Google Cloud Platform (GCP), poderá selecioná-lo no menu suspenso para adicionar recursos do Firebase a ele.

  1. (Opcional) Se você estiver criando um novo projeto, poderá editar o ID do projeto.

O Firebase atribui automaticamente um ID exclusivo ao seu projeto. Acesse "Noções básicas sobre projetos do Firebase" para saber como o Firebase usa o ID do projeto.

  1. Clique em Continuar.
  2. Configure o Google Analytics para seu projeto e tenha a melhor experiência possível ao usar qualquer um dos seguintes produtos do Firebase:
  • Firebase Crashlytics
  • Firebase Previsões
  • Firebase Cloud Messaging
  • Mensagens no app do Firebase
  • Configuração remota do Firebase
  • Teste A/B do Firebase

Quando solicitado, escolha entre usar uma conta do Google Analytics ou criar uma nova. Se você optar por criar uma nova conta, selecione o local dos relatórios do Analytics e aceite as configurações de compartilhamento de dados e os termos do Google Analytics referentes ao seu projeto.

1282a798556779ab.png

48ade68c8de27d2.png

  1. Clique em Criar projeto (ou Adicionar Firebase, se você estiver usando um projeto do GCP).

O Firebase provisiona recursos automaticamente para seu projeto. Quando o processo for concluído, você será direcionado para a página de visão geral do seu projeto no Console do Firebase.

Registrar o app com o Firebase

Depois de criar um projeto do Firebase, é possível adicionar seu app iOS a ele.

Consulte Noções básicas sobre projetos do Firebase para ver práticas recomendadas e informações sobre como adicionar apps a um projeto, incluindo como lidar com diversas variantes de build.

  1. Acesse o Console do Firebase.
  2. No centro da página de visão geral do projeto, clique no ícone do iOS para iniciar o fluxo de trabalho de configuração.

Se você já adicionou um app ao seu projeto do Firebase, clique em "Adicionar app" para exibir as opções da plataforma.

93462beb642e8987.png

  1. Insira o ID do pacote do seu app no campo ID do pacote do iOS.
  2. (Opcional) Insira outras informações do aplicativo: apelido do aplicativo e ID da App Store.
  3. Clique em Registrar app.

2e7a00b0008344c1.png

Adicionar um arquivo de configuração do Firebase

  1. Clique em Fazer o download do GoogleService-Info.plist para receber o arquivo de configuração do Firebase para iOS (GoogleService-Info.plist). 69004caf7d448989.png
  2. Mova seu arquivo de configuração para a raiz do seu projeto Xcode. Se solicitado, selecione a opção para adicionar o arquivo de configuração a todos os destinos.

7c5e0a46d07fa9c7.png

Se você tiver vários IDs de pacote no seu projeto, associe cada ID de pacote a um app registrado no Console do Firebase para que cada app tenha o próprio arquivo GoogleService-Info.plist.

Feche o XCode.

Adicionar SDKs do Firebase ao seu app

Recomendamos o uso do CocoaPods para instalar as bibliotecas do Firebase. No entanto, se você prefere não usar o CocoaPods, é possível integrar os frameworks do SDK diretamente ou usar a versão Beta do Gerenciador de pacotes do Swift.

  1. Crie um Podfile se ainda não tiver um. Se você estiver usando o exemplo do guia de início rápido, o projeto do Xcode e o Podfile (com pods) já estarão presentes.
$ cd MessagingExample
$ pod init
  1. No seu Podfile, adicione os pods do Firebase que você quer usar no seu app.

É possível adicionar qualquer um dos produtos do Firebase compatíveis ao seu app iOS.

Na amostra do guia de início rápido, foram adicionados os SDKs do Google Analytics e do Firebase Cloud Messaging.

# Add the Firebase pod for Google Analytics
pod 'Firebase/Analytics'

# Add the pod for Firebase Cloud Messaging
pod 'Firebase/Messaging'
  1. Instale os pods e abra o arquivo .xcworkspace para ver o projeto no Xcode:
$ pod install
  1. Abra MessagingExample.xcworkspace e clique em Próxima no Console do Firebase. 6d1f8230d16693e6.png

Inicializar o Firebase no app

Você precisará adicionar o código de inicialização do Firebase ao seu aplicativo.

Importe o módulo do Firebase e configure uma instância compartilhada. Na amostra do guia de início rápido, o módulo do Firebase já foi importado.

  1. Importe o módulo do Firebase no seu UIApplicationDelegate:

AppDelegate.swift

import UIKit
import Firebase // Add this line
  1. Configure uma instância compartilhada do FirebaseApp, normalmente no método application:didFinishLaunchingWithOptions: do app:

AppDelegate.swift

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  FirebaseApp.configure() // Add this line
  return true
}
  1. Clique em Próxima no Console do Firebase. f9d37423d346ff0.png
  2. Os SDKs do Firebase são adicionados ao seu app. Clique em Continuar no console. d1b1309cd3790f66.png

5. Como configurar o cliente do FCM

Faça upload da chave de autenticação de APNs

Faça upload da chave de autenticação de APNs para o Firebase.

  1. No seu projeto do Console do Firebase, selecione o ícone de engrenagem, Configurações do projeto e a guia Cloud Messaging. ba8b5f95241327fe.png
  2. Acesse a Configuração do app iOS. Em Chave de autenticação de APNs, clique no botão Fazer upload. 357ddc0d4b182492.png
  3. Navegue até o local onde você salvou a chave, selecione-a e clique em Abrir. Adicione o ID da chave, disponível na seção Certificates, Identifiers &Profiles do Apple Developer Member Center, e clique em Upload. 3dae27f2327daf9e.png

Inscrever-se para receber notificações remotas

Na inicialização ou no ponto desejado do fluxo do seu app, registre-o para receber notificações remotas.

registerForRemoteNotifications já foi adicionado na amostra do guia de início rápido.

AppDelegate.swift

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  FirebaseApp.configure()
  // [START register for remote notifications]
  if #available(iOS 10.0, *) {
    // For iOS 10 display notification (sent via APNS)
    UNUserNotificationCenter.current().delegate = self
        
    let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
    UNUserNotificationCenter.current().requestAuthorization(options: authOptions, completionHandler: {_, _ in })
  } else {
    let settings: UIUserNotificationSettings = UIUserNotificationSettings(types: [.alert, .badge, .sound], categories: nil)
    application.registerUserNotificationSettings(settings)
  }

  application.registerForRemoteNotifications()
  // [END register for remote notifications]
  return true
}

Atribua a propriedade delegada de UNUserNotificationCenter adicionando estas linhas ao final de AppDelegate.swift.

AppDelegate.swift

@available(iOS 10, *)
extension AppDelegate : UNUserNotificationCenterDelegate {

  // Receive displayed notifications for iOS 10 devices.
  func userNotificationCenter(_ center: UNUserNotificationCenter,
                              willPresent notification: UNNotification,
    withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
    let userInfo = notification.request.content.userInfo

    // Print full message.
    print(userInfo)

    // Change this to your preferred presentation option
    completionHandler([[.alert, .sound]])
  }

  func userNotificationCenter(_ center: UNUserNotificationCenter,
                              didReceive response: UNNotificationResponse,
                              withCompletionHandler completionHandler: @escaping () -> Void) {
    let userInfo = response.notification.request.content.userInfo

    // Print full message.
    print(userInfo)

    completionHandler()
  }
}

Definir a delegação de mensagens

Para receber tokens de registro, implemente o protocolo de delegação de mensagens e defina a propriedade delegate do FIRMessaging depois de chamar [FIRApp configure]. Por exemplo, se o delegado do aplicativo estiver em conformidade com o protocolo de delegação de mensagens, você poderá defini-lo no application:didFinishLaunchingWithOptions: como ele mesmo. Na amostra do guia de início rápido, ele já está definido.

AppDelegate.swift

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  FirebaseApp.configure()
  Messaging.messaging().delegate = self // Add this line
  // [START register for remote notifications]
  if #available(iOS 10.0, *) {
    // For iOS 10 display notification (sent via APNS)
    UNUserNotificationCenter.current().delegate = self
        
    let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
    UNUserNotificationCenter.current().requestAuthorization(options: authOptions, completionHandler: {_, _ in })
  } else {
    let settings: UIUserNotificationSettings = UIUserNotificationSettings(types: [.alert, .badge, .sound], categories: nil)
    application.registerUserNotificationSettings(settings)
  }

  application.registerForRemoteNotifications()
  // [END register for remote notifications]
  return true
}

Atribua a propriedade delegada de FIRMessaging adicionando estas linhas ao final de AppDelegate.swift.

AppDelegate.swift

extension AppDelegate : MessagingDelegate {
  func messaging(_ messaging: Messaging, didReceiveRegistrationToken fcmToken: String?) {
    print("Firebase registration token: \(String(describing: fcmToken))")
    
    let dataDict:[String: String] = ["token": fcmToken ?? ""]
    NotificationCenter.default.post(name: Notification.Name("FCMToken"), object: nil, userInfo: dataDict)
  }
}

Adicionar recursos

Você adicionou o recurso de notificações push na seção "Criar um ID de aplicativo", mas também precisa adicioná-lo no XCode seguindo estas etapas (as etapas abaixo estão no XCode 12.3):

  1. Clique no nome do projeto na Navigator Area.
  2. Clique em Assinar e Recursos.
  3. Clique em + Capacidade.

eaf41aefb3bf2c9e.png

  1. Clique duas vezes em Background Modes.
  2. Clique em + Capacidade novamente.
  3. Clique duas vezes em Push Notifications.
  4. Marque Notificações remotas nas seções Modos de segundo plano.

e5d0fc08651e04a9.png

6. Enviar uma notificação

É possível enviar uma mensagem de teste seguindo estas etapas:

  1. Instale e execute o app no dispositivo de destino. Você precisa aceitar a solicitação de permissão para receber notificações remotas.
  2. Obtenha o token de registro no registro do XCode.

a2e49a92f9807d34.png

  1. Verifique se o app está em segundo plano no dispositivo.
  2. Abra o Editor do Notificações e selecione Nova notificação.
  3. Digite o texto da mensagem. f485d7fbd2456ae0.png
  4. Selecione Enviar mensagem de teste.
  5. No campo Adicionar um token de registro do FCM, insira o token de registro obtido na etapa 2.
  6. Clique em Testar.

Depois de clicar em Testar, o dispositivo cliente de destino (com o app em segundo plano) receberá a notificação na central de notificações.

Para insights sobre a entrega de mensagens ao seu app, consulte o painel de relatórios do FCM, que registra o número de mensagens enviadas e abertas em dispositivos iOS e Android.

6570eea7b5228513.png

7. Parabéns

Você enviou uma mensagem de teste.

Há muitas outras funções e configurações no FCM, como assinatura de tópicos.

Consulte o documento oficial do desenvolvedor caso tenha interesse neles.

Qual é a próxima etapa?

Confira alguns destes codelabs.

Leia mais