In ce tutoriel, nous allons intégrer les notifications 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'elle est requise 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, 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 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 mettra pas à jour l'identifiant 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 d'un push et l'affichage d'une alerte lors de l'arrivée d'une notification.
{
"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 un nouveau projet, vous devriez voir “Get started by adding Firebase to your app” ‘Commencez par ajouter Firebase à votre application” dans votre tableau de bord d'application. Sinon, cliquez sur l'icône de roue dentée et allez dans paramètres du projet
The dialog for both iOS and Android looks similar, and the important thing is to use your __CAPGO_KEEP_0__ for the apps. identifiant de package firebase-app-setup-ios
fichier json de Google pour Android
- fichier de Google pour Android fichier de Google pour iOS
- Prochaine étape : configurez les plateformes. Préparation de la mise en œuvre de la push pour Android
Pour Android, déplacez le
__CAPGO_KEEP_1__
__CAPGO_KEEP_2__ google-services.json le fichier que vous avez téléchargé vers le android/app/ dossier.
C'est tout pour Android. Maintenant, configurons iOS.
Préparation de l'envoi de notifications 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 développeur Apple. Assurez-vous de sélectionner la capacité d'envoi de notifications de la liste.
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 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 téléchargement du .p8 fichier, téléchargez-le sur Firebase. Ouvrez la Cloud Messaging rubrique dans les paramètres de votre projet Firebase, téléchargez le fichier et entrez les informations pour le Key ID et votre ID d'équipe depuis iOS.
Maintenant, modifiez votre projet Xcode en exécutant :
npx cap open iosCopiez 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'app/app dossier, et sélectionnez 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'
endMettez à jour la plateforme native avec cette commande :
npx cap update iosModifier le Swift natif code pour s'inscrire avec Firebase et retourner le bon jeton à votre application. ios/App/App/AppDelegate.swift Enfin, ajoutez la capacité aux notifications push dans votre projet Xcode.
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)
}
}
}
}__CAPGO_KEEP_0__-xcode-capability
Intégration des notifications push Ionic
Créez un service et une nouvelle page dans votre projet Ionic :
Mettez à jour la navigation dans
ionic g service services/fcm
ionic g page pages/detailsapp/app-routing.module.ts pour inclure la nouvelle page avec un ID dynamique : Créez un service pour gérer les notifications push dans
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 { }app/app-routing.module.ts 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 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 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 test. Ajoutez le jeton de l'appareil provenant des journaux.
Si tout est configuré correctement, vous devriez voir une notification de push sur votre appareil.
Message de Push avec Charge Utile
Pour tester une notification de push avec des informations supplémentaires, suivez le guide sur la même page pour spécifier des informations générales et sélectionnez la plateforme que vous souhaitez cibler. Ajoutez options supplémentaires pour envoyer une charge utile avec votre notification de push.
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 l'envoi de 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 cela, vous devez obtenir la Clé du serveur de vos paramètres de projet Firebase sous Cloud Messaging tab.
Avec la clé 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 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 YOUR_SERVER_KEY et YOUR_DEVICE_TOKEN par votre clé serveur et votre jeton de appareil réel. 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 de la Ionic Capacitor Push Notifications with Firebase: A Step-by-Step Guide
Si vous utilisez Ionic Capacitor Push Notifications with Firebase: A Step-by-Step Guide pour planifier la migration et les opérations d'entreprise, connectez-le avec 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.
