Ajouter des notifications push à une application iOS

1. Introduction

Dernière mise à jour : 06/01/2020

Firebase Cloud Messaging (FCM) est une solution de messagerie multiplate-forme qui vous permet d'envoyer des messages de manière fiable et sans frais.

Avec FCM, vous pouvez informer une application cliente que de nouveaux e-mails ou d'autres données sont disponibles pour la synchronisation. Vous pouvez envoyer des notifications pour favoriser le réengagement et la fidélisation des utilisateurs. Pour les cas d'utilisation tels que la messagerie instantanée, un message peut transférer une charge utile de 4 Ko maximum à une application cliente.

Comment ça marche ?

Une implémentation FCM comprend deux composants principaux pour l'envoi et la réception :

  1. Un environnement de confiance tel que Cloud Functions pour Firebase ou un serveur d'application sur lequel créer, cibler et envoyer des messages.
  2. Application cliente iOS, Android ou Web (JavaScript) qui reçoit des messages via le service de transport spécifique à la plate-forme correspondante.

Présentation de l'architecture FCM

dc54f5190ee8926a.png

FCM repose sur l'ensemble de composants suivants qui créent, transportent et reçoivent les messages :

  1. Outils permettant de composer ou de créer des messages de requête. Le compositeur de notifications fournit une option basée sur l'interface utilisateur graphique pour créer des requêtes de notification. Pour une automatisation complète et la prise en charge de tous les types de messages, vous devez créer des requêtes de messages dans un environnement de serveur de confiance compatible avec le SDK Admin Firebase ou les protocoles de serveur FCM. Cet environnement peut être Cloud Functions for Firebase, Google App Engine ou votre propre serveur d'application.
  2. Le backend FCM, qui (entre autres fonctions) accepte les demandes de messages, effectue la diffusion des messages via des thèmes et génère des métadonnées de message telles que l'ID du message.
  3. Il s'agit d'une couche de transport au niveau de la plate-forme, qui achemine le message vers l'appareil cible, gère la distribution des messages et applique la configuration spécifique à la plate-forme, le cas échéant. Cette couche de transport inclut :
  • Couche de transport Android (ATL) pour les appareils Android avec les services Google Play
  • Apple Push Notification Service (APNs) pour les appareils iOS
  • Protocole Web push pour les applications Web
  1. Le SDK FCM sur l'appareil de l'utilisateur, où la notification s'affiche ou le message est traité en fonction de l'état de l'application (premier plan/arrière-plan) et de toute logique d'application pertinente.

Objectifs de l'atelier

Dans cet atelier de programmation, vous allez ajouter des notifications push à un exemple d'application iOS avec FCM.

Points abordés

  • S'abonner ou se désabonner aux messages push
  • Gérer les messages push entrants
  • Afficher une notification
  • Répondre aux clics sur les notifications

Prérequis

  • Xcode 11.0 ou version ultérieure
  • CocoaPods 1.9.0 ou version ultérieure
  • Compte de développeur Apple
  • Un appareil iOS physique pour exécuter votre application
  • Connaissances de base en Swift

2. Configuration

Télécharger l'exemple de code

Dans cet atelier de programmation, vous allez créer votre propre application de test. Toutefois, si vous souhaitez voir et exécuter l'exemple d'application existant, vous pouvez télécharger l'exemple de code de démarrage rapide.

Vous pouvez obtenir l'échantillon de deux manières :

  • Clonez le dépôt Git :
$ git clone https://github.com/firebase/quickstart-ios.git
  • Téléchargez le fichier ZIP :

Si vous téléchargez la source en tant que fichier ZIP, la décompression vous donne un dossier racine quickstart-ios.

Créer une application

Créez votre propre application de test en procédant comme suit (les étapes ci-dessous sont dans Xcode 12.3) :

  1. Ouvrez Xcode et sélectionnez Create a new Xcode project (Créer un projet Xcode).
  2. Sélectionnez Application, puis cliquez sur Suivant.

d6a3fc16ba7d4f72.png

  1. Saisissez le nom du produit (par exemple, MessagingExample)
  2. Sélectionnez Équipe (si vous n'avez pas créé d'équipe, configurez-la dans votre compte Apple Developer).
  3. Saisissez l'identifiant de l'organisation (par exemple, com.your-name)
  4. Saisissez l'identifiant du bundle (par exemple, com.your-name.MessagingExample, il doit être unique parmi toutes les applications iOS).
  5. Sélectionnez Storyboard dans le menu déroulant Interface.
  6. Sélectionnez UIKit App Delegate dans le menu déroulant Life Cycle (Cycle de vie).
  7. Sélectionnez Swift dans Langage.
  8. Cliquez sur Suivant.

a07d72459f65dcc1.png

Vous aurez besoin de l'identifiant du bundle lorsque vous créerez une clé APN et enregistrerez votre application dans votre projet Firebase.

3. Configurer APNs

Créer la clé d'authentification

Cette section explique comment générer une clé d'authentification pour un ID d'application activé pour les notifications push. Si vous disposez déjà d'une clé, vous pouvez l'utiliser au lieu d'en générer une autre.

Pour créer une clé d'authentification :

  1. Dans votre compte de développeur, accédez à Certificates, Identifiers & Profiles (Certificats, identifiants et profils), puis à Keys (Clés).

708ac6e36366b11f.png

  1. Cliquez sur le bouton Ajouter (+) en haut à droite.

e71849c7e6e4e714.png

  1. Saisissez une description pour la clé d'authentification APNs.
  2. Sous "Services de clés", cochez la case APNs, puis cliquez sur Continuer.

65c9930dc2d8bf1c.png

  1. Cliquez sur S'inscrire, puis sur Télécharger. Enregistrez votre clé dans un endroit sûr. Il s'agit d'un téléchargement unique. La clé ne pourra pas être récupérée ultérieurement.

bda45effb420b7c2.png

Créer un ID d'application

Un ID d'application est un identifiant qui identifie une application de manière unique. Par convention, il est représenté par un domaine inversé.

  1. Accédez à l'Apple Developer Member Center et connectez-vous.
  2. Accédez à Certificates, Identifiers and Profiles (Certificats, identifiants et profils).
  3. Accédez à Identifiants.
  4. Cliquez sur le bouton + pour créer un ID d'application. 2a325a323b652124.png
  5. Sélectionnez le bouton radio ID d'application, puis cliquez sur Continuer.

fb24e3374de047a3.png

  1. Sélectionnez Application, puis cliquez sur Continuer.

cca5eb32736f947.png

  1. Pour créer le nouvel ID d'application :
  2. Saisissez un nom pour l'ID de votre application.
  3. Saisissez un ID d'équipe. Cette valeur doit correspondre à l'ID de l'équipe dans l'onglet "Abonnement".
  4. Dans la section Suffixe de l'ID de l'application, sélectionnez ID de l'application explicite, puis saisissez votre ID du bundle. 7363c4d1962b486d.png
  5. Dans la section Services d'application, assurez-vous que l'option Notifications push est cochée. 8e158017bc31fd46.png
  6. Cliquez sur Continuer et vérifiez que les informations saisies sont correctes :
  7. La valeur de Identifier doit correspondre à la concaténation des valeurs de l'ID d'équipe et de l'ID du bundle.
  8. Les notifications push doivent être configurables.
  9. Cliquez sur Register (Enregistrer) pour créer l'ID d'application.

Créer le profil

Pour tester votre application en cours de développement, vous avez besoin d'un profil de développement pour autoriser vos appareils à exécuter une application qui n'est pas encore publiée sur l'App Store.

  1. Accédez à l'Apple Developer Member Center et connectez-vous.
  2. Accédez à Certificates, Identifiers and Profiles (Certificats, identifiants et profils).
  3. Dans le menu déroulant en haut à gauche, sélectionnez iOS, tvOS, watchOS si ce n'est pas déjà fait, puis accédez à Profiles (Profils).
  4. Cliquez sur le bouton + pour créer un profil. 100604ffceac6a1d.png
  5. Sélectionnez iOS App Development (Développement d'applications iOS) comme type de profil de provisionnement, puis cliquez sur Continue (Continuer).

7d4d20883a4c4142.png

  1. Dans le menu déroulant, sélectionnez l'ID d'application que vous souhaitez utiliser, puis cliquez sur Continuer.
  2. Sélectionnez le certificat de développement iOS de l'ID d'application que vous avez choisi à l'étape précédente, puis cliquez sur Continuer.
  3. Sélectionnez les appareils iOS que vous souhaitez inclure dans le profil de provisionnement, puis cliquez sur Continuer. Veillez à sélectionner tous les appareils que vous souhaitez utiliser pour vos tests.
  4. Saisissez un nom pour ce profil de provisionnement (par exemple, MessagingExampleProfile), puis cliquez sur Generate (Générer).

7346087f5a0179f2.png

  1. Cliquez sur Télécharger pour enregistrer le profil de provisionnement sur votre Mac.

548c8c27f3ce5bca.png

  1. Double-cliquez sur le fichier du profil d'approvisionnement pour l'installer.

4. Ajouter Firebase à votre projet iOS

Créer un projet Firebase

Avant de pouvoir ajouter Firebase à votre application iOS, vous devez créer un projet Firebase à associer à votre application iOS. Pour en savoir plus sur les projets Firebase, consultez Comprendre les projets Firebase.

  1. Dans la console Firebase, cliquez sur Ajouter un projet, puis sélectionnez ou saisissez un nom de projet. caf43df5174a530e.png

Si vous disposez d'un projet Google Cloud Platform (GCP) existant, vous pouvez le sélectionner dans le menu déroulant pour ajouter des ressources Firebase à ce projet.

  1. (Facultatif) Si vous créez un projet, vous pouvez modifier son ID.

Firebase attribue automatiquement un ID unique à votre projet Firebase. Consultez "Comprendre les projets Firebase" pour découvrir comment Firebase utilise l'ID de projet.

  1. Cliquez sur Continuer.
  2. Configurez Google Analytics pour votre projet. Vous pourrez ainsi profiter d'une expérience optimale avec les produits Firebase suivants :
  • Firebase Crashlytics
  • Firebase Predictions
  • Firebase Cloud Messaging
  • Messagerie dans l'application Firebase
  • Firebase Remote Config
  • Firebase A/B Testing

Lorsque vous y êtes invité, sélectionnez un compte Google Analytics existant ou créez-en un. Si vous choisissez de créer un compte, sélectionnez l'emplacement de vos rapports Analytics, puis acceptez les paramètres de partage des données et les conditions d'utilisation de Google Analytics pour votre projet.

ffbcd801d08078b2.png

473c89d0a404f066.png

  1. Cliquez sur Créer un projet (ou sur Ajouter Firebase si vous utilisez un projet GCP existant).

Firebase provisionne automatiquement des ressources pour votre projet Firebase. Une fois le processus terminé, vous êtes redirigé vers la page de présentation de votre projet Firebase dans la console Firebase.

Enregistrer votre application auprès de Firebase

Une fois que vous avez créé un projet Firebase, vous pouvez y ajouter votre application iOS.

Consultez Comprendre les projets Firebase pour en savoir plus sur les bonnes pratiques et les points à prendre en compte lorsque vous ajoutez des applications à un projet Firebase, y compris sur la gestion de plusieurs variantes de compilation.

  1. Accédez à la console Firebase.
  2. Au centre de la page de présentation du projet, cliquez sur l'icône iOS pour lancer le workflow de configuration.

Si vous avez déjà ajouté une application à votre projet Firebase, cliquez sur "Ajouter une application" pour afficher les options de plate-forme.

549e710c09b601ea.png

  1. Saisissez l'ID du bundle de votre application dans le champ ID du bundle iOS.
  2. (Facultatif) Saisissez d'autres informations sur l'application : Nom abrégé de l'application et ID de l'App Store.
  3. Cliquez sur Enregistrer l'application.

7a2bd11d13365c.png

Ajouter un fichier de configuration Firebase

  1. Cliquez sur Télécharger GoogleService-Info.plist pour obtenir votre fichier de configuration Firebase iOS (GoogleService-Info.plist). 625594126a8943bf.png
  2. Déplacez votre fichier de configuration à la racine de votre projet Xcode. Si vous y êtes invité, sélectionnez l'option permettant d'ajouter le fichier de configuration à toutes les cibles.

aa100af06c7a74e5.png

Si votre projet comporte plusieurs ID de bundle, vous devez associer chacun d'eux à une application enregistrée dans la console Firebase afin que chaque application puisse disposer de son propre fichier GoogleService-Info.plist.

Fermez Xcode.

Ajouter les SDK Firebase à votre application

Nous vous recommandons d'utiliser CocoaPods pour installer les bibliothèques Firebase. Toutefois, si vous préférez ne pas utiliser CocoaPods, vous pouvez intégrer directement les frameworks du SDK ou utiliser la version bêta de Swift Package Manager.

  1. Créez un fichier Podfile si vous n'en possédez pas encore. Si vous utilisez l'exemple de démarrage rapide, le projet Xcode et le fichier Podfile (avec les pods) sont déjà présents.
$ cd MessagingExample
$ pod init
  1. Ajoutez à votre Podfile les pods Firebase que vous souhaitez utiliser dans votre application.

Vous pouvez ajouter n'importe quel produit Firebase compatible à votre application iOS.

Dans l'exemple de démarrage rapide, les SDK Google Analytics et Firebase Cloud Messaging ont été ajoutés.

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

# Add the pod for Firebase Cloud Messaging
pod 'Firebase/Messaging'
  1. Installez les pods, puis ouvrez votre fichier .xcworkspace pour afficher le projet dans Xcode :
$ pod install
  1. Ouvrez MessagingExample.xcworkspace, puis cliquez sur Suivant dans la console Firebase. 1c5adae5b6e81655.png

Initialiser Firebase dans votre application

Vous devrez ajouter le code d'initialisation Firebase à votre application.

Importez le module Firebase et configurez une instance partagée (dans l'exemple de démarrage rapide, le module Firebase est déjà importé).

  1. Importez le module Firebase dans UIApplicationDelegate :

AppDelegate.swift

import UIKit
import Firebase // Add this line
  1. Configurez une instance partagée FirebaseApp, généralement dans la méthode application:didFinishLaunchingWithOptions: de votre application :

AppDelegate.swift

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  FirebaseApp.configure() // Add this line
  return true
}
  1. Cliquez sur Suivant dans la console Firebase. df93274c5922fd55.png
  2. Les SDK Firebase sont ajoutés à votre application. Cliquez sur Accéder à la console. 21b24098a470aa40.png

5. Configurer le client FCM

Importer votre clé d'authentification APNs

Importez votre clé d'authentification APNs dans Firebase.

  1. Dans votre projet de la console Firebase, sélectionnez l'icône en forme de roue dentée, puis Paramètres du projet, puis l'onglet Cloud Messaging.

e1fcc1f1ace520e9.png

  1. Dans Clé d'authentification APNs sous Configuration de l'application Apple, cliquez sur le bouton Importer pour importer votre clé d'authentification de développement, votre clé d'authentification de production ou les deux. Veuillez inclure au moins l'un des trois.

87ee87266eab43c4.png

  1. Accédez à l'emplacement où vous avez enregistré votre clé, sélectionnez-la, puis cliquez sur Ouvrir. Ajoutez l'ID de clé (disponible dans Certificats, identifiants et profils du Apple Developer Member Center), puis cliquez sur Importer. 1491c513285d06e0.png

S'inscrire aux notifications à distance

Au démarrage ou au point souhaité du flux de votre application, enregistrez votre application pour les notifications à distance.

Dans l'exemple de démarrage rapide, registerForRemoteNotifications est déjà ajouté.

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
}

Attribuez la propriété déléguée de UNUserNotificationCenter en ajoutant ces lignes à la fin 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()
  }
}

Définir le délégué pour les messages

Pour recevoir des jetons d'enregistrement, implémentez le protocole de délégué de messagerie et définissez la propriété delegate de FIRMessaging après avoir appelé [FIRApp configure]. Par exemple, si le délégué de votre application est conforme au protocole de délégué de messagerie, vous pouvez définir le délégué sur application:didFinishLaunchingWithOptions: sur lui-même (il est déjà défini dans l'exemple de démarrage rapide).

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
}

Attribuez la propriété déléguée de FIRMessaging en ajoutant ces lignes à la fin 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)
  }
}

Ajouter des fonctionnalités

Vous avez ajouté la fonctionnalité de notifications push dans la section "Créer un ID d'application", mais vous devez également l'ajouter sur Xcode en suivant les étapes ci-dessous (qui concernent Xcode 12.3) :

  1. Cliquez sur le nom du projet dans la zone du navigateur.
  2. Cliquez sur Signature et fonctionnalités.
  3. Cliquez sur + Fonctionnalité.

7207dce45aaa0fa.png

  1. Double-cliquez sur Modes d'arrière-plan.
  2. Cliquez à nouveau sur + Capacité.
  3. Double-cliquez sur Notifications push.
  4. Cochez Notifications à distance dans la section Modes d'arrière-plan.

11a0a4f8a409fe44.png

6. Envoyer un message de notification

Pour envoyer un message de test, procédez comme suit :

  1. Installez et exécutez l'application sur l'appareil cible. Vous devrez accepter la demande d'autorisation pour recevoir des notifications à distance.
  2. Obtenez le jeton d'enregistrement dans le journal Xcode.

b9383e848d00ab04.png

  1. Assurez-vous que l'application est en arrière-plan sur l'appareil.
  2. Ouvrez le composant Notifications et sélectionnez Nouvelle notification.
  3. Saisissez le texte du message. 8f57ae055ce64321.png
  4. Sélectionnez Envoyer un message test.
  5. Dans le champ Ajouter un jeton d'enregistrement FCM, saisissez le jeton d'enregistrement que vous avez obtenu à l'étape 2.
  6. Cliquez sur Tester.

Après avoir cliqué sur Test, l'appareil client ciblé (avec l'application en arrière-plan) devrait recevoir la notification dans le centre de notifications.

Pour obtenir des informations sur la distribution des messages à votre application, consultez le tableau de bord des rapports FCM, qui enregistre le nombre de messages envoyés et ouverts sur les appareils iOS et Android.

b790de9a3e0dc1ef.png

7. Félicitations

Félicitations, vous avez envoyé un message de test.

FCM propose de nombreuses autres fonctions et configurations, comme l'abonnement à des thèmes.

Consultez la documentation officielle pour les développeurs si vous souhaitez en savoir plus.

Et ensuite ?

Découvrez quelques-uns de ces ateliers de programmation.

Complément d'informations