Agrega notificaciones push a una app para iOS

1. Introducción

Última actualización: 6/1/2020

Firebase Cloud Messaging (FCM) es una solución de mensajería multiplataforma que te permite enviar mensajes de forma segura y gratuita.

Con FCM, puedes notificar a una app cliente que un correo electrónico nuevo u otros datos están disponibles para sincronizarse. Puedes enviar mensajes de notificación para volver a atraer a los usuarios y aumentar su retención. Para casos de uso como mensajería instantánea, un mensaje puede transferir una carga útil de hasta 4 Kb a una app cliente.

¿Cómo funciona?

Una implementación de FCM incluye dos componentes principales para enviar y recibir:

1. Un entorno de confianza como Cloud Functions para Firebase o un servidor de apps para compilar, orientar y enviar mensajes
2. Una app cliente de iOS, Android o la Web (JavaScript) que reciba mensajes mediante el servicio de transporte específico de la plataforma que corresponda.

Descripción general de la arquitectura de FCM

FCM se basa en el siguiente conjunto de componentes que compilan, transportan y reciben mensajes:

1. Herramientas para redactar o compilar solicitudes de mensajes. El Compositor de Notifications proporciona una opción basada en GUI para crear solicitudes de notificación. Para lograr una automatización completa y compatibilidad con todos los tipos de mensajes, debes crear solicitudes de mensajes en un entorno de servidor confiable que admita el SDK de Firebase Admin o los protocolos de servidor de FCM. Este entorno podría ser Cloud Functions para Firebase, Google App Engine o tu propio servidor de apps.
2. El backend de FCM, que (entre otras funciones) acepta solicitudes de mensajes, realiza distribuciones de mensajes a través de temas y genera metadatos de mensajes, como el ID del mensaje.
3. Una capa de transporte a nivel de la plataforma, que enruta el mensaje al dispositivo de destino, controla la entrega de mensajes y aplica la configuración específica de la plataforma cuando corresponde. Esta capa de transporte incluye lo siguiente:

• Capa de transporte de Android (ATL) para dispositivos Android con Servicios de Google Play
• Servicio de notificaciones push de Apple (APN) para dispositivos iOS
• Protocolo web push para apps web

Nota: Las capas de transporte a nivel de la plataforma están fuera del servicio de FCM. Los mensajes de FCM que se enrutan a una capa de transporte a nivel de la plataforma pueden estar sujetos a términos específicos de esa plataforma en lugar de a las condiciones del servicio de FCM. El enrutamiento de mensajes de Android a través de ATL se rige por las Condiciones del Servicio de las APIs de Google.

4. El SDK de FCM en el dispositivo del usuario, donde se muestra la notificación o el mensaje se maneja según el estado de la app en primer plano y en segundo plano, y cualquier lógica de aplicación relevante.

Qué compilarás

En este codelab, agregarás notificaciones push a una app para iOS de muestra con FCM.

Qué aprenderás

• Cómo suscribir o anular la suscripción de un usuario a mensajes push
• Cómo manejar los mensajes push entrantes
• Cómo mostrar una notificación
• Cómo responder a clics de notificaciones

Requisitos

• Xcode 11.0 o una versión más reciente
• CocoaPods 1.9.0 o una versión más reciente
• Cuenta de desarrollador de Apple
• Un dispositivo iOS físico para ejecutar tu app
• Conocimientos básicos de Swift

2. Cómo prepararte

Descarga el código de muestra

En este codelab, compilarás tu propia app de prueba, pero si deseas ver y ejecutar la app de ejemplo existente, puedes descargar el código de muestra de la guía de inicio rápido.

Hay dos maneras de obtener la muestra:

• Clona el repositorio de Git:

$ git clone https://github.com/firebase/quickstart-ios.git

• Descarga el archivo ZIP:

Si descargas la fuente como un archivo ZIP, cuando lo descomprimes, obtienes una carpeta raíz quickstart-ios.

Descargar código fuente

Cómo crear una app nueva

Sigue estos pasos para crear tu propia app de prueba (que se encuentran a continuación en Xcode 12.3):

1. Abre Xcode y selecciona Create a new Xcode project.
2. Selecciona App y haz clic en Next.

3. Ingresa el nombre del producto (p. ej., MessagingExample)
4. Selecciona Equipo (si no creaste el equipo, configúralo en la cuenta de desarrollador de Apple).
5. Ingresa el Identificador de la organización (p. ej., com.your-name)
6. Ingresa el identificador de paquete (p. ej., com.your-name.MessagingExample, debe ser única entre todas las apps para iOS).
7. Selecciona Storyboard en el menú desplegable Interface.
8. Selecciona Delegado de apps de UIKit en el menú desplegable Ciclo de vida.
9. Selecciona Swift en Language.
10. Haz clic en Siguiente.

Necesitarás el identificador de paquete cuando crees una clave de APN y registres tu app en el proyecto de Firebase.

3. Configura APNS

Crea la clave de autenticación

Esta sección describe cómo generar una clave de autenticación para un ID de app habilitado para notificaciones push. Si ya tienes una clave, puedes usarla en lugar de generar una nueva.

Para crear una clave de autenticación, sigue estos pasos:

1. En tu cuenta de desarrollador, ve a Certificados, identificadores y Perfiles y navega a Claves.

2. Haz clic en el botón Agregar (+) en la esquina superior derecha.

3. Ingresa una descripción para la clave de autenticación de APNS
4. En Servicios de claves, selecciona la casilla de verificación APNS y haz clic en Continuar.

5. Haz clic en Register y, luego, en Download. Guarda la clave en un lugar seguro. Esta es una descarga única y la clave no se puede recuperar más adelante.

Crea un ID de app

Un ID de app es un identificador que identifica de manera inequívoca a una app. Por convención, se representa con un dominio invertido.

1. Navega al Centro de miembros desarrolladores de Apple y accede con tu cuenta.
2. Navega a Certificados, identificadores y perfiles.
3. Navega a Identificadores.
4. Haz clic en el botón + para crear un nuevo ID de app.
5. Elige el botón de selección ID de app y haz clic en Continuar.

6. Selecciona Aplicación y haz clic en Continuar.

7. Para crear el ID de app nuevo, haz lo siguiente:
8. Ingresa un Nombre para el ID de la app.
9. Ingresa un ID de equipo. Este valor debe coincidir con el de ID de equipo en la pestaña Membresía.
10. En la sección Sufijo de ID de la app, selecciona ID de app explícito y luego ingresa tu ID del paquete.
11. En la sección App Services, asegúrate de que la opción Push Notifications esté marcada.
12. Haz clic en Continuar y verifica que tu entrada sea correcta:
13. El valor del Identificador debe coincidir con la concatenación de los valores del ID de equipo y del ID del paquete.
14. Las Notificaciones push deben ser Configurables.
15. Haz clic en Registrarse para crear el ID de app.

Crea el perfil

Si quieres probar tu app durante el desarrollo, necesitas un perfil de desarrollo para autorizar que tus dispositivos ejecuten una app que aún no está publicada en App Store.

1. Navega al Centro de miembros desarrolladores de Apple y accede con tu cuenta.
2. Navega a Certificados, identificadores y perfiles.
3. En el menú desplegable que aparece en la esquina superior izquierda, selecciona iOS, tvOS y watchOS si no están seleccionadas. Luego, navega a Perfiles.
4. Haz clic en el botón + para crear un perfil nuevo.
5. Selecciona Desarrollo de apps para iOS como tipo de perfil de aprovisionamiento y, luego, haz clic en Continuar.

6. En el menú desplegable, selecciona el ID de app que deseas usar y, luego, haz clic en Continuar.
7. Selecciona el certificado de desarrollo para iOS del ID de app que seleccionaste en el paso anterior y haz clic en Continuar.
8. Selecciona los dispositivos iOS que deseas incluir en el perfil de aprovisionamiento y haz clic en Continuar. Asegúrate de seleccionar todos los dispositivos que quieres usar para las pruebas.
9. Ingresa un nombre para este perfil de aprovisionamiento (p.ej., MessagingExampleProfile) y, luego, haz clic en Generate.

10. Haz clic en Descargar para guardar el perfil de aprovisionamiento en tu Mac.

11. Haz doble clic en el archivo de perfil de aprovisionamiento para instalarlo.

4. Agrega Firebase a tu proyecto de iOS

Crea un proyecto de Firebase

A fin de poder agregar Firebase a tu app para iOS, debes crear un proyecto de Firebase y conectarlo a la app. Consulta la Información sobre los proyectos de Firebase para obtener más detalles sobre el tema.

1. En Firebase console, haz clic en Agregar proyecto y, luego, selecciona o ingresa el Nombre del proyecto.

Si ya tienes un proyecto de Google Cloud Platform (GCP), puedes seleccionarlo del menú desplegable para agregarle recursos de Firebase.

2. Si estás creando un proyecto nuevo, puedes editar el ID del proyecto (opcional).

Firebase asigna automáticamente un ID único a tu proyecto de Firebase. Consulta la sección Comprende los proyectos de Firebase para descubrir cómo usa Firebase el ID del proyecto.

Nota: Una vez que Firebase aprovisione los recursos para tu proyecto, no podrás cambiar su ID. Para usar un identificador específico, debes editar el ID del proyecto durante este paso de la configuración.

3. Haz clic en Continuar.
4. Configura Google Analytics para tu proyecto, lo que te permitirá tener una experiencia óptima con cualquiera de los siguientes productos de Firebase:

• Firebase Crashlytics
• Firebase Predictions
• Firebase Cloud Messaging
• Firebase In‑App Messaging
• Firebase Remote Config
• Firebase A/B Testing

Cuando se te solicite, selecciona si quieres usar una cuenta de Google Analytics existente o crear una nueva. Si decides crear una cuenta nueva, selecciona la ubicación de los informes de Analytics y, luego, acepta la configuración de uso compartido de datos y las condiciones de Google Analytics para tu proyecto.

5. Haz clic en Crear proyecto (o Agregar Firebase si usas un proyecto de GCP existente).

Firebase aprovisiona recursos automáticamente para tu proyecto. Cuando finalice, verás la página de descripción general del proyecto en Firebase console.

Registra tu app en Firebase

Cuando tengas un proyecto de Firebase, podrás agregarle tu app para iOS.

Consulta la Información sobre los proyectos de Firebase para obtener detalles sobre las prácticas recomendadas y las consideraciones para agregar apps a un proyecto de Firebase, incluido cómo manejar diversas variantes de compilación.

1. Ve a Firebase console.
2. En el centro de la página de descripción general del proyecto, haz clic en el ícono de iOS para iniciar el flujo de trabajo de configuración.

Si ya agregaste una app a tu proyecto de Firebase, haz clic en Agregar app para que se muestren las opciones de plataforma.

3. Ingresa el ID del paquete de la app en el campo ID del paquete de iOS.
4. Ingresa otra información, como el sobrenombre de la app y el ID de App Store (opcional).
5. Haz clic en Registrar app.

Agrega un archivo de configuración de Firebase

1. Haz clic en Descargar GoogleService-Info.plist a fin de obtener el archivo de configuración de Firebase para iOS (GoogleService-Info.plist).
2. Traslada el archivo de configuración al directorio raíz de tu proyecto de Xcode. Si se te solicita, selecciona la opción para agregar el archivo de configuración a todos los destinos.

Si tienes varios IDs de paquete en tu proyecto, debes asociar cada uno de ellos a una app registrada en Firebase console para que cada app tenga su propio archivo GoogleService-Info.plist.

Cierra Xcode.

Agrega los SDK de Firebase a tu app

Te recomendamos usar CocoaPods para instalar las bibliotecas de Firebase. Si prefieres no usarlo, puedes integrar los frameworks del SDK directamente o usar la versión beta de Swift Package Manager.

1. Crea un Podfile si aún no tienes uno. Si usas la muestra de inicio rápido, el proyecto de Xcode y el Podfile (con pods) ya están presentes.

$ cd MessagingExample
$ pod init

2. En tu Podfile, agrega los Pods de Firebase que deseas usar en tu app.

Puedes agregar cualquiera de los productos de Firebase admitidos a tu app para iOS.

En la guía de inicio rápido de muestra, se agregaron los SDK de Google Analytics y Firebase Cloud Messaging.

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

# Add the pod for Firebase Cloud Messaging
pod 'Firebase/Messaging'

3. Instala los Pods y abre el archivo .xcworkspace para ver el proyecto en Xcode:

$ pod install

4. Abre MessagingExample.xcworkspace y haz clic en Siguiente en Firebase console.

Inicializa Firebase en tu app

Deberás agregar el código de inicialización de Firebase a tu aplicación.

Importa el módulo de Firebase y configura una instancia compartida (en la muestra de inicio rápido, el módulo de Firebase ya está importado).

1. Importa el módulo de Firebase en UIApplicationDelegate:

AppDelegate.swift

import UIKit
import Firebase // Add this line

2. Configura una instancia compartida de FirebaseApp, generalmente en el método application:didFinishLaunchingWithOptions: de tu app:

AppDelegate.swift

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  FirebaseApp.configure() // Add this line
  return true
}

3. Haz clic en Siguiente en Firebase console.
4. Los SDK de Firebase se agregan a tu app. Haz clic en Ir a la consola.

5. Configura el cliente de FCM

Sube tu clave de autenticación de APNS

Sube la clave de autenticación de APNS a Firebase.

1. Dentro del proyecto en Firebase console, selecciona el ícono de ajustes, elige Configuración del proyecto y, luego, la pestaña Cloud Messaging.
2. En Clave de autenticación de APNS, en iOS app configuration, haz clic en el botón Subir.
3. Navega hasta la ubicación en la que guardaste la clave, selecciónala y haz clic en Abrir. Agrega el ID de clave correspondiente (disponible en la sección Certificates, Identifiers &Profiles del Centro de miembros desarrolladores de Apple) y haz clic en Subir.

Regístrate para recibir notificaciones remotas

Durante el inicio o en el punto que desees del flujo de tu aplicación, registra tu app para recibir notificaciones remotas.

En la guía de inicio rápido de muestra, registerForRemoteNotifications ya se agregó.

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
}

Asigna la propiedad de delegado de UNUserNotificationCenter agregando estas líneas al 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()
  }
}

Cómo configurar el delegado de mensajería

Para recibir tokens de registro, implementa el protocolo de delegado de mensajería y configura la propiedad delegate de FIRMessaging después de llamar a [FIRApp configure]. Por ejemplo, si el delegado de tu aplicación sigue el protocolo de delegado de mensajería, puedes configurarlo en application:didFinishLaunchingWithOptions: para sí mismo (en la muestra de inicio rápido, ya está configurado).

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
}

Asigna la propiedad de delegado de FIRMessaging agregando estas líneas al 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)
  }
}

Cómo agregar funciones

Agregaste la función de notificaciones push en la sección Crear un ID de app, pero también debes hacerlo en Xcode siguiendo estos pasos (los pasos que se indican a continuación están en Xcode 12.3):

1. Haz clic en el nombre del proyecto en el área de navegación.
2. Haz clic en Firma y Funciones
3. Haz clic en + Capacidad.

4. Haz doble clic en Modos en segundo plano.
5. Vuelva a hacer clic en + Capacidad.
6. Haz doble clic en Notificaciones push.
7. Marca Notificaciones remotas en las secciones Modos en segundo plano.

6. Enviar un mensaje de notificación

Para enviar un mensaje de prueba, sigue estos pasos:

1. Instala y ejecuta la app en el dispositivo de destino. Deberás aceptar la solicitud de permiso para recibir notificaciones remotas.
2. Obtén el token de registro en el registro de Xcode.

3. Asegúrate de que la app se encuentre en segundo plano en el dispositivo.
4. Abre el Compositor de Notifications y selecciona Notificación nueva.
5. Ingresa el texto del mensaje.
6. Selecciona Enviar mensaje de prueba.
7. En el campo Agregar un token de registro de FCM, ingresa el token de registro que obtuviste en el paso 2.
8. Haga clic en Probar.

Después de hacer clic en Probar, los dispositivos cliente de destino que tienen la app en segundo plano recibirán la notificación en el centro de notificaciones.

Para obtener estadísticas de la entrega de mensajes a tu app, consulta el panel de informes de FCM, que registra la cantidad de mensajes enviados y abiertos en dispositivos iOS y Android.

7. Felicitaciones

Felicitaciones, enviaste un mensaje de prueba correctamente.

Hay muchas más funciones y configuraciones en FCM, como la suscripción a temas.

Si te interesan, consulta el documento oficial para desarrolladores.

¿Qué sigue?

Consulta algunos de estos codelabs.

• Android avanzado en Kotlin 01.2:Firebase Cloud Messaging para Android

Lecturas adicionales

• Documento oficial de Firebase Cloud Messaging