Bonjour à tous! Dans ce tutoriel Ionic Notification nous allons voir comment envoyer des notifications push dans une application Ionic.

Nous allons pour cela utiliser le service Firebase Cloud Messaging (FCM) qui possède son propre plugin Cordova.

Il s’agit d’un service Firebase disponible gratuitement pour une utilisation limitée (comme les autres services cloud de Firebase).

En revanche cette fonctionnalité doit obligatoirement être testé sur un appareil mobile iOS ou Android, et non sur un émulateur.

Nous allons donc suivre les étapes suivantes pour envoyer des notifications push avec Ionic:

  1. Installer le plugin Cordova FCM
  2. Configurer Firebase sur iOS et Android
  3. Envoyer une notification

1. Installer le plugin Ionic Notification Cordova FCM

Contrairement à ce que l’on pense, l’envoi de notifications dans une application Ionic se fait assez facilement.

Nous allons tout d’abord devoir installer tout simplement le plugin d’Ionic Firebase Cloud Messaging (FCM): https://ionicframework.com/docs/native/fcm

Ce plugin natif permet à notre application de recevoir les notifications push sur iOS et Android.

Vous pouvez donc l’installer en entrant les deux commandes suivantes:

ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated
npm install @ionic-native/fcm

Vous pouvez ensuite importer et déclarer le plugin dans le module racine:

src/app/app.module.ts

Qui pourra vous permettre d’utiliser les différentes fonctions associées au plugin dans vos différentes pages:

import { FCM } from '@ionic-native/fcm/ngx';
[...]
providers: [
    StatusBar,
    SplashScreen,
    FCM,

Par exemple on exécuter du code dans notre fichier initial:

src/app/app.component.ts

Dans lequel après avoir importé et déclaré à nouveau le plugin FCM, je peux repérer lorsqu’une notification est envoyée et si elle a été reçu en arrière-plan ou non.

import { FCM } from '@ionic-native/fcm/ngx';
[...]
constructor(
    private fcm: FCM,
 [...]
 
 this.fcm.onNotification().subscribe(data => {
   if(data.wasTapped){
     console.log("Received in background");
   } else {
     console.log("Received in foreground");
   };
 });

Ces fonctions ne sont pas indispensables au fonctionnement des notifications.

Mais elles vous offrent un large choix de développement pour vos applications Ionic.

2. Configurer Firebase sur Ionic pour recevoir les notifications

Maintenant que le plugin FCM est installé dans votre application Ionic, nous devons préparer les plateformes iOS et Android à recevoir les notifications.

Pour cela nous devons connecter chacune des plateformes à Firebase en téléchargeant des fichiers de configuration que nous allons détailler.

Configurer Firebase pour iOS

Commençons par la configuration de votre application iOS. Vous retrouvez dans l’onglet “Vue d’ensemble du projet” toutes vos applications existences.

Ionic notification firebase cloud messaging console

Vous pouvez ainsi ajouter par exemple une application iOS à votre projet Firebase et suivre les étapes qu’on vous propose.

Entrez ainsi le bundle ID (ex: com.drissas.official) de votre application ainsi que son nom:

Ionic notification firebase cloud messaging new app ios

Cliquez sur “Enregistrez l’application” et passez à l’étape suivante où Firebase vous propose de télécharger le fichier de configuration.

Ionic notification firebase cloud messaging GoogleService-Info.plist

Il s’agit du fichier GoogleService-Info.plist qui est spécifique à iOS et à Xcode notamment.

Téléchargez-le et placez-le dans le répertoire ci-dessous:

APP_NAME/platforms/ios/APP_NAME/Resources/Resources/GoogleService-Info.plist

Voilà par exemple où se situe mon fichier GoogleService-Info.plist dans mon application Ionic Driss AS:

Ionic notification firebase cloud messaging GoogleService-Info.plist resources

On passe maintenant à la configuration Android qui est encore plus rapide.

Configurer Firebase pour Android

Pour Android la procédure est très similaire, vous ajoutez votre application Android depuis Firebase:

Ionic notification firebase cloud messaging new android

Entrez le nom du package Android (comme le Bundle ID sur iOS, ex: com.drissas.official) et donnez le pseudo de votre application.

Puis Firebase vous propose de télécharger cette fois-ci le fichier google-services.json à placer dans le dossier racine de votre application.

Ionic notification firebase cloud messaging google-services.json

Une fois ce fichier téléchargé, la prochaine version Android de votre application que vous allez générer, le fichier google-services.json se placera au bon endroit.

Vos applications iOS et Android sont maintenant fin prêtes à recevoir des notifications.

3. Envoyer une notification avec Firebase dans Ionic

Nous pouvons maintenant passer à la partie finale de notre tutoriel Ionic Notification: l’envoi de notification.

Pour cela nous allons utiliser l’interface d’envoi de notification de Firebase Cloud Messaging:

Ionic notification firebase cloud messaging FCM

Voilà par exemple deux notifications que j’ai envoyé dans mon application android Driss AS.

Ionic notification firebase cloud messaging test

Vous pouvez ainsi créer une nouvelle notification en utilisant le bouton “Nouvelle notification“.

Firebase vous propose alors plusieurs champ à remplir, comme le titre de la notification, le texte et l’image:

Ionic notification firebase cloud messaging new notification

Une fois les informations de votre notification détaillés, vous pouvez choisir sur quelle plateforme envoyer votre notification:

Ionic notification firebase cloud messaging app target

Une fois tous ces paramètres entrés, vous pouvez valider et envoyer votre première notification sur votre application Ionic.