Comment faire fonctionner les notifications push avec Ionic 4 et Firebase

Un didacticiel complet qui vous guidera pas à pas pour iOS et Android

La configuration des notifications push peut être vraiment frustrante et prendre beaucoup de temps. J'ai donc passé en revue toutes les configurations et préparé ce tutoriel pour vous.

Prérequis

Ionic 4 devrait déjà être installé.

Navigation de section

  1. Installation du package
  2. Configuration de Firebase pour Android et iOS
  3. Implémentation du code de notification push
  4. Tester les notifications push sur Android
  5. Pré-configuration de notification push iOS
  6. Tester les notifications push sur iOS

1. Installation du package

Ouvrez votre projet Ionic dans l'éditeur de codage de votre choix et ouvrez également votre terminal. Accédez au dossier de votre projet.

Tout d'abord, nous allons installer tous les packages requis.

Ce qu'il faut installer:

  • Cordova plugin pour firebase: ionic cordova plugin add cordova-plugin-firebase
  • Package natif de Firebase: Ionic 4 étant en version bêta, vérifiez vos packages natifs Ionic dans package.json et installez la même version que les autres packages natifs Ionic. Enfin, tapez: npm install --save @ ionic-native / firebase @ 5.0.0-beta.14
J'ai la version beta.14
  • Un dernier paquet, AngularFire 2. Ceci est une bibliothèque pour Angular et Firebase: npm install --save angularfire2 firebase

Les paquets installent, c'est fait! Passons à la deuxième section.

2. Configuration de Firebase pour iOS et Android

Avant de commencer toute la configuration, je dois vous avertir que vous ne pouvez pas tester vos notifications push sur un émulateur iOS. Pour le tester, vous devez disposer d'un compte Apple Developer, qui coûte environ 99 USD par an. Je vous suggère quand même de passer par la configuration iOS pour vous aider à mieux comprendre vos futurs projets.

Remarque: les étapes commençant ici sont très importantes, alors soyez patient. Lisez lentement et assurez-vous que tout va bien. Rechercher des problèmes après toute la configuration peut être très frustrant, croyez-moi - je parle de ma propre expérience.

iOS

Accédez à la page Firebase et connectez-vous à une console. Si vous n'avez pas encore créé de projet, faites-le maintenant. Vous devriez voir cet écran.

Cliquez sur le bouton iOS et vous verrez ceci:

Nous devons maintenant fournir notre identifiant de paquet iOS, qui doit être identique à celui de votre projet Ionic. Disons que je veux avoir le nom de paquetage com.filipjerga.angularcourse, puis je dois effectuer les opérations suivantes:

Ouvrez vos projets ioniques et accédez au fichier «config.xml». Voyons l’élément widget. L'attribut Id contient l'identifiant unique de votre application. J'ai déjà dit que si vous aviez spécifié le nom de votre paquet dans com.filipjerga.angularcourse dans Firebase, l'identifiant de votre projet Ionic devait être identique! Vous pouvez également laisser l'identifiant tel que vous l'avez déjà dans votre projet Ionic, mais vous devez ensuite le modifier dans Firebase.

L'élément widget est ce que nous devons spécifier dans Firebase.

Une fois que vous avez obtenu la valeur de id, n’oubliez pas de la fournir à votre application Firebase en tant qu’ID de bundle.

L'ID de l'ensemble doit être identique à celui de votre widget.

Cela devrait être tout dans la première étape de l'enregistrement de l'application. Cette étape est cruciale. Vérifiez donc la valeur de id sur le widget et l'ID d'ensemble de votre application Firebase.

Laissez les autres champs vides et cliquez sur «Enregistrer l'application».

Nous devons maintenant télécharger «GoogleService-Info.plist».

Une fois téléchargé, collez-le dans un dossier de base de vos projets. Vous pouvez voir une structure de dossier dans mon projet ici.

Nous pouvons ignorer toutes les étapes ultérieures, car elles ne sont pas requises pour la configuration du projet Ionic. Vous devriez avoir votre application IOS prête.

Passer cette étape

Android

Les étapes suivantes pour Android sont presque les mêmes que pour la configuration iOS:

  • Cliquez sur "ajouter une application" pour Android, comme dans iOS auparavant.
  • Le nom du package Android doit être identique à celui de notre ID de widget, dans mon cas: com.filipjerga.angularcourse
  • Ensuite, téléchargez google-services.json. Comme auparavant avec le fichier iOS, nous devons le copier dans le dossier de base de nos applications.
  • Cliquez sur «Suivant» jusqu'à la dernière étape, que vous pouvez ignorer, et vous devriez vous retrouver avec les deux applications créées.

Yay! Félicitations! Mais il est encore trop tôt pour se réjouir.

Applications iOS et Angular créées.

3. Implémentation du code de notification push

Importation de paquet

Le moment est enfin venu de nous réchauffer les doigts en tapant du code. Nous allons commencer par importer les packages que nous avons installés auparavant.

  1. Allez sur app.module.ts
  2. Votre fichier devrait ressembler à ceci:

Vous pouvez voir Firebase dans le tableau providers, ainsi que AngularFirestoreModule et AngularFireModule dans les importations.

Mais d'où vient l'objet config? Vous pouvez y voir beaucoup d’informations telles que «apiKey, authDomain», etc.

Pour répondre à cette question, nous devons revenir à notre console Firebase et créer une application Web.

Sélectionnez la plate-forme Web

Vous devez cliquer sur l'icône d'une plate-forme Web à droite de l'icône Android (voir l'image ci-dessus). Lorsque l'application Web est sélectionnée, votre propre objet de configuration vous sera présenté.

Mon objet de configuration pour Firebase après la sélection de l'application Web.

Il est maintenant temps de copier tout l’objet config dans app.module.ts dans nos projets ioniques. Assurez-vous de le changer pour votre objet de configuration! Le mien ne fonctionnera pas pour vous.

Fournissez la configuration à app.module.ts

Nous pouvons maintenant commencer à travailler sur la mise en œuvre du service de notification push.

Service de notification push

Créons un nouveau service. Appelez ça comme vous voulez. Je vais appeler le mien fcm.service.ts. FCM signifie Firebase Cloud Messaging.

Voyons d’abord la mise en œuvre du service. Je vais l'expliquer ligne par ligne.

Si nous voulons envoyer une notification push à un périphérique, nous devons obtenir un identifiant unique du périphérique. Dans ce cas, cela s'appelle un jeton.

Nous devons rechercher un périphérique spécifique à la plate-forme, en raison d'une étape supplémentaire dans la configuration iOS. iOS nécessite des autorisations explicites pour recevoir des notifications push.

Nous devons maintenant stocker ce jeton quelque part, mais où? Nous allons stocker les jetons dans la base de données Firebase. Vous voyez que je crée des collections de périphériques et que je les remplis avec des données contenant le jeton et juste un ID utilisateur de test. Parfait! Maintenant, nous avons stocké notre jeton et nous pouvons nous abonner aux notifications.

S'abonner aux notifications est en réalité très simple. Il suffit d'appeler this.firebase.onNotificationOpen ()

Incroyable. Service vérifié!

Tout cela est agréable mais un peu inutile, car nous n’utilisons pas encore notre service. Laissons le réparer!

Déplacez-vous sur votre app.component.ts et écrivez ce qui suit:

La fonction notificationSetup est particulièrement importante.

Nous obtenons d'abord un jeton unique de l'appareil.

Nous nous abonnons également aux notifications entrantes de Firebase.

Lorsque le message est reçu, nous devons vérifier, à nouveau, pour des plates-formes spécifiques. Sur iOS, le texte de votre message est sous aps.alert. Sur Android, il est sous le corps.

Ensuite, nous afficherons simplement le message reçu sous forme de pain grillé.

Maintenant, la configuration du code est terminée. Nous nous rapprochons! Il est temps de le tester.

4. Testez les notifications push sur Android

Toute la configuration requise pour Android devrait être faite maintenant. Vous pouvez commencer à émuler votre application en:

Cordova ionique émuler Android

ou

ionic cordova build android et ouvrez votre construction manuellement dans Android Studio.

Lançons nos applications et accédez au menu Accueil. Nous y verrons une notification push. Assurez-vous que votre application a été lancée correctement dans l'émulateur et que vous n'avez aucune erreur.

Retournez dans vos navigateurs pour accéder à vos applications Firebase. Il est maintenant temps d’inspecter notre base de données Firebase. Vous pouvez trouver l'option de base de données dans le panneau de gauche sous la catégorie Développer.

Base de données Firebase

Après le lancement de votre application dans les émulateurs, le code de app.component.ts que nous avons écrit il y a quelques instants a été exécuté. Pas étonnant que notre base de données soit remplie. Dans la fonction «saveToken», nous avons spécifié la collection «devices» et nous avons enregistré le jeton avec l'ID utilisateur en tant que document dans cette collection. C'est ce que nous voyons dans notre base de données.

Dans mon cas, j'ai plusieurs jetons dans ma base de données, mais vous ne devriez en avoir qu'un, car nous avons lancé notre application pour la première fois. Vous allez créer un nouveau document par périphérique / émulateur unique sur lequel vous exécutez votre application.

Il est maintenant temps de copier ce jeton afin d’envoyer une notification push à un périphérique spécifique.

Collection de base de données Firebase, vous ne verrez qu'un seul document

Naviguez du panneau de gauche vers un onglet de croissance et cliquez sur messagerie en nuage.

Cliquez sur Cloud Messaging

Nous devons maintenant renseigner les données nécessaires. Entrez le texte de votre message et indiquez le jeton de l'appareil à partir de la base de données que nous venons de copier.

Lorsque vous envoyez un message, ouvrez simultanément votre appareil émulé et observez ce qui se passe.

Envoyer un message, aaaaand Congrats! Maintenant, votre configuration Android est terminée et vous pouvez envoyer des notifications push! N'est-ce pas génial?

Notification Push sur Android.

5. Pré-configuration de la notification push iOS

Bouclez les gars, la configuration iOs arrive. Séparons cette configuration en plusieurs étapes pour éviter toute attaque de panique. Laissez-nous creuser!

Tout d’abord, construisez votre application pour iOS: ionic cordova build ios

Ouvrez votre Xcode et trouvez votre application construite dans plates-formes / ios / nameofyourapp.xcodeproj. Ouvrez-le.

Ouvrez votre .xcodeproj

Cela devrait ouvrir une arborescence de votre application sur le côté gauche. Double-cliquez sur le fichier racine de cette structure. Cela ouvrira un menu supplémentaire avec plus de paramètres pour votre application.

Plus de réglages

Connectez-vous avec votre compte développeur.

Connectez-vous avec un compte développeur

5. Ouvrez l'onglet «Capacités» du haut et activez les «notifications push».

Activer les notifications push

6. Accédez à la page de votre compte de développeur Apple. Sous «Certificats», sélectionnez «All», puis cliquez sur «+» pour ajouter un nouveau certificat.

Cliquez sur le signe plus.

Activez le service de notification Apple Push et passez à l'étape suivante.

Maintenant, choisissons votre application.

Nous devons demander un certificat. Sur votre Mac, allez dans «Accès au trousseau» -> «Assistant de certification» -> «Demander un certificat à une autorité de certification».

Complétez toutes les informations nécessaires - votre email et votre nom commun - et enregistrez-le sur le disque.

Dans la console Apple, passez à l'étape suivante et téléchargez votre demande de certificat.

À l'étape suivante, votre certificat devrait être créé et vous pouvez le télécharger. Vous en aurez besoin plus tard.

Nous devons maintenant créer une clé de service pour activer les notifications push Apple. Sous «Keys», sélectionnez «All». Choisissez votre nom de clé. Activez «Service de notifications Apple Push (APN)».

Cliquez sur «Continuer» et confirmez votre clé. Ne partagez jamais de telles données avec d'autres. Vous pouvez maintenant télécharger votre clé.

Nous devons maintenant retourner à Firebase.

Dans Firebase, ouvrez votre application iOS et accédez à «Cloud Messaging».

Nous devons télécharger notre clé d’authentification APN que nous avons générée il ya un moment. Cliquez sur «Upload».

Fournissez toutes les informations et téléchargez la clé.

Commencez par télécharger votre fichier «.p8», téléchargé plus tôt à partir de la console Apple. Entrez votre identifiant de clé. Vous pouvez obtenir le préfixe d'identifiant d'application depuis la console Apple dans «Identifiants» -> «Identifiants d'application» -> «Votre application» -> «Préfixe».

Téléchargez le fichier p8 et obtenez le préfixe ID et ID-clé

C'est ça. Des larmes de joie coulent sur mon visage.

Nous pouvons tester les notifications push sur iOS. N'oublions pas que nous devons utiliser un vrai appareil.

6. Tester la notification push sur iOS

Premièrement, nous devons créer nos applications, alors courons: ionic cordova build ios

Dans Xcode, vous pouvez exécuter votre application sur un périphérique connecté via USB à votre ordinateur.

Choisissez votre appareil

Attendons que tout soit lancé. Nous pouvons maintenant répéter les étapes pour envoyer des notifications push à partir de la section 4, car c'est la même chose que sur Android.

N'oubliez pas que vous devez maintenant utiliser un nouveau jeton, généré pour votre appareil iOS. Accédez aux bases de données, obtenez un nouveau jeton et envoyez une notification push. Votre résultat devrait ressembler à ceci.

J'espère que vous avez réussi à configurer vos notifications push. Il faut du temps et de la patience pour que tout soit correct, mais le résultat et les avantages sont incroyables.

Si vous aimez mon tutoriel et que vous souhaitez en savoir plus, vous pouvez consulter mon cours sur Udemy: Ionic 4 Crash Course avec API Heartstone et Angular.

Pour un projet complet voir mon Github Repo.

Bon codage!

Filip