In dieser Anleitung werden wir Push-Benachrichtigungen in einem Ionic Capacitor-App mit Firebase integrieren. Sie benötigen für dies keinen spezifischen Dienst, 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.
Zuerst werden wir ein Ionic-App mit Capacitor aktiviert erstellen und unsere Paket-ID, welches die einzigartige 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 den capacitor.config.json anpassen, um Ihre appIdeinzufügen. Allerdings müssen Sie, wenn Ihre nativen Ordner bereits existieren, den ID-Wert in allen Dateien ersetzen, in denen er erscheint, da Capacitor nur den Ordner einmal erstellt und den ID-Wert selbst nicht aktualisiert.In der capacitor.config.jsonkö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, festlegen.
{
"appId": "com.appdactic.devpush",
"appName": "pushApp",
"bundledWebRuntime": false,
"npmClient": "npm",
"webDir": "www",
"plugins": {
"SplashScreen": {
"launchShowDuration": 0
},
"PushNotifications": {
"presentationOptions": ["badge", "sound", "alert"]
}
},
"cordova": {}
}Lassen Sie uns nun Push-Benachrichtigungen außerhalb der App konfigurieren.
Firebase-Konfiguration
Beginnen Sie mit einem neuen Firebase-Projekt zu erstellen oder ein bestehendes zu verwenden. Geben Sie einem neuen Projekt einen Namen und Standardoptionen.
Wenn Sie ein neues App haben, sollten Sie “Mit Firebase in Ihrer App beginnen” 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 her:
- __CAPGO_KEEP_0__ Datei für Android
- __CAPGO_KEEP_0__ Datei für iOS
Als Nächstes konfigurieren Sie die Plattformen.
Vorbereitung für Android-Push
Für Android verschieben Sie die __CAPGO_KEEP_0__ heruntergeladene Datei in das Ordner. android/app/
Das ist alles 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 Liste der Identifikatoren Ihres Apple-Entwicklerkontos erstellen. Stellen Sie sicher, dass Sie die Push-Benachrichtigungsfähigkeit aus der Liste auswählen. ionic-ios-push-id
Bundle-ID sollte der gleiche sein wie Ihre App-ID innerhalb von __CAPGO_KEEP_0__ und Firebase. should be the same as your App ID within Capacitor and Firebase.
Erstens, erstelle eine Key und aktiviere das Apple Push Notifications-Dienst (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 die 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 die Datei in das Xcode-Projekt innerhalb des app/app-Ordners und wählen Sie Copy items if needed.
Als Nächstes 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'
end-Datei ein.
npx cap update iosModify the native Swift code in Ändern Sie die native Swift __CAPGO_KEEP_0__ in ios/App/App/AppDelegate.swift
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)
}
}
}
}um sich bei Firebase anzumelden und den richtigen Token an Ihre App zurückzugeben. Schließlich fügen Sie die Fähigkeit für Push-Benachrichtigungen innerhalb Ihres Xcode-Projekts hinzu.
Bauen Sie nun Ihre App und integrieren Sie Push-Nachrichten.
Ionic-Push-Nachrichten-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 eine Dienstleistung zum Handhaben von Push-Nachrichten 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 Detailsseite in __CAPGO_KEEP_0__:
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 __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 syncSie können jetzt Push-Benachrichtigungen mit Firebase senden.
Senden von Push-Benachrichtigungen mit Firebase
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 Ihre Integration zu überprüfen. In Firebase gehen Sie zu Cloud Messaging und wählen Sie Testnachricht senden. Fügen Sie den Geräte-Token aus den Protokollen hinzu.
Wenn alles korrekt eingerichtet ist, sollten Sie auf Ihrem Gerät eine Benachrichtigung 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 ansteuern möchten. Fügen Sie zusätzliche Optionen hinzu, um eine Payload mit Ihrer Push-Nachricht zu senden.
In der Erweiterten Optionen Abschnitt, fügen Sie ein Benutzerdefinierte Daten Ein 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-Nachricht 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-Nachrichten 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 Karte abrufen. Mit dem Server-Schlüssel können Sie einen POST-Antrag an Firebase __CAPGO_KEEP_0__ senden, wobei der erforderliche Payload mitgeliefert wird. Hier ist ein Beispiel mit Node.js und der
With the server key, you can send a POST request to the Firebase API with the required payload. Here’s an example using Node.js and the request library:__CAPGO_KEEP_0__
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 Sie 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-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.
Bleiben Sie bei Ionic Capacitor Push-Benachrichtigungen mit Firebase: Eine Schritt-für-Schritt-Anleitung
Wenn Sie Ionic Capacitor Push-Benachrichtigungen mit Firebase: Eine Schritt-für-Schritt-Anleitung zum Planen der Migration und Unternehmensoperationen verwenden, 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 Beratung für den Produktworkflow in Capgo Beratung und Capgo Premium Support für den Produktworkflow in Capgo Premium Support.
