In diesem Tutorial werden wir Push-Benachrichtigungen in einer Ionic Capacitor-App mit Firebase integrieren. Für einen gepflegten Capacitor-Plugin mit Unterstützung für Firebase Cloud Messaging, siehe @capgo/capacitor-firebase-messaging. Sie benötigen keinen spezifischen Dienst für dies, aber Sie müssen mehrere 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.
Zuerst werden wir eine Ionic-App mit Capacitor aktivieren und unsere package id, die eindeutige Identifikator für Ihre App ist. Dann werden wir die App erstellen und die nativen Plattformen hinzufügen.
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 um Ihren appIdAllerdings müssen Sie den id in allen Dateien ersetzen, wenn diese bereits existieren, da Capacitor nur den Ordner einmal erstellt und den id selbst nicht aktualisiertin der capacitor.config.jsonkönnen Sie auch Optionen wie die Aktualisierung der Badge-Anzahl, das Abspielen eines Sounds bei einem Push und das Anzeigen einer Benachrichtigung bei Eingang einer Benachrichtigung
{
"appId": "com.appdactic.devpush",
"appName": "pushApp",
"bundledWebRuntime": false,
"npmClient": "npm",
"webDir": "www",
"plugins": {
"SplashScreen": {
"launchShowDuration": 0
},
"PushNotifications": {
"presentationOptions": ["badge", "sound", "alert"]
}
},
"cordova": {}
}Konfigurieren Sie nun Push-Benachrichtigungen außerhalb der App.
Firebase-Konfiguration
Beginnen Sie damit, eine neue Firebase-Projekt zu erstellen oder verwenden Sie eine bestehende. Geben Sie einem neuen Projekt einen Namen und Standardoptionen.
Wenn Sie ein neues App haben, sollten Sie „Mit der App-Installation beginnen, indem Sie Firebase in Ihre App hinzufügen“ in Ihrem App-Dashboard sehen. 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 Ihren __CAPGO_KEEP_0__ 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
Als Nächstes konfigurieren Sie die Plattformen.
Android-Push-Vorbereitung
Für Android verschieben Sie die google-services.json die Datei, die Sie heruntergeladen haben, in das Ordner android/app/ android-push-Datei
iOS-Konfiguration
iOS Push Vorbereitung
Dieser Teil ist komplizierter. Zuerst, erstellen Sie ein App-ID für Ihre App innerhalb der Identifikationsliste Ihrer Apple-Entwicklerkonto. Stellen Sie sicher, dass Sie die Push-Benachrichtigungsfähigkeit aus der Liste auswählen.
Die Bundle-ID sollte dasselbe wie Ihre App-ID innerhalb Capacitor und Firebase sein.
Jetzt, erstellen Sie eine Schlüssel und aktiviere das Apple Push Notifications-Service (APNs). 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.
Nach dem Herunterladen des .p8 -Dateien, laden Sie es in Firebase hoch. Öffnen Sie die Cloud Messaging -Karte in Ihren Firebase-Projekt-Einstellungen, laden Sie das Datei hoch und geben Sie die Details für die Schlüssel-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 den Datei, die Sie von Firebase heruntergeladen haben, in Ihr iOS-Projekt ziehen. Ziehen Sie die Datei in das Xcode-Projekt innerhalb des Verzeichnisses app/app und wählen Sie Wenn nötig kopieren.
Nächste, fügen Sie 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 diesem Befehl:
npx cap update iosÄndern Sie den 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-Notification-Integration
Erstellen Sie ein Dienst 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 zum Handhaben von Push-Benachrichtigungen 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();
});
}
}Behandeln 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();
}
}Zeige die Details an __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>Bauen Sie die App, synchronisieren Sie Ihre Änderungen und deployen Sie sie 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.
Spezifische Geräte-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 Testnachricht sendenFügen Sie den Geräte-Token aus den Protokollen hinzu.
Wenn alles korrekt eingerichtet ist, sollten Sie auf Ihrem Gerät eine Push-Nachricht 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, auf die Sie zielen möchten. Add zusätzliche Optionen um eine Payload mit Ihrer Push-Nachricht zu senden.
In der Erweiterten Optionen Abschnitt, fügen Sie ein Benutzerdefiniertes Daten Schlüssel-Wert-Paar hinzu. Zum Beispiel können Sie den Schlüssel verwenden. detailsId und einen Wert Ihrer Wahl. Diese Daten werden im App verwendet, um zur Details-Seite mit der angegebenen ID zu navigieren.
Nach dem Versand der Push-Benachrichtigung 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 den 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 übergeben 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-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 " Ionic Capacitor Push-Nachrichten mit Firebase: Eine Schritt-für-Schritt-Anleitung um die Migration und die Unternehmensoperationen zu planen, verbinden Sie es mit " Capgo Enterprise" für den Produktworkflow in Capgo Enterprise, " Ionic Enterprise Plugin Alternativen" für den Produktworkflow in Ionic Enterprise Plugin Alternativen, " Capgo Alternativen" für den Produktworkflow in Capgo Alternativen Capgo Consulting für den Produktworkflow in Capgo Consulting, und Capgo Premium Support für den Produktworkflow in Capgo Premium Support.
