In questo tutorial, integreremo le notifiche push in un'app Ionic Capacitor utilizzando Firebase. Non è necessario un servizio specifico per questo, ma è necessario 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 id, che è 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 i cartelli nativi già esistono, avrai bisogno di sostituire l'id in tutti i file in cui compare, poiché Capacitor crea il cartello solo una volta e non aggiorna l'id stesso. Nel capacitor.config.jsonPuoi specificare anche opzioni come aggiornare il conteggio del badge, riprodurre un suono al push e visualizzare 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 all'esterno dell'app.
Configurazione di Firebase
Inizia con la creazione di un nuovo progetto di Firebase o l'utilizzo di 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 sull'icona del clessidra e vai alle impostazioni del progetto per aggiungere un'app.
Il dialogo per iOS e Android assomiglia, e l'importante è utilizzare il tuo package id per le app.
Dopo il primo passaggio, scarica i seguenti file:
- google-services.json file per Android
- GoogleService-info.plist file per iOS
Successivamente, configura le piattaforme.
Android Push Preparation
Per Android, sposta il google-services.json il file che hai scaricato nel cartella android/app/ cartella.
Tutto qui per Android. Ora configuriamo iOS.
Preparazione per le Push di iOS
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. __CAPGO_KEEP_0__
Il ID del Bundle dovrebbe essere lo stesso del tuo ID App all'interno di Capacitor e Firebase.
Ora, crea una Chiave e abilita il servizio di notifiche Push 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.
Dopo aver scaricato il .p8 carica il file su Firebase. Apri la sezione "Cloud Messaging" dei impostazioni del tuo progetto Firebase, carica il file e inserisci i dettagli per la chiave ID e il tuo ID di squadra da iOS. Cloud Messaging Ora, apporta modifiche al tuo progetto Xcode eseguendo:
il file che hai scaricato da Firebase nel tuo progetto iOS. Trascina il file all'interno del progetto Xcode all'interno della cartella app/app, seleziona
npx cap open iosCopia gli elementi se necessario Successivamente, aggiungi un nuovo Pod per la dipendenza Firebase nella ios/App/Podfile Aggiorna la piattaforma nativa con il seguente comando:.
__CAPGO_KEEP_0__ __CAPGO_KEEP_1__:
target 'App' do
capacitor_pods
# Add your Pods here
pod 'Firebase/Messaging'
end__CAPGO_KEEP_2__
npx cap update iosModifica il nativo code in Swift 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 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 servizi/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();
});
}
}Gestire 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();
}
}Visualizzare 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'app, sincronizza le tue modifiche e distribuiscila sul tuo dispositivo.
ionic build
npx cap syncOra puoi inviare notifiche push con Firebase.
Invio Notifiche Push con Firebase
Ci sono diversi modi per inviare notifiche push con Firebase.
Testa dispositivo specifico
Dopo aver distribuito il tuo app su un dispositivo, puoi controllare i registri del console per vedere il token dopo la registrazione. Utilizza questo token per inviare una notifica di test mirata per confermare che la tua integrazione funziona. In Firebase, vai a Cloud Messaging e seleziona Invia messaggio di test. Aggiungi il token del dispositivo dai registri.
Se tutto è configurato correttamente, dovresti vedere una notifica di push sul tuo dispositivo.
Messaggio di push con payload
Per testare una notifica di 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 una payload con la tua notifica di push.
Nella Opzioni avanzate sezione, aggiungi un Dati personalizzati coppia chiave-valore. 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
Puoi anche inviare notifiche push in modo programmatico utilizzando il Firebase API. Per farlo, devi ottenere la Chiave del server dai impostazioni del tuo progetto Firebase nella sezione Cloud Messaging tab.
Con la chiave del server, puoi inviare una richiesta POST al Firebase API con il payload richiesto. Ecco un esempio utilizzando Node.js e il 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);
}
});Sostituisci YOUR_SERVER_KEY e YOUR_DEVICE_TOKEN con la tua chiave del server e il token dispositivo effettivo. Esegui lo script e il tuo dispositivo dovrebbe ricevere la notifica push con il payload personalizzato.
Ecco fatto! 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 con le notifiche push Ionic Capacitor con Firebase: una guida passo dopo passo
Se stai utilizzando Notifiche push Ionic Capacitor con Firebase: una guida passo dopo passo per pianificare la migrazione e le operazioni aziendali, connettilo con Capgo Imprese per il flusso di lavoro del prodotto in Capgo Imprese, Alternativi per Plugin di Imprese di Ionic per il flusso di lavoro del prodotto in Alternativi per Plugin di Imprese di Ionic, Alternativi a Capgo per il flusso di lavoro del prodotto in Alternativi a Capgo, Consulenza Capgo per il flusso di lavoro del prodotto in Consulenza Capgo e Supporto Premium di Capgo per il flusso di lavoro del prodotto in Supporto Premium di Capgo.
