In diesem Tutorial werden wir Pushbenachrichtigungen in einer Ionic Capacitor-App mit Firebase integrieren. Für einen gepflegten Capacitor-Plugin mit Unterstützung für Firebase Cloud Messaging, sehen Sie bitte @capgo/capacitor-firebase-messagingSie benötigen für diese Funktion keinen speziellen Dienst, aber Sie müssen einige Dinge vorher konfigurieren. Firebase ist eine hervorragende Wahl, da sie für Android erforderlich ist und Sie leicht Benachrichtigungen senden können, ohne die Datenbank zu verwenden.
Zuerst erstellen wir eine Ionic-App mit Capacitor aktiviert und legen unseren Paket-Id, der eindeutige Identifier 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 den capacitor.config.json anpassen, um Ihren appIdeinzufügen. Allerdings müssen Sie, wenn Ihre nativen Ordner bereits existieren, den Id in allen Dateien ersetzen, da Capacitor nur den Ordner einmal erstellt und den Id selbst nicht aktualisiert. 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, 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": {}
}Now, lassen Sie die Push-Benachrichtigungen außerhalb der App konfigurieren.
Firebase-Konfiguration
Beginnen Sie mit der Erstellung eines neuen Firebase-Projekts oder Verwendung eines bestehenden Projekts. Geben Sie einen Namen und Standardoptionen für ein neues Projekt an.
Wenn Sie ein neues App haben, sollten Sie sehen “Mit der Firebase-Konfiguration Ihrer App beginnen” 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 Ihren Package-Id verwenden für die Apps.
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, bewegen Sie die google-services.json heruntergeladene Datei in den android/app/ Fachordner.
Das ist alles für Android. Jetzt konfigurieren wir iOS.
iOS-Push-Vorbereitung
Diese Teile sind komplexer. Zuerst, einen App-Id für Ihre App innerhalb der Identifikationsliste von Ihrem Apple-Entwicklerkonto erstellen. Stellen Sie sicher, dass Sie die Push-Benachrichtigungsfähigkeit aus der Liste auswählen.
Das Bundle-ID sollte gleich sein wie dein App-ID innerhalb von __CAPGO_KEEP_0__ und Firebase. should be the same as your App ID within Capacitor and Firebase.
Jetzt Erstelle einen Schlüssel und aktiviere den Apple Push Notifications service (APNs)Wenn du die maximale Anzahl an Schlüsseln erreicht hast, kannst du einen bestehenden Schlüssel oder ein Zertifikat verwenden, aber der Prozess ist komplexer.
Nach dem Herunterladen des .p8 Dateien, upload sie in Firebase. Öffne 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.
Ändern Sie nun Ihre Xcode-Projekt, indem Sie Folgendes ausführen:
npx cap open iosKopieren Sie die 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 Kopieren Sie die Artikel, wenn erforderlich.
Fügen Sie als nächstes eine neue 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 Befehl:
npx cap update iosÄndern Sie die native Swift code in ios/App/App/AppDelegate.swift 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 einen 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 einzubeziehen:
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 Umgang mit 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 den 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();
});
}
}Verarbeite 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 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>Baut das App, synchronisiere deine Änderungen und deploye es auf deinem Gerät.
ionic build
npx cap syncJetzt kannst du Push-Benachrichtigungen mit Firebase senden.
Mit Firebase Push-Benachrichtigungen senden
Es gibt mehrere Möglichkeiten, Push-Benachrichtigungen mit Firebase zu senden.
Spezifische Geräte-Test
Nachdem du deine App auf einem Gerät deployt hast, kannst du die Konsole-Logs überprüfen, um den Token nach der Registrierung zu sehen. Verwende diesen Token, um eine gezielte Test-Benachrichtigung zu senden und bestätige, dass deine Integration funktioniert. In Firebase gehst du zu Cloud Messaging und wählen Senden Sie einen Testnachricht. Fügen Sie dem 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. Fügen Sie zusätzliche Optionen hinzu, um eine Payload mit Ihrer Push-Nachricht zu senden.
In der Erweiterte Optionen Abschnitt, fügen Sie ein Benutzerdefinierte Daten Schlüssel-Wert-Paar. 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 die Push-Benachrichtigung gesendet wurde, sollte Ihre App sie empfangen und die Details-Seite mit der angegebenen ID anzeigen, wenn die Benachrichtigung angeklickt wird.
Mit Firebase __CAPGO_KEEP_0__
Sie können auch Push-Benachrichtigungen programmatisch mithilfe von Firebase API senden. Dazu müssen Sie den
You can also send push notifications programmatically using the Firebase API. To do this, you need to obtain the aus Ihren Firebase-Projekt-Einstellungen unter der Cloud Messaging Registerkarte abrufen. bun
Mit der Server-Schlüssel können Sie einen POST-Antrag an die Firebase API mit dem erforderlichen Payload senden. Hier ist ein Beispiel mit Node.js und dem 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 Ihrer 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 war's! Sie haben erfolgreich Push-Benachrichtigungen in Ihrem Ionic Capacitor-App mit Firebase integriert. Jetzt können Sie Push-Benachrichtigungen an Ihre Benutzer auf beiden Android- und iOS-Plattformen senden.
Bleiben Sie bei Ionic Capacitor Push-Benachrichtigungen mit Firebase: Ein Schritt-für-Schritt-Leitfaden
Wenn Sie Cloudflare verwenden Ionic Capacitor Push-Benachrichtigungen mit Firebase: Ein Schritt-für-Schritt-Leitfaden Um die Migration und die Unternehmensoperationen zu planen, verbinden Sie es mit Unternehmen von Capgo 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.
