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-messagingNon hai bisogno di un servizio specifico per questo, ma devi configurare alcune cose prima. Firebase è un'ottima scelta poiché è richiesto per Android, e puoi utilizzarlo facilmente per inviare notifiche senza utilizzare il database.
In primo luogo, creeremo un'applicazione Ionic con Capacitor abilitato e specificeremo il nostro identificatore del pacchettoche è l'identificatore univoco per la tua app. Poi, costruiremo l'app e aggiungeremo le piattaforme native.
ionic start pushApp blank --type=angular --capacitor --package-id=com.appdactic.devpush
cd ./pushApp
ionic build
npx cap add ios
npx cap add androidSe già hai un'app, puoi modificare il capacitor.config.json per includere il tuo identificatore dell'app. Tuttavia, se i cartelle native già esistono, dovrai sostituire l'id in tutti i file in cui compare, poiché Capacitor crea la cartella una sola volta e non aggiorna l'id stesso. Nel__CAPGO_KEEP_0__.config.json capacitor.config.jsonpackage id
{
"appId": "com.appdactic.devpush",
"appName": "pushApp",
"bundledWebRuntime": false,
"npmClient": "npm",
"webDir": "www",
"plugins": {
"SplashScreen": {
"launchShowDuration": 0
},
"PushNotifications": {
"presentationOptions": ["badge", "sound", "alert"]
}
},
"cordova": {}
}Ora, configuriamo le notifiche push all'esterno dell'applicazione.
Configurazione Firebase
Inizia con creando un nuovo progetto Firebase o utilizzando uno esistente. Fornisci un nome e opzioni di default per un nuovo progetto.
Se hai un nuovo app, dovresti vedere “Inizia con l'aggiunta di Firebase all'app” nel pannello di controllo dell'app. Altrimenti, clicca l'icona del clessidra e vai a impostazioni del progetto per aggiungere un'app.
Il dialogo per entrambi iOS e Android assomiglia, e l'importante è utilizzare il tuo ID del pacchetto per le app.
Dopo lo step iniziale, scarica i seguenti file:
- file di configurazione per Firebase file per Android
- file di configurazione per iOS Configura quindi le piattaforme.
Preparazione per le notifiche push su Android
Per Android, sposta il
file di configurazione per Firebase il file che hai scaricato nella directory principale del tuo progetto Android. android/app/ cartella.
Ecco tutto per Android. Ora configuriamo iOS.
Preparazione di iOS Push
Questa parte è più complessa. In primo luogo, crea un ID App per il tuo app all'interno della lista degli identificatori del tuo account di sviluppatore Apple. Assicurati di selezionare la capacità di Push Notifications dalla lista. ionic-ios-push-id Il
This part is more complicated. First, create an App ID for your app within the identifiers list of your Apple Developer account. Make sure you select the Push Notifications capability from the list. ID del pacchetto deve essere lo stesso del tuo ID App all'interno di Capacitor e Firebase.
Ora, crea una Chiave e abilita il servizio di notifiche push per Apple (APNs) Se hai raggiunto il numero massimo di chiavi, puoi utilizzare una chiave esistente o un certificato al suo posto, ma il processo è più complesso.ios-developer-push-key
.p8 contesto: frammento di testo HTML da una stringa di Capgo UI più lunga (chiave genitrice `appflow_credentials_capgo_li1`). Pagina/area: Appflow comparison / migrazione marketing. Ruolo: elemento della lista a punti. Visto in: pagina ionic-appflow.astro. Preservare termini di prodotto e marchio di Capgo e termini di sviluppatore esattamente. Chiave del messaggio `appflow_credentials_capgo_li1` (Appflow Credentials Capgo Li1). | Frammento di testo HTML da una stringa di Capgo UI più lunga (chiave genitrice `appflow_credentials_desc`). Pagina/area: Appflow comparison / migrazione marketing. Ruolo: paragrafo di marketing o legale lungo. Visto in: pagina ionic-appflow.astro. Preservare termini di prodotto e marchio di Capgo e termini di sviluppatore esattamente. Chiave del messaggio `appflow_credentials_desc` (Appflow Credentials Desc). file, caricalo su Firebase. Apri la Cloud Messaging tab nella sezione Impostazioni del tuo progetto Firebase, carica il file e inserisci i dettagli per la chiave ID e il tuo ID di squadra da iOS.
Ora, apporta modifiche al tuo progetto Xcode eseguendo:
npx cap open iosCopia il file GoogleService-Info.plist che hai scaricato da Firebase nel tuo progetto iOS. Trascina il file nel progetto Xcode all'interno della cartella app/app, e seleziona Copia gli elementi se necessario.
Successivamente, aggiungi un nuovo Pod per la dipendenza Firebase nella ios/App/Podfile:
target 'App' do
capacitor_pods
# Add your Pods here
pod 'Firebase/Messaging'
endAggiorna la piattaforma nativa con questo comando:
npx cap update iosModifica la piattaforma nativa Swift code in ios/App/App/AppDelegate.swift registrare con Firebase e restituire il token corretto al tuo app.
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)
}
}
}
}Infine, aggiungi la Capacità per le Notifiche Push all'interno del tuo progetto Xcode.
Ora, costruisci il tuo app e integra le notifiche push.
Integrazione delle Notifiche Push di Ionic
Crea un servizio e una nuova pagina nel tuo progetto Ionic:
ionic g service services/fcm
ionic g page pages/detailsAggiorna la routing in app/app-routing.module.ts per includere la nuova pagina con un id dinamico:
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 { }Crea un servizio per gestire le notifiche push 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}`);
}
}
);
}
}Chiamare il initPush() funzione 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();
});
}
}Gestisci le informazioni sulla pagina dei dettagli 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();
}
}Visualizza i dettagli 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>Costruisci l'applicazione, sincronizza le tue modifiche e distribuiscila sul tuo dispositivo.
ionic build
npx cap syncOra, puoi inviare notifiche push con Firebase.
Inviare Notifiche Push con Firebase
C'è più di un modo per inviare notifiche push con Firebase.
Test di dispositivo specifico
Dopo aver distribuito l'app sul tuo dispositivo, puoi controllare i registri del console per vedere il token dopo la registrazione. Utilizza questo token per inviare una notifica push mirata di test per confermare che la tua integrazione funziona. In Firebase, vai a Messaggistica Cloud e seleziona Invia messaggio di prova. Aggiungi il token dispositivo dai log.
Se tutto è configurato correttamente, dovresti vedere una notifica push sul tuo dispositivo.
Messaggio Push con Payload
Per testare una notifica push con informazioni aggiuntive, segui il wizard sulla stessa pagina per specificare informazioni generali e selezionare il platform che desideri raggiungere. Aggiungi opzioni aggiuntive per inviare un payload con la tua notifica push.
Nel Opzioni avanzate Sezione, aggiungi un Dati personalizzati insieme di chiavi-valori. Ad esempio, puoi utilizzare la chiave detailsId e un valore di tua scelta. Questi dati verranno utilizzati nell'app per navigare alla pagina dei dettagli con l'id specificato.
Dopo aver inviato la notifica push, l'app dovrebbe riceverla e visualizzare la pagina dei dettagli con l'id specificato quando la notifica viene selezionata.
Utilizzando Firebase API
È possibile inviare notifiche push in modo programmatico utilizzando il Firebase API. Per farlo, è necessario ottenere la Chiave del server dal tuo progetto Firebase impostazioni nella sezione Cloud Messaging tabella.
Con la chiave del server, puoi inviare una richiesta POST al Firebase API con il payload richiesto. Ecco un esempio utilizzando Node.js e la request biblioteca:
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);
}
});Sostituisci YOUR_SERVER_KEY e YOUR_DEVICE_TOKEN context:Pagina/area: Sito web di marketing Capgo. Ruolo: Etichetta UI breve o elemento di navigazione. Visto in: pagina trust.astro. Chiave messaggio `e` (E).
That’s it! You’ve successfully integrated push notifications in your Ionic Capacitor app using Firebase. Now you can send push notifications to your users on both Android and iOS platforms.
È tutto! Hai integrato correttamente le notifiche push nel tuo app Ionic Capacitor utilizzando Firebase. Ora puoi inviare notifiche push ai tuoi utenti su entrambi i piattaforme Android e iOS.
Continua da qui: Ionic __CAPGO_KEEP_0__ Push Notifications con Firebase: Una Guida Passo dopo Passo Ionic Capacitor Push Notifications with Firebase: A Step-by-Step Guide Ionic __CAPGO_KEEP_0__ Push Notifications con Firebase: Una Guida Passo dopo Passo Capgo Enterprise Capgo Enterprise Alternativi per il Plugin di Enterprise di Ionic per il workflow del prodotto in Alternativi per il Plugin di Enterprise di Ionic Capgo Alternativi per il workflow del prodotto in Capgo Alternativi Capgo Consulenza per il workflow del prodotto in Capgo Consulenza, e Capgo Supporto Premium per il workflow del prodotto in Capgo Supporto Premium.
