In diesem Tutorial integrieren wir Push Notifications in eine Ionic Capacitor App mit Firebase. Für ein gepflegtes Capacitor Plugin mit Firebase Cloud Messaging Support schau hier: @capgo/capacitor-firebase-messaging. Du brauchst dafür keinen speziellen Service, musst aber einige Dinge vorab konfigurieren. Firebase ist eine exzellente Wahl, da es für Android erforderlich ist und du es einfach nutzen kannst, um Benachrichtigungen ohne Datenbank zu senden.
Zuerst erstellen wir eine Ionic App mit aktiviertem Capacitor und legen unsere Package-IDfest, die als eindeutige Kennung für deine App dient. Danach 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 androidFalls du bereits eine App hast, kannst du die capacitor.config.json anpassen, um deine appIdeinzutragen. Falls deine nativen Ordner jedoch schon existieren, musst du die ID in allen Dateien manuell ersetzen, da Capacitor den Ordner nur einmal erstellt und die ID nicht automatisch aktualisiert. In der capacitor.config.json, du kannst auch Optionen wie das Aktualisieren der Badge-Anzahl, das Abspielen eines Sounds bei Push-Benachrichtigungen oder das Anzeigen eines Alerts bei Eingang einer Benachrichtigung festlegen.
{
"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 die Push-Notifications außerhalb der App.
Firebase-Konfiguration
Beginne damit, ein neues Firebase-Projekt zu erstellen oder nutze ein bestehendes. Gib einen Namen und Standardoptionen für ein neues Projekt an.
Wenn du eine neue App hast, solltest du „Get started by adding Firebase to your app“ in deinem App-Dashboard sehen. Andernfalls klicke auf das Zahnrad-Icon und gehe zu Projekteinstellungen um eine App hinzuzufügen.
Der Dialog für iOS und Android sieht ähnlich aus; wichtig ist, dass du deine Package ID für die Apps.
Lade nach dem ersten Schritt folgende Dateien herunter:
- google-services.json Datei für Android
- GoogleService-info.plist Datei für iOS
Konfiguriere als Nächstes die Plattformen.
Android-Push-Vorbereitung
Verschiebe für Android die google-services.json heruntergeladene Datei nach android/app/ Ordner.
Das war's für Android. Jetzt konfigurieren wir iOS.
iOS-Push-Vorbereitung
Dieser Teil ist etwas komplexer. Zuerst erstellst du eine App ID für deine App in der Identifiers-Liste deines Apple Developer Accounts. Achte darauf, die Push Notifications Capability aus der Liste auszuwählen.
Der Bundle-ID muss mit deiner App-ID in Capacitor und Firebase übereinstimmen.
Jetzt erstelle einen Key und aktiviere den Apple Push Notifications service (APNs). Falls du das Limit an Keys erreicht hast, kannst du stattdessen einen bestehenden Key oder ein Zertifikat nutzen, was jedoch aufwendiger ist.
Nach dem Download der .p8 -Datei lade sie bei Firebase hoch. Öffne Cloud Messaging Öffne in deinen Firebase-Projekteinstellungen den Tab, lade die Datei hoch und gib die Details für die Key ID und deine Team ID von iOS ein.
Führe nun die folgenden Änderungen an deinem Xcode-Projekt durch:
npx cap open iosKopiere den GoogleService-Info.plist die Datei, die du von Firebase heruntergeladen hast, in dein iOS-Projekt. Ziehe die Datei in das Xcode-Projekt in den Ordner app/app und wähle Objekte kopieren, falls nötig.
Füge als Nächstes einen neuen Pod für die Firebase-Dependency in der ios/App/Podfile:
target 'App' do
capacitor_pods
# Add your Pods here
pod 'Firebase/Messaging'
endAktualisiere die native Plattform mit diesem Befehl:
npx cap update iosÄndere den nativen Swift code in ios/App/App/AppDelegate.swift um sich bei Firebase zu registrieren und den korrekten Token an deine 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üge abschließend die Capability für Push Notifications in deinem Xcode-Projekt hinzu.
Baue nun deine App und integriere die Push Notifications.
Ionic Push-Notification-Integration
Erstelle einen Service und eine neue Page in deinem Ionic-Projekt:
ionic g service services/fcm
ionic g page pages/detailsAktualisiere das Routing in app/app-routing.module.ts um die neue Page mit einer dynamischen ID einzubinden:
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 { }Erstelle einen Service zur Handhabung der Push Notifications 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}`);
}
}
);
}
}Rufe 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 Detailseite 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 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>Baue die App, synchronisiere deine Änderungen und deploye sie auf dein Gerät.
ionic build
npx cap syncJetzt kannst du Push-Benachrichtigungen mit Firebase senden.
Push-Notifications mit Firebase senden
Es gibt verschiedene Möglichkeiten, Push-Benachrichtigungen mit Firebase zu versenden.
Test auf einem bestimmten Gerät
Nachdem du deine App auf einem Gerät deployed hast, kannst du die Console Logs prüfen, um den Token nach der Registrierung zu sehen. Nutze diesen Token, um einen gezielten Test-Push zu senden und deine Integration zu bestätigen. Gehe in Firebase zu Cloud Messaging und wählen Sie Testnachricht senden. Fügen Sie den Device Token aus den Logs hinzu.
Wenn alles korrekt eingerichtet ist, sollte eine Push-Benachrichtigung auf Ihrem Gerät erscheinen.
Push-Nachricht mit Payload
Um eine Push-Benachrichtigung mit zusätzlichen Informationen zu testen, folgen Sie dem Wizard auf derselben Seite, um allgemeine Infos anzugeben und die Zielplattform zu wählen. Fügen Sie weitere Optionen hinzu, um ein Payload mit Ihrer Push-Benachrichtigung zu senden.
Im Erweiterte Optionen Abschnitt, füge ein Custom data Key-Value-Paar hinzu. Du kannst zum Beispiel den Key detailsId und einen beliebigen Value verwenden. Diese Daten werden in der App genutzt, um mit der angegebenen ID zur Detailseite zu navigieren.
Nach dem Senden der Push-Benachrichtigung sollte deine App diese empfangen und beim Tippen auf die Benachrichtigung die Detailseite mit der angegebenen ID anzeigen.
Mit Firebase API
Du kannst Push-Benachrichtigungen auch programmatisch über die Firebase API senden. Dazu musst du den folgenden erhalten: Server-Key aus deinen Firebase-Projekteinstellungen unter Cloud Messaging .
Mit dem Server-Key kannst du einen POST-Request an die Firebase API mit dem erforderlichen Payload senden. Hier ist ein Beispiel mit Node.js und der request Library:
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);
}
});Ersetze YOUR_SERVER_KEY und YOUR_DEVICE_TOKEN mit deinem echten Server-Key und Device-Token. Führe das Skript aus, und dein Gerät sollte die Push-Notification mit dem benutzerdefinierten Payload erhalten.
Das war's! Du hast Push-Notifications mit Firebase erfolgreich in deine Ionic Capacitor App integriert. Jetzt kannst du Push-Notifications an deine Nutzer auf Android und iOS senden.
Weiterlesen: Ionic Capacitor Push Notifications mit Firebase: Eine Schritt-für-Schritt-Anleitung
Wenn du es nutzt Ionic Capacitor Push Notifications mit Firebase: Schritt-für-Schritt-Anleitung um Migration und Enterprise-Betrieb zu planen, verbinde es mit Capgo Enterprise für den Produkt-Workflow in Capgo Enterprise, Ionic Enterprise Plugin-Alternativen für den Produkt-Workflow in Ionic Enterprise Plugin-Alternativen, Capgo Alternativen für den Produkt-Workflow in Capgo Alternativen, Capgo Beratung für den Produkt-Workflow in Capgo Consulting und Capgo Premium-Support für den Produkt-Workflow in Capgo Premium Support.
