Intégration des notifications push Ionic Capacitor avec Firebase : Guide étape par étape

In ce tutoriel, nous allons intégrer les notifications push dans une application Capacitor Ionic 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 choses à l'avance. Firebase est une excellente option puisqu'il est requis pour Android, et vous pouvez facilement l'utiliser pour envoyer des notifications sans utiliser la base de données.

Premièrement, nous allons créer une application Ionic avec Capacitor activé et spécifier notre package id, qui est l'identifiant unique pour votre application. Ensuite, nous allons construire l'application et ajouter 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 y inclure votre appId. Cependant, si vos dossiers natives 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'identifiant lui-même. Dans capacitor.config.json, vous pouvez également spécifier des options comme mettre à jour le compteur de badge, jouer un son lors d'un push et afficher un avertissement lorsqu'une notification arrive.

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

Configurez maintenant les notifications push en dehors de l'application.

Configuration Firebase

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

Si vous avez un nouveau appareil, vous devriez voir “Commencez par ajouter Firebase à votre application” dans le tableau de bord de votre application. Sinon, cliquez sur l'icône de roue dentée et allez à Paramètres du projet Pour ajouter une application.

Le dialogue pour les deux iOS et Android ressemble à peu près, et l'important est d'utiliser votre identifiant de package pour les applications.

Après l'étape initiale, téléchargez les fichiers suivants :

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

Configurez ensuite les plateformes.

Préparation de la mise en œuvre de Push Android

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

C'est tout pour Android. Nous allons maintenant configurer iOS.

Préparation de la mise en œuvre de Push iOS

Cette partie est plus compliquée. Tout d'abord, créez un ID d'application pour votre application dans la liste d'identifiants de votre compte développeur Apple. Assurez-vous que vous sélectionnez la capacité de notifications Push à partir de la liste.

The l'ID de l'application doit être le même que votre ID d'application dans __CAPGO_KEEP_0__ et Firebase. should be the same as your App ID within Capacitor and Firebase.

créez une clé et activez le service de notifications Push d'Apple (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 compliqué. ios-developer-push-keyPour utiliser les notifications Push avec Capacitor, vous devez d'abord configurer les notifications Push dans votre projet iOS.

After télécharger le fichier .p8, téléchargez-le sur Firebase. Ouvrez l'onglet Cloud Messaging dans vos paramètres de projet Firebase, téléchargez le fichier et entrez les détails pour la clé ID et votre ID d'équipe depuis iOS. firebase-upload-ios-key Maintenant, modifiez votre projet Xcode en exécutant : Copiez le fichier GoogleService-Info.plist que vous avez téléchargé de Firebase dans votre projet iOS. Faites glisser le fichier dans votre projet Xcode à l'intérieur de l'application/app, et sélectionnez Copier les éléments si nécessaire Ensuite, ajoutez un nouveau Pod pour la dépendance Firebase dans le

Maintenant, ajoutez le module Firebase à votre projet Xcode en exécutant :

npx cap open ios

Exécutez la commande suivante dans votre terminal : Exécutez la commande suivante dans votre terminal : Exécutez la commande suivante dans votre terminal : Exécutez la commande suivante dans votre terminal :.

Exécutez la commande suivante dans votre terminal : ios/App/Podfile:

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

Exécutez cette commande pour mettre à jour la plateforme native :

npx cap update ios

Modifiez le Swift natif code dans ios/App/App/AppDelegate.swift pour vous inscrire auprès de Firebase et renvoyer le bon jeton à votre application.

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)
            }
        }
    }
}

Ajoutez ensuite la capacité de notifications push dans votre projet Xcode.

Construirez maintenant votre application et intégrez les notifications push.

Intégration de 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 la navigation dans app/app-routing.module.ts pour inclure la nouvelle page avec un identifiant 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éer 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}`);
        }
      }
    );
  }
}

Appeler 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érer 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();
  }

}

Afficher 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>

Construire l'application, synchroniser vos modifications et la déployer 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 de Dispositif Spécifique

Après avoir déployé votre application sur un appareil, vous pouvez vérifier les journaux de console pour voir le jeton après l'enregistrement. Utilisez ce jeton pour envoyer une notification de test ciblée pour confirmer que votre intégration fonctionne. Dans Firebase, allez dans Cloud Messaging et sélectionnez Envoyer un message de test. Ajoutez le jeton de l'appareil provenant des journaux.

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

Message de Push avec Charge Utile

Pour tester une notification push avec des informations supplémentaires, suivez le guide sur la même page pour spécifier des informations générales et sélectionner la plateforme que vous souhaitez cibler. Ajoutez options supplémentaires pour envoyer un payload avec votre notification de push.

Dans la section Options avancées ajoutez un paire de valeurs clé-valeur personnalisée. Par exemple, vous pouvez utiliser la clé et une valeur de votre choix. Cette donnée sera utilisée dans l'application pour naviguer vers la page de détails avec l'identifiant spécifié. detailsId Après avoir envoyé la notification de push, votre application devrait la recevoir et afficher la page de détails avec l'identifiant spécifié lorsque la notification est cliquée.

En utilisant Firebase __CAPGO_KEEP_0__

Vous pouvez également envoyer des notifications de push de manière programmée en utilisant le Firebase API. Pour ce faire, vous devez obtenir le

You can also send push notifications programmatically using the Firebase API. To do this, you need to obtain the Clé du serveur dans les paramètres de votre projet Firebase sous l'onglet Cloud Messaging .

Avec la clé du serveur, vous pouvez envoyer une requête POST vers le Firebase API avec le payload requis. Voici un exemple utilisant 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);
  }
});

Remplacez YOUR_SERVER_KEY par votre clé de serveur et votre jeton de appareil réels. Exécutez le script, et votre appareil devrait recevoir la notification push avec le payload personnalisé. YOUR_DEVICE_TOKEN C’est tout ! Vous avez réussi à intégrer les notifications push dans votre application Ionic __CAPGO_KEEP_0__ à l’aide de Firebase. Vous pouvez maintenant envoyer des notifications push à vos utilisateurs sur les deux plateformes Android et iOS.

Continuez avec les notifications push d’Ionic Capacitor avec Firebase : Guide étape par étape

Si vous utilisez le Capacitor d’Ionic avec Firebase: A Step-by-Step Guide

Si vous utilisez le __CAPGO_KEEP_0__ d’Ionic avec Firebase: A Step-by-Step Guide Ionic Capacitor Push Notifications with Firebase: A Step-by-Step Guide pour planifier la migration et les opérations d'entreprise, connectez-le à Capgo Entreprise pour le flux de travail du produit dans Capgo Entreprise, Alternatives de plugin d'entreprise Ionic pour le flux de travail du produit dans Alternatives de plugin d'entreprise Ionic, Capgo Alternatives pour le flux de travail du produit dans Capgo Alternatives, Capgo Conseil pour le flux de travail du produit dans Capgo Conseil, et Capgo Support Premium pour le flux de travail du produit dans Capgo Support Premium.