In questo tutorial, integreremo le notifiche push in un app Ionic Capacitor utilizzando Firebase. Per un plugin mantenuto Capacitor con supporto per le notifiche di Firebase Cloud Messaging, vedi @capgo/capacitor-firebase-messagingNon hai bisogno di un servizio specifico per questo, ma devi configurare diverse 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'app Ionic con Capacitor abilitato e specificeremo il nostro package idQuale è 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 appId. Tuttavia, se già esistono le cartelle native, avrai bisogno di sostituire l'id in tutti i file in cui compare, poiché Capacitor crea la cartella una volta sola e non aggiorna l'id stesso. Nel capacitor.config.jsonpuoi specificare anche opzioni come l'aggiornamento del conteggio del badge, la riproduzione del suono al push e la visualizzazione di un avviso quando arriva una notifica.
{
"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 al di fuori dell'app.
Configurazione Firebase
Inizia creando un nuovo progetto Firebase o utilizzando uno esistente. Fornisci un nome e opzioni predefinite per un nuovo progetto. Se hai un nuovo app, dovresti vedere
“Inizia con l'aggiunta di Firebase alla tua app” nel pannello di controllo della tua app. Altrimenti, clicca l'icona del ingranaggio e vai a impostazioni del progetto per aggiungere un'app. Il dialogo per sia iOS che Android assomiglia, e l'importante è utilizzare il tuo
__CAPGO_KEEP_0__ per gli app. firebase-app-setup-ios
Dopo lo step iniziale, scarica i seguenti file:
- __CAPGO_KEEP_0__ file per Android
- __CAPGO_KEEP_1__ file per iOS
Successivamente, configura le piattaforme.
Preparazione per la Push di Android
Per Android, sposta il __CAPGO_KEEP_0__ file che hai scaricato nella cartella android/app/ folder.
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 della tua Apple Developer account. Assicurati di selezionare la capacità di notifiche Push dalla lista. ionic-ios-push-id L'ID Bundle dovrebbe essere lo stesso del tuo ID App all'interno di __CAPGO_KEEP_0__ e Firebase. That’s all for Android. Now let’s configure iOS.
This part is more complicated. First, create an App ID for your app within the identifiers list should be the same as your App ID within Capacitor and Firebase.
Now, 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 caricalo su Firebase. Apri la scheda Cloud Messaging nelle impostazioni del tuo progetto Firebase, caricalo e inserisci i dettagli per la Chiave ID e il tuo ID di Team da iOS. firebase-upload-ios-key
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 nativa Swift code in ios/App/App/AppDelegate.swift per registrarti 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 navigazione 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 la 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 __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();
}
}Visualizza i dettagli 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>Costruisci l'applicazione, sincronizza le tue modifiche e distribuiscila sul tuo dispositivo.
ionic build
npx cap syncOra puoi inviare notifiche push con Firebase.
Invio di Notifiche Push con Firebase
Ci sono diversi modi 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 un test di notifica mirata per confermare che la tua integrazione funziona. In Firebase, vai a Cloud Messaging e seleziona Inviare messaggio di test. Aggiungi il token del dispositivo dai log.
Se tutto è configurato correttamente, dovresti vedere una notifica push sul tuo dispositivo.
Messaggio di Push con Payload
Per testare una notifica push con informazioni aggiuntive, segui il wizard sulla stessa pagina per specificare informazioni generali e selezionare la piattaforma che desideri raggiungere. Aggiungi opzioni aggiuntive per inviare un payload con la tua notifica push.
Nella sezioni Opzioni avanzate aggiungi un Dati personalizzati insieme di chiave-valore. Ad esempio, puoi utilizzare la chiave detailsId e un valore di tua scelta. Questi dati saranno utilizzati nell'app per navigare alla pagina dei dettagli con l'id specificato.
Dopo l'invio della notifica push, l'app dovrebbe riceverla e visualizzare la pagina dei dettagli con l'id specificato quando la notifica viene selezionata.
Utilizzando Firebase API
Puoi anche inviare notifiche push in modo programmatico utilizzando il Firebase API. Per farlo, devi ottenere la Chiave del server dal tuo progetto Firebase impostazioni sotto il 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 libreria:
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 con la tua chiave del server e il token del dispositivo. Esegui lo script e il tuo dispositivo dovrebbe ricevere la notifica push con il payload personalizzato. YOUR_SERVER_KEY È tutto! Hai integrato con successo le notifiche push nel tuo app Ionic __CAPGO_KEEP_0__ utilizzando Firebase. Ora puoi inviare notifiche push ai tuoi utenti su entrambi i piattaforme Android e iOS. YOUR_DEVICE_TOKEN Continua con le notifiche push Ionic __CAPGO_KEEP_0__ con Firebase: una guida passo dopo passo
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.
Le notifiche push Ionic Capacitor con Firebase: una guida passo dopo passo
per pianificare la migrazione e le operazioni aziendali, connettilo con Capacitor Enterprise per il workflow del prodotto in __CAPGO_KEEP_0__ Enterprise, Capgo Enterprise for the product workflow in Capgo Enterprise, Sostituisci e con la tua chiave del server e il token del dispositivo. Esegui lo script, e il tuo dispositivo dovrebbe ricevere la notifica push con il payload personalizzato. Alternative per il flusso di lavoro del prodotto in Capgo Alternatives, per il flusso di lavoro del prodotto in Capgo Alternatives, Consultoria per il flusso di lavoro del prodotto in Capgo Consulting, e per il flusso di lavoro del prodotto in Capgo Consulting, e Supporto Premium per il flusso di lavoro del prodotto in Capgo Premium Support. for the product workflow in Capgo Premium Support.
