IONIC NOTIFICATION: Comment envoyer des notifications push dans Ionic avec Firebase

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.

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:

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

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:

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:

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.

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:

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

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:

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

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