Notifications push Ionic Capacitor avec Firebase : guide étape par étape

Dans ce tutoriel, nous allons intégrer les notifications push dans une application Ionic Capacitor en utilisant Firebase. Pour un plugin Capacitor maintenu avec prise en charge de Firebase Cloud Messaging, voir @capgo/capacitor-firebase-messaging. Vous n’avez pas besoin d’un service spécifique pour cela, mais vous devez configurer plusieurs éléments au préalable. Firebase est un excellent choix, car il est requis pour Android, et vous pouvez l’utiliser facilement pour envoyer des notifications sans utiliser la base de données.

D’abord, nous allons créer une application Ionic avec Capacitor activé et spécifier notre package id, qui est l’identifiant unique de votre application. Ensuite, nous compilerons l’application et ajouterons les plateformes natives.

ionic start pushApp blank --type=angular --capacitor --package-id=com.appdactic.devpush
cd ./pushApp
ionic build
npx cap add ios
npx cap add android

Si vous avez déjà une application, vous pouvez modifier le capacitor.config.json pour inclure votre appId. Cependant, si vos dossiers natifs existent déjà, vous devrez remplacer l’id dans tous les fichiers où il apparaît, car Capacitor ne crée le dossier qu’une seule fois et ne mettra pas à jour l’id lui-même. Dans le capacitor.config.json, vous pouvez également spécifier des options comme la mise à jour du compteur de badge, la lecture d’un son lors de la réception d’une notification push et l’affichage d’une alerte.

{
  "appId": "com.appdactic.devpush",
  "appName": "pushApp",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    },
    "PushNotifications": {
      "presentationOptions": ["badge", "sound", "alert"]
    }
  },
  "cordova": {}
}

Configurons maintenant les notifications push en dehors de l’application.

Configuration Firebase

Commencez par créer un nouveau projet Firebase ou en utiliser un existant. Fournissez un nom et les options par défaut pour un nouveau projet.

Si vous avez une nouvelle app, vous devriez voir « Commencez par ajouter Firebase à votre application » dans le dashboard de votre application. Sinon, cliquez sur l’icône d’engrenage et accédez à paramètres du projet pour ajouter une application.

La boîte de dialogue pour iOS et Android est similaire, et l’essentiel est d’utiliser votre package id pour les applications.

Après cette première étape, téléchargez les fichiers suivants :

google-services.json fichier pour Android
GoogleService-info.plist fichier pour iOS

Ensuite, configurez les plateformes.

Préparation des notifications push Android

Pour Android, déplacez le google-services.json fichier que vous avez téléchargé dans le dossier android/app/ dossier.

C’est tout pour Android. Passons maintenant à la configuration d’iOS.

Préparation des notifications push iOS

Cette partie est plus complexe. D’abord, créez un App ID pour votre application dans la liste des identifiants de votre compte Apple Developer. Assurez-vous de sélectionner la capacité Push Notifications dans la liste.

ionic-ios-push-id

Le ID du bundle doit être identique à votre App ID dans Capacitor et Firebase.

Maintenant, créez une clé et activez le service Apple Push Notifications (APNs). Si vous avez atteint le nombre maximum de clés, vous pouvez utiliser une clé existante ou un certificat à la place, mais le processus est plus complexe.

ios-developer-push-key

Après avoir téléchargé le fichier .p8 , envoyez-le sur Firebase. Ouvrez Cloud Messaging onglet de votre projet Firebase, envoyez le fichier et saisissez les détails de l’ID de clé et de votre ID d’équipe iOS.

firebase-upload-ios-key

Maintenant, modifiez votre projet Xcode en exécutant :

npx cap open ios

Copiez le GoogleService-Info.plist que vous avez téléchargé depuis Firebase dans votre projet iOS. Glissez le fichier dans le projet Xcode, dans le dossier app/app, et cochez Copier les éléments si nécessaire.

Ensuite, ajoutez un nouveau Pod pour la dépendance Firebase dans le ios/App/Podfile:

target 'App' do
  capacitor_pods
  # Add your Pods here
  pod 'Firebase/Messaging'
end

Mettez à jour la plateforme native avec cette commande :

npx cap update ios

Modifiez le fichier Swift natif code dans ios/App/App/AppDelegate.swift pour vous enregistrer auprès de Firebase et renvoyer le bon token à votre app.

import UIKit
import Capacitor
import Firebase

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    FirebaseApp.configure()
    return true
  }

  // All the existing functions
  // ...

  // Update this one:
    func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
        Messaging.messaging().apnsToken = deviceToken
        InstanceID.instanceID().instanceID { (result, error) in
            if let error = error {
                NotificationCenter.default.post(name: Notification.Name(CAPNotifications.DidFailToRegisterForRemoteNotificationsWithError.name()), object: error)
            } else if let result = result {
                NotificationCenter.default.post(name: Notification.Name(CAPNotifications.DidRegisterForRemoteNotificationsWithDeviceToken.name()), object: result.token)
            }
        }
    }
}

Enfin, ajoutez la Capability pour les notifications push dans votre projet Xcode.

capacitor-xcode-capability

Maintenant, compilez votre application et intégrez les notifications push.

Intégration des notifications push Ionic

Créez un service et une nouvelle page dans votre projet Ionic :

ionic g service services/fcm
ionic g page pages/details

Mettez à jour le routage dans app/app-routing.module.ts pour inclure la nouvelle page avec un id dynamique :

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home/:id',
    loadChildren: () => import('./pages/details/details.module').then( m => m.DetailsPageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Créez un service pour gérer les notifications push dans services/fcm.service.ts:

import { Injectable } from '@angular/core';
import {
  Plugins,
  PushNotification,
  PushNotificationToken,
  PushNotificationActionPerformed,
  Capacitor
} from '@capacitor/core';
import { Router } from '@angular/router';

const { PushNotifications } = Plugins;

@Injectable({
  providedIn: 'root'
})
export class FcmService {

  constructor(private router: Router) { }

  initPush() {
    if (Capacitor.platform !== 'web') {
      this.registerPush();
    }
  }

  private registerPush() {
    PushNotifications.requestPermission().then((permission) => {
      if (permission.granted) {
        // Register with Apple / Google to receive push via APNS/FCM
        PushNotifications.register();
      } else {
        // No permission for push granted
      }
    });

    PushNotifications.addListener(
      'registration',
      (token: PushNotificationToken) => {
        console.log('My token: ' + JSON.stringify(token));
      }
    );

    PushNotifications.addListener('registrationError', (error: any) => {
      console.log('Error: ' + JSON.stringify(error));
    });

    PushNotifications.addListener(
      'pushNotificationReceived',
      async (notification: PushNotification) => {
        console.log('Push received: ' + JSON.stringify(notification));
      }
    );

    PushNotifications.addListener(
      'pushNotificationActionPerformed',
      async (notification: PushNotificationActionPerformed) => {
        const data = notification.notification.data;
        console.log('Action performed: ' + JSON.stringify(notification.notification));
        if (data.detailsId) {
          this.router.navigateByUrl(`/home/${data.detailsId}`);
        }
      }
    );
  }
}

Appelez la initPush() fonction dans app/app.component.ts:

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { FcmService } from './services/fcm.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private fcmService: FcmService
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      // Trigger the push setup
      this.fcmService.initPush();
    });
  }
}

Gérez les informations sur la page de détails dans pages/details/details.page.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Plugins } from '@capacitor/core';
const { PushNotifications } = Plugins;

@Component({
  selector: 'app-details',
  templateUrl: './details.page.html',
  styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {
  id = null;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.id = params.get('id');
    });
  }

  resetBadgeCount() {
    PushNotifications.removeAllDeliveredNotifications();
  }

}

Affichez les détails dans pages/details/details.page.html:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>Details</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  My Id from push: {{ id }}

  <ion-button (click)="resetBadgeCount()" expand="block">
    Reset Badge Count
  </ion-button>
</ion-content>

Compilez l’application, synchronisez vos modifications et déployez-la sur votre appareil.

ionic build
npx cap sync

Vous pouvez maintenant envoyer des notifications push avec Firebase.

Envoyer des notifications push avec Firebase

Il existe plusieurs façons d’envoyer des notifications push avec Firebase.

Test sur un appareil spécifique

Après avoir déployé votre application sur un appareil, vous pouvez consulter les logs de la console pour voir le token après l’enregistrement. Utilisez ce token pour envoyer une notification push de test ciblée afin de confirmer que votre intégration fonctionne. Dans Firebase, allez dans Cloud Messaging et sélectionnez Envoyer un message de test. Ajoutez le token de l'appareil depuis les logs.

firebase-test-push

Si tout est correctement configuré, vous devriez recevoir une notification push sur votre appareil.

Message push avec payload

Pour tester une notification push avec des informations supplémentaires, suivez l'assistant sur la même page pour spécifier les informations générales et choisir la plateforme cible. Ajoutez des options supplémentaires pour envoyer un payload avec votre notification push.

firebase-push-payload

Dans le Options avancées section, ajoutez un Custom data paire clé-valeur. Par exemple, vous pouvez utiliser la clé detailsId et une valeur de votre choix. Ces données serviront dans l’app à naviguer vers la page de détails avec l’id spécifié.

Après l’envoi de la notification push, votre app doit la recevoir et afficher la page de détails avec l’id spécifié quand l’utilisateur tape sur la notification.

Utiliser Firebase API

Vous pouvez aussi envoyer des notifications push par programmation avec Firebase API. Pour cela, vous devez récupérer la Clé serveur dans les paramètres de votre projet Firebase, sous Cloud Messaging .

Avec la clé serveur, vous pouvez envoyer une requête POST à l'API Firebase avec le payload requis. Voici un exemple avec Node.js et la request bibliothèque :

const request = require('request');

const serverKey = 'YOUR_SERVER_KEY';
const deviceToken = 'YOUR_DEVICE_TOKEN';

const options = {
  method: 'POST',
  url: 'https://fcm.googleapis.com/fcm/send',
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'key=' + serverKey
  },
  body: JSON.stringify({
    to: deviceToken,
    notification: {
      title: 'Test Push',
      body: 'This is a test push notification with custom data'
    },
    data: {
      detailsId: '123'
    }
  })
};

request(options, (error, response, body) => {
  if (error) {
    console.error('Error sending push:', error);
  } else {
    console.log('Push sent successfully:', body);
  }
});

Remplacer YOUR_SERVER_KEY et YOUR_DEVICE_TOKEN avec votre clé serveur et votre token d'appareil réels. Lancez le script, et votre appareil devrait recevoir la notification push avec le payload personnalisé.

Et voilà ! Vous avez intégré avec succès les notifications push dans votre application Ionic Capacitor via Firebase. Vous pouvez désormais envoyer des notifications push à vos utilisateurs sur Android et iOS.

Pour aller plus loin : notifications push Ionic Capacitor avec Firebase, un guide étape par étape

Si vous utilisez Notifications push Ionic Capacitor avec Firebase : guide étape par étape pour planifier la migration et les opérations d'entreprise, connectez-l’à Capgo Entreprise pour le workflow produit dans Capgo Enterprise, Alternatives aux plugins Ionic Enterprise pour le workflow produit dans les alternatives aux plugins Ionic Enterprise, Alternatives Capgo pour le workflow produit dans les alternatives Capgo, Conseil Capgo pour le workflow produit dans Capgo Consulting, et Support Premium Capgo pour le workflow produit dans Capgo Premium Support.