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-messagingSie benötigen keinen speziellen Dienst dafür, aber Sie müssen einige Dinge vorher konfigurieren. Firebase ist eine gute Wahl, da es für Android erforderlich ist und Sie es leicht verwenden können, um Benachrichtigungen ohne die Verwendung der Datenbank zu senden.
Zuerst erstellen wir eine Ionic-App mit Capacitor aktiviert und legen unsere package idfest, die eindeutige Identifikationsnummer für Ihre App ist. Dann bauen wir die App und fügen die nativen Plattformen hinzu.
ionic start pushApp blank --type=angular --capacitor --package-id=com.appdactic.devpush
cd ./pushApp
ionic build
npx cap add ios
npx cap add androidWenn Sie bereits eine App haben, können Sie die capacitor.config.json anpassen, um Ihre appIdeinzufügen. Wenn jedoch Ihre nativen Ordner bereits existieren, müssen Sie den ID in allen Dateien ersetzen, in denen sie erscheint, da Capacitor die Ordner nur einmal erstellt. wird nicht die ID selbst aktualisieren. In dem capacitor.config.json, können Sie auch Optionen wie die Aktualisierung der Badge-Zahl, das Abspielen eines Sounds bei einer Push-Nachricht und das Anzeigen einer Benachrichtigung, wenn eine Benachrichtigung eintrifft, angeben.
{
"appId": "com.appdactic.devpush",
"appName": "pushApp",
"bundledWebRuntime": false,
"npmClient": "npm",
"webDir": "www",
"plugins": {
"SplashScreen": {
"launchShowDuration": 0
},
"PushNotifications": {
"presentationOptions": ["badge", "sound", "alert"]
}
},
"cordova": {}
}Konfigurieren wir nun Push-Benachrichtigungen außerhalb der App.
Firebase-Konfiguration
Beginnen Sie damit, eine neue Firebase-Projekt zu erstellen oder ein bestehendes zu verwenden. Geben Sie einen Namen und Standardoptionen für ein neues Projekt an.
Wenn Sie ein neues App haben, sollten Sie in Ihrem App-Dashboard sehen, ‘Mit Firebase in Ihrer App beginnen’ an. Andernfalls klicken Sie auf das Zahnrad-Symbol und gehen Sie zu Projekt-Einstellungen Um eine App hinzuzufügen.
Das Dialogfenster für beide iOS und Android sieht ähnlich aus, und das Wichtige ist, dass Sie Ihren Paket-Id für die Apps verwenden.
Nach dem ersten Schritt, laden Sie die folgenden Dateien herunter:
- google-services.json Datei für Android
- GoogleService-info.plist Datei für iOS
Konfigurieren Sie als Nächstes die Plattformen.
Android-Push-Vorbereitung
Für Android, verschieben Sie das google-services.json Datei, die Sie heruntergeladen haben, in das Ordner android/app/ android-push-Datei
iOS-Push-Vorbereitung
Dieser Teil ist komplizierter. Erstellt zuerst
eine App-ID für Ihre App innerhalb der Identifikationsliste Ihrer Apple-Entwickler-Konto. Stellen Sie sicher, dass Sie __CAPGO_KEEP_0__ Wählen Sie die Push-Benachrichtigungsfähigkeit aus aus der Liste.
Die Bundle-ID sollte der gleiche sein wie Ihre App-ID innerhalb von Capacitor und Firebase.
Jetzt erstellen Sie eine Schlüssel und aktivieren Sie das Apple Push-Benachrichtigungsdienst (APNs)Durchführen Sie den Prozess, wenn Sie die maximale Anzahl von Schlüsseln erreicht haben, können Sie einen bestehenden Schlüssel oder ein Zertifikat verwenden, aber der Prozess ist komplexer.
After dem Herunterladen des .p8 laden Sie es in Firebase hoch. Öffnen Sie das Cloud Messaging Registerkarte in Ihren Firebase-Projekt-Einstellungen, laden Sie das Datei hoch und geben Sie die Details für die Key-ID und Ihre Team-ID von iOS ein.
Erstellen Sie nun Änderungen an Ihrem Xcode-Projekt, indem Sie Folgendes ausführen:
npx cap open iosKopieren Sie das GoogleService-Info.plist Datei, die Sie von Firebase heruntergeladen haben, in Ihr iOS-Projekt. Ziehen Sie die Datei in das Xcode-Projekt innerhalb der app/app-Folder und wählen Sie Copy items if needed.
Als Nächstes fügen Sie einen neuen Pod für die Firebase-Abhängigkeit in der ios/App/Podfile:
target 'App' do
capacitor_pods
# Add your Pods here
pod 'Firebase/Messaging'
endFühren Sie die native Plattform mit diesem Befehl aktualisieren:
npx cap update iosÄndern Sie die native Swift code in ios/App/App/AppDelegate.swift um sich bei Firebase anzumelden und den richtigen Token an Ihre App zurückzugeben.
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)
}
}
}
}Fügen Sie schließlich die Fähigkeit für Push-Nachrichten innerhalb Ihres Xcode-Projekts hinzu.
Bauen Sie nun Ihre App und integrieren Sie Push-Nachrichten.
Ionic Push-Notification-Integration
Erstellen Sie eine Dienstleistung und eine neue Seite in Ihrem Ionic-Projekt:
ionic g service services/fcm
ionic g page pages/detailsAktualisieren Sie die Routen in app/app-routing.module.ts um die neue Seite mit einem dynamischen ID zu beinhalten:
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 { }Erstellen Sie einen Dienst, um Push-Benachrichtigungen zu verwalten in 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}`);
}
}
);
}
}Aufrufen Sie die initPush() Funktion in 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();
});
}
}Verarbeiten Sie die Informationen auf der Details-Seite in 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();
}
}Anzeigen Sie die Details in 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>Bauen Sie die App, synchronisieren Sie Ihre Änderungen und deployen Sie sie auf Ihrem Gerät.
ionic build
npx cap syncJetzt können Sie mit Firebase Push-Benachrichtigungen senden.
Pushbenachrichtigungen mit Firebase senden
Es gibt mehrere Möglichkeiten, Pushbenachrichtigungen mit Firebase zu senden.
Gerätespezifische Testung
Nachdem Sie Ihre App auf einem Gerät bereitgestellt haben, können Sie die Konsole-Protokolle überprüfen, um den Token nach der Registrierung zu sehen. Verwenden Sie diesen Token, um eine gezielte Testbenachrichtigung zu senden und bestätigen, dass Ihre Integration funktioniert. In Firebase gehen Sie zu Cloud Messaging und wählen Sie Testnachricht sendenHinzufügen Sie den Geräte-Token aus den Protokollen.
Wenn alles korrekt eingerichtet ist, sollten Sie eine Pushbenachrichtigung auf Ihrem Gerät sehen.
Push-Nachricht mit Payload
Um eine Push-Nachricht mit zusätzlichen Informationen zu testen, folgen Sie dem Wizard auf derselben Seite, um allgemeine Informationen zu spezifizieren und die Plattform auszuwählen, die Sie anpeilen möchten. Fügen Sie Zusätzliche Optionen Um einen Payload mit Ihrer Push-Nachricht zu senden.
In der Erweiterten Optionen Abschnitt fügen Sie ein Benutzerdefiniertes Datenpaar hinzu. Zum Beispiel können Sie den Schlüssel und einen Wert Ihrer Wahl verwenden. Diese Daten werden im App verwendet, um zur Details-Seite mit der angegebenen ID zu navigieren. detailsId Nachdem Sie die Push-Nachricht gesendet haben, sollte Ihre App sie empfangen und die Details-Seite mit der angegebenen ID anzeigen, wenn die Benachrichtigung angeklickt wird.
Mit Firebase
Using Firebase API
You can also send push notifications programmatically using the Firebase API. To do this, you need to obtain the Server-Schlüssel aus Ihren Firebase-Projekt-Einstellungen unter der Cloud Messaging Registerkarte.
Mit dem Server-Schlüssel können Sie einen POST-Antrag an die Firebase API senden, mit dem erforderlichen Payload. Hier ist ein Beispiel mit Node.js und der request Bibliothek:
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);
}
});Ersetzen YOUR_SERVER_KEY und YOUR_DEVICE_TOKEN mit Ihrem tatsächlichen Server-Schlüssel und Geräte-Token. Führen Sie das Skript aus, und Ihr Gerät sollte die Push-Nachricht mit dem benutzerdefinierten Payload erhalten.
Das ist alles! Sie haben erfolgreich Push-Nachrichten in Ihrer Ionic Capacitor-App mit Firebase integriert. Jetzt können Sie Push-Nachrichten an Ihre Benutzer auf beiden Android- und iOS-Plattformen senden.
Weitermachen Sie mit Ionic Capacitor Push-Nachrichten mit Firebase: Eine Schritt-für-Schritt-Anleitung
Wenn Sie Ionisch Capacitor Push-Benachrichtigungen mit Firebase: Ein Schritt-für-Schritt-Leitfaden um die Migration und die Betriebsabläufe zu planen und zu verbinden mit Capgo Enterprise zur Produktworkflow in Capgo Enterprise Ionische Enterprise-Plugin-Alternativen zur Produktworkflow in Ionische Enterprise-Plugin-Alternativen Capgo Alternativen zur Produktworkflow in Capgo Alternativen Capgo Consulting zur Produktworkflow in Capgo Consulting und Capgo Premium Support zur Produktworkflow in Capgo Premium Support.
