Dans ce tutoriel, nous allons intégrer les notifications de push dans une application Ionic Capacitor en utilisant Firebase. 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.
Tout d'abord, nous allons créer une application Ionic avec Capacitor activé et spécifier notre identifiant de package, ce qui constitue l'identifiant unique de 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 androidSi 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'identifiant dans tous les fichiers où il apparaît, car Capacitor ne crée le dossier qu'une seule fois et ne met pas à jour l'identifiant lui-même. Dans 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 une alerte 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": {}
}Maintenant, configurons 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 une nouvelle application, vous devriez voir “Commencez par ajouter Firebase à votre application” dans le tableau de bord de votre application. Sinon, cliquez sur l’icône de l’engrenage et allez dans paramètres du projet pour ajouter une application.
Le dialogue pour les deux iOS et Android ressemble à peu près au même, 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 :
- __CAPGO_KEEP_0__ fichier pour Android
- __CAPGO_KEEP_1__ fichier pour iOS
Ensuite, configurez les plateformes.
Préparation de la mise en œuvre de Push pour Android
Pour Android, déplacez le __CAPGO_KEEP_0__ fichier que vous avez téléchargé vers le dossier android/app/ répertoire.
C'est tout pour Android. Maintenant, configurons iOS.
Préparation de la notification Push 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 de sélectionner la capacité de notifications Push de la liste. ionic-ios-push-id L'ID de l'application doit être le même que votre ID d'application dans __CAPGO_KEEP_0__ et Firebase.
The Bundle ID should be the same as your App ID within __CAPGO_KEEP_0__ and Firebase. This part is more complicated. First, create an App ID for your app within the identifiers list of your Apple Developer account. Make sure you select the Push Notifications capability from the list. The Bundle ID should be the same as your App ID within Capacitor and Firebase.
Maintenant, créez une clé et activez le service de notifications Push pour 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é.
Après avoir téléchargé le .p8 fichier, téléchargez-le sur Firebase. Ouvrez la section de messagerie Cloud dans vos paramètres de projet Firebase, téléchargez le fichier et entrez les informations pour la clé ID et votre ID d'équipe depuis iOS.
Maintenant, apportez des modifications à votre projet Xcode en exécutant :
npx cap open iosCopiez le fichier GoogleService-Info.plist que vous avez téléchargé à partir de Firebase dans votre projet iOS. Faites glisser le fichier dans le projet Xcode à l'intérieur du dossier app/app, et sélectionnez 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'
endMettez à jour la plateforme native avec cette commande :
npx cap update iosModifiez la plateforme native Swift code dans 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)
}
}
}
}Finalement, ajoutez la Capacité pour les Notifications Push dans votre projet Xcode.
Construis maintenant ton application et intégre les notifications push.
Intégration de notifications push Ionic
Crée un service et une nouvelle page dans ton projet Ionic :
ionic g service services/fcm
ionic g page pages/detailsMets à jour la navigation 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ée 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}`);
}
}
);
}
}Appelle 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 en __CAPGO_KEEP_0__:
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 en __CAPGO_KEEP_0__:
<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 syncVous 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 l'appareil 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 un test de notification ciblée pour confirmer que votre intégration fonctionne. Dans Firebase, allez à Cloud Messaging et sélectionnez Envoyer un message de test. Ajoutez le jeton de l'appareil à partir des journaux.
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 une charge utile avec votre notification push.
Dans la section Options avancées ajoutez un Données personnalisées paire clé-valeur. Par exemple, vous pouvez utiliser la clé detailsId et une valeur de votre choix. Ces données seront utilisées dans l'application pour naviguer vers la page de détails avec l'identifiant spécifié.
Après avoir envoyé la notification de mise à jour, 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 API
Vous pouvez également envoyer des notifications de mise à jour de manière programmée en utilisant Firebase API. Pour ce faire, vous devez obtenir la clé de serveur dans vos paramètres de projet Firebase sous l'onglet Cloud Messaging Avec la clé de serveur, vous pouvez envoyer une requête POST vers Firebase __CAPGO_KEEP_0__ avec le payload requis. Voici un exemple en utilisant Node.js et la
With the server key, you can send a POST request to the Firebase API with the required payload. Here’s an example using Node.js and the request library
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 par votre clé de serveur et votre jeton de appareil. YOUR_SERVER_KEY Exécutez le script, et votre appareil devrait recevoir la notification push avec le payload personnalisé. YOUR_DEVICE_TOKEN C'est tout ! Vous avez intégré avec succès 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.
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.
