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

In this tutorial, we will integrate push notifications in an Ionic Capacitor app using Firebase. For a maintained Capacitor plugin with Firebase Cloud Messaging support, see @capgo/capacitor-firebase-messaging@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-firebase-messaging

Capacitor Ionic push Premièrement, nous allons créer une application Ionic avec __CAPGO_KEEP_0__ activé et spécifier notreidentifiant de package

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

, qui est l'identifiant unique de votre application. Ensuite, nous allons construire l'application et ajouter les plateformes natives. capacitor.config.json __CAPGO_KEEP_0__.config.json pour y inclure votre. However, if your native folders already exist, you will need to replace the id in all files where it appears, as Capacitor only creates the folder once and ne mettra pas à jour l’identifiant lui-mêmeDans le 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 projet, 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 ajouter une application

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

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

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

Ensuite, configurez les plateformes.

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

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

C'est tout pour Android. Maintenant, configurons iOS.

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

Cette partie est plus compliquée. Tout d'abord, créez un ID d'application pour votre application dans la liste des identifiants

de votre compte Apple Developer. Assurez-vous que vous __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ sélectionnez la capacité Push Notifications dans la liste.

ionic-ios-push-id

La ID de l'application devrait être la même que votre ID d'application dans Capacitor et Firebase.

Maintenant, 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-key

After avoir téléchargé le .p8 fichier, 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 informations pour le

Key ID

et votre

npx cap open ios

Team ID d'iOS. firebase-upload-ios-key Maintenant, modifiez votre projet Xcode en exécutant : .

Copiez le fichier 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 / application, et sélectionnez si nécessaire : Copiez 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

code ios/App/App/AppDelegate.swift pour vous inscrire auprès de Firebase et renvoyer le jeton correct à 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 finalement la capacité aux notifications Push dans votre projet Xcode.

capacitor-xcode-capability

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

Intégration des Notifications Push d'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é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}`);
        }
      }
    );
  }
}

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>

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

ionic build
npx cap sync

Maintenant, vous pouvez 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 à Cloud Messaging et sélectionnez Envoyer un message de testAjoutez le jeton de l'appareil provenant des journaux.

firebase-test-push

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

Message de Notification 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 push.

firebase-push-payload

Dans la Options avancées section, ajoutez un Données personnalisées paire clé-valeur. Par exemple, vous pouvez utiliser la clé detailsId 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é.

Après avoir envoyé la notification push, votre application devrait la recevoir et afficher la page de détails avec l'identifiant spécifié lorsque la notification est cliquée.

Using Firebase API

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

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 et YOUR_DEVICE_TOKEN context : Page/zone : Site web de marketing Capgo. Rôle : Petit élément de navigation ou d'interface utilisateur. Vu dans : page trust.astro. Clé de message `et` (Et).

That’s it! You’ve successfully integrated push notifications in your Ionic Capacitor app using Firebase. Now you can send push notifications to your users on both Android and iOS platforms.

C'est tout ! Vous avez réussi à intégrer les notifications push dans votre application Ionic Capacitor à l'aide de Firebase. Vous pouvez maintenant envoyer des notifications push à vos utilisateurs sur les deux plateformes Android et iOS.

Continuez de Ionic __CAPGO_KEEP_0__ Notifications push avec Firebase : Guide étape par étape Ionic Capacitor Notifications Push avec Firebase : Guide étape par étape planifier la migration et les opérations d'entreprise, connectez-l’avec Capgo Entreprise pour le flux de travail du produit dans Capgo Enterprise, Alternatives de plugins Ionic Enterprise pour le flux de travail du produit dans les alternatives du plugin Enterprise Ionic Capgo Alternatives Pour le flux de travail du produit dans Capgo Alternatives, Consultation Capgo pour le flux de travail du produit dans Capgo Consulting, et Capgo Premium Support pour le flux de travail du produit dans le Capgo Support Premium.