In diesem Tutorial integrieren wir Push-Benachrichtigungen in einer ionischen Capacitor-Anwendung mit Firebase. Hierfür ist kein spezielles Dienstleistungsangebot erforderlich, aber Sie müssen einige Dinge vorher konfigurieren. Firebase ist eine hervorragende Wahl, da es für Android erforderlich ist und Sie es leicht verwenden können, um Benachrichtigungen ohne die Verwendung der Datenbank zu senden.
Zunächst erstellen wir eine ionische Anwendung mit Capacitor aktiviert und legen unsere Paket-ID, die eindeutige Identifikationsnummer für Ihre Anwendung ist. Dann bauen wir die Anwendung 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 Anwendung haben, können Sie die capacitor.config.json anpassen, um Ihre appId. Wenn jedoch Ihre ursprünglichen Ordner bereits existieren, müssen Sie den in allen Dateien auftauchenden ID-Wert durch Capacitor ersetzen, da Capacitor den Ordner nur einmal erstellt und den ID-Wert selbst nicht aktualisiert. won’t update the id itself. In der capacitor.config.json, können Sie auch Optionen wie die Aktualisierung der Badge-Zahl, das Abspielen eines Sounds bei Push-Benachrichtigungen und das Anzeigen einer Benachrichtigung bei Ankunft einer Benachrichtigung angeben.
{
"appId": "com.appdactic.devpush",
"appName": "pushApp",
"bundledWebRuntime": false,
"npmClient": "npm",
"webDir": "www",
"plugins": {
"SplashScreen": {
"launchShowDuration": 0
},
"PushNotifications": {
"presentationOptions": ["badge", "sound", "alert"]
}
},
"cordova": {}
}Now, let’s configure push notifications outside the app.
Firebase-Konfiguration
Starten Sie mit der Erstellung eines neuen Firebase-Projekts oder verwenden Sie ein bestehendes Projekt. Geben Sie einen Namen und Standardoptionen für ein neues Projekt an.
Wenn Sie ein neues App haben, sollten Sie in Ihrem App-Dashboard. Ansonsten klicken Sie auf das Zahnrad-Symbol und gehen Sie zu Projekt-Einstellungen um eine App hinzuzufügen.
Das Dialogfeld für beide iOS und Android sieht ähnlich aus, und das Wichtige ist, dass Sie Ihr 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 __CAPGO_KEEP_0__ Datei, die Sie heruntergeladen haben, in den __CAPGO_KEEP_1__ Ordner.
Das war's für Android. Jetzt konfigurieren wir iOS.
iOS-Push-Vorbereitung
Dieser Teil ist komplizierter. Zuerst müssen Sie einen App-Id für Ihre App in der Identifikationsliste erstellen. Ihr Apple Developer-Konto. Stellen Sie sicher, dass Sie die Push-Benachrichtigungsfähigkeit aus der Liste auswählen.
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)Dienst. Wenn Sie die maximale Anzahl an Schlüsseln erreicht haben, können Sie einen bestehenden Schlüssel oder ein Zertifikat verwenden, aber der Prozess ist komplexer.
Nach dem Herunterladen des .p8 Dateien, laden Sie es bei Firebase hoch. Öffnen Sie die 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.
Machen 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 das Datei in Ihr Xcode-Projekt innerhalb der app/app-Folder und wählen Sie Copy items if needed.
Fügen Sie als Nächstes ein neues Pod für die Firebase-Abhängigkeit in der ios/App/Podfile:
target 'App' do
capacitor_pods
# Add your Pods here
pod 'Firebase/Messaging'
endAktualisieren Sie die native Plattform mit dieser Befehlszeile:
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-Benachrichtigungen innerhalb Ihres Xcode-Projekts hinzu.
Bauen Sie nun Ihre App und integrieren Sie Push-Benachrichtigungen.
Ionic Push-Benachrichtigungsintegration
Erstellen Sie in Ihrem Ionic-Projekt einen Dienst und eine neue Seite:
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}`);
}
}
);
}
}Rufen 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();
}
}Zeigen 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 das App, synchronisieren Sie Ihre Änderungen und deployen Sie es auf Ihrem Gerät.
ionic build
npx cap syncJetzt können Sie Push-Benachrichtigungen mit Firebase senden.
Push-Benachrichtigungen mit Firebase senden
Es gibt mehrere Möglichkeiten, Push-Benachrichtigungen mit Firebase zu senden.
Gerätespezifischer Test
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 Test-Benachrichtigung zu senden, um sicherzustellen, dass Ihre Integration funktioniert. In Firebase gehen Sie zu Cloud Messaging und wählen Sie Test-Nachricht sendenfirebase-test-push
Push-Nachricht mit Payload
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 Test-Benachrichtigung zu senden, um sicherzustellen, dass Ihre Integration funktioniert. In Firebase gehen Sie zu Cloud Messaging und wählen Sie Send test message. Fügen Sie den Geräte-Token aus den Protokollen hinzu.
Um eine Push-Nachricht mit zusätzlichen Informationen zu testen, folgen Sie dem Assistenten auf derselben Seite, um allgemeine Informationen zu spezifizieren und die Plattform auszuwählen, die Sie anvisieren möchten. Fügen Sie zusätzliche Optionen hinzu, um einen Payload mit Ihrer Push-Nachricht zu senden.
In der Erweiterten Optionen Sektion fügen Sie ein Benutzerdefiniertes Datenpaar zu. Zum Beispiel können Sie den Schlüssel detailsId und einen Wert Ihrer Wahl verwenden. Diese Daten werden im App verwendet, um zur Details-Seite mit der angegebenen ID zu navigieren.
Nach dem Senden der Push-Nachricht sollte Ihre App sie empfangen und die Details-Seite mit der angegebenen ID anzeigen, wenn die Benachrichtigung angeklickt wird.
Mit Firebase API
Sie können auch push-Benachrichtigungen programmatisch über die Firebase API senden. Dazu müssen Sie das Server-Schlüssel aus Ihren Firebase-Projekt-Einstellungen unter der Cloud Messaging Registerkarte abrufen.
Mit dem Server-Schlüssel können Sie einen POST-Antrag an die Firebase API senden, wobei der erforderliche Payload mitgeliefert wird. 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-Benachrichtigung mit dem benutzerdefinierten Payload erhalten.
Das ist alles! Sie haben erfolgreich push-Benachrichtigungen in Ihrer Ionic Capacitor-App mit Firebase integriert. Jetzt können Sie push-Benachrichtigungen an Ihre Benutzer auf beiden Android- und iOS-Plattformen senden.
