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-Messaging. Sie benötigen keinen spezifischen Dienst, aber Sie müssen mehrere Dinge vorher konfigurieren. Firebase ist eine gute Wahl, da sie für Android erforderlich ist und Sie leicht Benachrichtigungen senden können, ohne die Datenbank zu verwenden.
Zuerst erstellen wir eine Ionische Anwendung mit Capacitor aktiviert und legen unsere Package-IDfest, 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 zur Einbindung Ihres appId . Wenn Ihre ursprünglichen Ordner jedoch bereits existieren, müssen Sie die ID in allen Dateien ersetzen, in denen sie erscheint, da Capacitor den Ordner nur einmal erstellt und won’t die ID selbst aktualisieren . In der capacitor.config.jsonSie können auch Optionen wie das Aktualisieren der Badge-Anzahl, das Abspielen eines Sounds bei einer Push-Nachricht und das Anzeigen einer Benachrichtigung anlegen.
{
"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 mit 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 “Mit Firebase zu 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.
Der Dialog für beide iOS und Android sieht ähnlich aus, und das Wichtige ist, dass Sie Ihre 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 die google-services.json die Datei, die Sie heruntergeladen haben, in das Ordner android/app/ folder.
Das ist alles für Android. Jetzt konfigurieren wir iOS.
Konfigurieren Sie nun iOS.
Diese Funktion ist komplexer. Zuerst müssen Sie Erstellen Sie einen App-ID für Ihre App innerhalb der Identifikatorenliste. die Push-Benachrichtigungsfähigkeit aus der Liste auswählen. Wählen Sie die Push-Benachrichtigungsfunktion aus der Liste
The Jetzt müssen Sie sollte mit Ihrem App-ID innerhalb von Capacitor und Firebase identisch sein.
und die Fähigkeit für Push-Benachrichtigungen aktivieren. 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 sie in Firebase hoch. Öffnen Sie die Cloud Messaging Registerkarte in Ihren Firebase-Projekt-Einstellungen, laden Sie die Datei hoch und geben Sie die Details für die Schlüssel-ID und Ihre Team-ID von iOS ein.
Jetzt ändern Sie Ihre Xcode-Projektdatei, 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 des Ordners app/app, und wählen Sie Kopieren Sie die Dateien, wenn erforderlich.
Als Nächstes fügen Sie ein neues Pod für die Firebase-Abhängigkeit in dem 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)
}
}
}
}Schließlich fügen Sie die Fähigkeit für Push-Benachrichtigungen innerhalb Ihres Xcode-Projekts hinzu.
Jetzt bauen Sie Ihre App und integrieren Sie Push-Benachrichtigungen.
Ionische Push-Benachrichtigungsintegration
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 zum Verwalten von Push-Benachrichtigungen Dienste/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();
});
}
}Behandeln Sie die Informationen auf der Details-Seite in Seiten/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 Seiten/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.
Push-Benachrichtigungen mit Firebase senden
Es gibt mehrere Möglichkeiten, Push-Benachrichtigungen mit Firebase zu senden.
Gerätespezifische Testanwendung
Nachdem Sie Ihre App auf einem Gerät deployt 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 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 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 Assistenten 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 Erweiterten Optionen Abschnitt fügen Sie ein Benutzerdaten hinzu. 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.
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 API
Sie können auch Push-Benachrichtigungen programmatisch mithilfe des Firebase API. verwenden. Dazu müssen Sie die Server-Schlüssel aus Ihren Firebase-Projekt-Einstellungen unter der Cloud Messaging tab.
Mit dem Server-Schlüssel können Sie einen POST-Antrag an die Firebase API senden, wobei die 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 empfangen.
Das ist alles! Sie haben erfolgreich Push-Nachrichten in Ihrem 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 __CAPGO_KEEP_0__-Push-Nachrichten mit Firebase verwenden Ionic Capacitor-Push-Nachrichten mit Firebase: Eine Schritt-für-Schritt-Anleitung zum Planen der Migration und Unternehmensoperationen, verbinden Sie es mit für den Produktworkflow in Capgo Enterprise für den Produktworkflow in Capgo Enterprise, Ionic Enterprise Plugin Alternativen für das Produktworkflow in Ionic Enterprise Plugin Alternativen, für den Produktworkflow in Capgo Alternativen für den Produktworkflow in Capgo Alternativen, Capgo Beratung für den Produktworkflow in Capgo Consulting, und Capgo Premium Support für den Produktworkflow in Capgo Premium Support.
