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-messaging-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'elle est requise pour Android, et vous pouvez facilement l'utiliser pour envoyer des notifications sans utiliser la base de données.
Nous allons d'abord créer une application Ionic avec Capacitor activé et spécifier notre package id, qui est l'identifiant unique de votre application. Ensuite, nous allierons 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 androidSi vous avez déjà une application, vous pouvez modifier le capacitor.config.json pour inclure votre appIdCependant, 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 fois et ne mettra pas à jour l'ID 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.
If you have a new app, you should see “Commencez par ajouter Firebase à votre application” Dans votre tableau de bord de l'application. Sinon, cliquez sur l'icône de l'engrenage et allez à paramètres de 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 package id pour les applications.
Après l'étape initiale, téléchargez les fichiers suivants :
- fichier google-services.json pour Android
- GoogleService-info.plist fichier pour iOS
Configurez ensuite les plateformes.
Préparation de la notification Push Android
Pour Android, déplacez le google-services.json fichier que vous avez téléchargé dans le dossier android/app/ folder.
Préparation de la notification Push pour iOS
android-push-file
Cette partie est plus compliquée. Tout d'abord, créez un ID d'application pour votre application dans la liste des identifiants s'assurez-vous que vous disposez d'un compte Apple Developer. Sélectionnez la capacité de notifications Push ionic-ios-push-id
The ID de bundle Doit correspondre à votre ID d'application dans Capacitor et Firebase.
Now, et activez la et activer 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 au lieu de cela, mais le processus est plus compliqué.
Après le téléchargement du fichier .p8 fichier, téléchargez-le dans Firebase. Ouvrez l'onglet Messagerie Cloud dans les paramètres de votre projet Firebase, téléchargez le fichier et entrez les informations pour la clé ID et votre ID d'équipe sur iOS.
Maintenant, apportez des modifications à votre projet Xcode en exécutant :
npx cap open iosCopiez le fichier GoogleService-Info.plist Fichier 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 à l'intérieur de votre projet Xcode.
Maintenant, construisez 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/detailsMettez à 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é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/détails/détails.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/détails/détails.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 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 une notification de test ciblée pour confirmer que votre intégration fonctionne. Dans Firebase, allez à Messagerie Cloud et sélectionnez Envoyer un message de testAjoutez le jeton de l'appareil provenant 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 le plateforme que vous souhaitez cibler. Ajoutez options supplémentaires pour envoyer une charge utile avec votre notification push.
Dans la 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. Cette donnée sera utilisée dans l'application pour naviguer vers la page de détails avec l'identifiant spécifié.
After 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.
En utilisant Firebase API
Vous pouvez également envoyer des notifications push de manière programmée en utilisant la Firebase API. Pour ce faire, vous devez obtenir la clé de serveur à partir de vos paramètres de projet Firebase sous l'onglet Messagerie Cloud .
Avec la clé de serveur, vous pouvez envoyer une requête POST à la Firebase API avec le payload requis. Voici un exemple en 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 Avec votre clé de serveur réelle et votre jeton de appareil. Exécutez le script, et votre appareil devrait recevoir la notification push avec le payload personnalisé.
C'est tout ! Vous avez intégré avec succès 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 avec les notifications push Ionic Capacitor avec Firebase : 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 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 Support Premium pour le flux de travail du produit dans Capgo Support Premium.
