In this tutorial, we will integrate push notifications in an Ionic Capacitor app using Firebase. You don’t need a specific service for this, but you do need to configure several things beforehand. Firebase is an excellent choice since it’s required for Android, and you can easily use it to send notifications without using the database.
Primero, crearemos una aplicación Ionic con Capacitor habilitado y especificaremos nuestro identificador de paquete, que es el identificador único de tu aplicación. Luego, construiremos la aplicación y agregaremos las plataformas nativas.
ionic start pushApp blank --type=angular --capacitor --package-id=com.appdactic.devpush
cd ./pushApp
ionic build
npx cap add ios
npx cap add androidSi ya tienes una aplicación, puedes cambiar el capacitor.config.json para incluir tu appId. Sin embargo, si ya existen las carpetas nativas, necesitarás reemplazar el id en todos los archivos donde aparece, ya que Capacitor solo crea la carpeta una vez y no actualizará el id en sí mismo. En el capacitor.config.json, también puedes especificar opciones como actualizar el recuento de notificaciones, reproducir sonido al recibir una notificación y mostrar una alerta cuando llegue una notificación.
{
"appId": "com.appdactic.devpush",
"appName": "pushApp",
"bundledWebRuntime": false,
"npmClient": "npm",
"webDir": "www",
"plugins": {
"SplashScreen": {
"launchShowDuration": 0
},
"PushNotifications": {
"presentationOptions": ["badge", "sound", "alert"]
}
},
"cordova": {}
}Ahora, configuraremos las notificaciones de empuje fuera de la aplicación.
Configuración de Firebase
Comience por crear un nuevo proyecto de Firebase o utilizar uno existente. Proporciona un nombre y opciones predeterminadas para un nuevo proyecto.
Si tienes una nueva aplicación, deberías ver “Get started by adding Firebase to your app” “Comience por agregar Firebase a tu aplicación” en el panel de control de tu aplicación. De lo contrario, haz clic en el icono de engranaje y ve a configuración del proyecto
para agregar una aplicación. El diálogo para tanto iOS como Android es similar, y lo importante es utilizar tu identificador de paquete
Después del primer paso, descargue los siguientes archivos:
- __CAPGO_KEEP_0__ archivo para Android
- __CAPGO_KEEP_0__ archivo para iOS
A continuación, configure las plataformas.
Preparación de empuje para Android
Para Android, mueva el __CAPGO_KEEP_0__ archivo que descargó a la carpeta android/app/ folder.
Eso es todo para Android. Ahora, configuraremos iOS.
Preparación de iOS Push
Esta parte es más complicada. Primero, cree un ID de aplicación para su aplicación dentro de la lista de identificadores de su cuenta de desarrollador de Apple. Asegúrese de que seleccione la capacidad de notificaciones de push de la lista. ionic-ios-push-id El
debe ser el mismo que su ID de aplicación dentro de __CAPGO_KEEP_0__ y Firebase. 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. should be the same as your App ID within Capacitor and Firebase.
Ahora, cree una clave y habilite el servicio de notificaciones de Apple Push (APNs) . Si ha alcanzado el número máximo de claves, puede utilizar una clave existente o un certificado en su lugar, pero el proceso es más complicado.ios-developer-push-key
.p8 subirlo a Firebase. Abra la pestaña Cloud Messaging en la configuración de su proyecto de Firebase, subir el archivo y ingresar los detalles para la clave ID y su ID de equipo de iOS. firebase-upload-ios-key
Ahora, haz cambios en tu proyecto de Xcode ejecutando:
npx cap open iosCopia el archivo GoogleService-Info.plist que descargaste de Firebase en tu proyecto de iOS. Arrastra el archivo al proyecto de Xcode dentro de la carpeta app/app, y selecciona Copiar items si es necesario.
A continuación, agrega un nuevo Pod para la dependencia de Firebase en el ios/App/Podfile:
target 'App' do
capacitor_pods
# Add your Pods here
pod 'Firebase/Messaging'
endActualiza la plataforma nativa con este comando:
npx cap update iosModifica el nativo Swift code en ios/App/App/AppDelegate.swift para registrarte con Firebase y devolver el token correcto a tu aplicación.
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)
}
}
}
}Finalmente, agrega la Capacidad para Notificaciones de Push dentro de tu proyecto de Xcode.
Ahora, construye tu aplicación y integra las notificaciones push.
Integración de notificaciones push de Ionic
Crea un servicio y una nueva página en tu proyecto de Ionic:
ionic g service services/fcm
ionic g page pages/detailsActualiza la configuración de rutas en app/app-routing.module.ts para incluir la nueva página con un ID dinámico:
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 servicio para manejar las notificaciones push en 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}`);
}
}
);
}
}Llama a la initPush() función en 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();
});
}
}Gestione la información en la página de detalles en __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();
}
}Muestre los detalles en __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>Construya la aplicación, sincronice los cambios y déjela en su dispositivo.
ionic build
npx cap syncAhora puede enviar notificaciones push con Firebase.
Enviar Notificaciones Push con Firebase
Existen varias formas de enviar notificaciones push con Firebase.
Prueba de dispositivo específico
Después de desplegar su aplicación en un dispositivo, puede verificar los registros del consola para ver el token después de la registro. Utilice este token para enviar una prueba de notificación dirigida para confirmar que su integración está funcionando. En Firebase, vaya a Mensajería en la Nube y seleccione Enviar mensaje de prueba. Agregue el token del dispositivo desde los registros.
Si todo está configurado correctamente, debería ver una notificación de push en su dispositivo.
Mensaje de Push con Carga
Para probar una notificación de push con información adicional, siga el asistente en la misma página para especificar información general y seleccionar la plataforma que desea alcanzar. Agregue opciones adicionales para enviar una carga con su notificación de push.
En la Opciones avanzadas sección, agregue un Datos personalizados par de valores clave. Por ejemplo, puede utilizar la clave detailsId y un valor de su elección. Este dato se utilizará en la aplicación para navegar a la página de detalles con el id especificado.
Después de enviar la notificación de push, la aplicación debería recibirla y mostrar la página de detalles con el id especificado cuando se toque la notificación.
Usando Firebase API
También puede enviar notificaciones de push de manera programática utilizando el Firebase API. Para hacer esto, necesita obtener la Llave del servidor de la configuración de su proyecto de Firebase en la Mensajería en la nube con la llave del servidor, puede enviar una solicitud POST al Firebase __CAPGO_KEEP_0__ con el payload requerido. Aquí hay un ejemplo utilizando Node.js y la
With the server key, you can send a POST request to the Firebase API with the required payload. Here’s an example using Node.js and the 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);
}
});Sustituye YOUR_SERVER_KEY y YOUR_DEVICE_TOKEN con tu clave de servidor real y token de dispositivo. Ejecuta el script, y tu dispositivo debería recibir la notificación de push con el payload personalizado.
¡Listo! Has integrado correctamente las notificaciones de push en tu aplicación Ionic Capacitor utilizando Firebase. Ahora puedes enviar notificaciones de push a tus usuarios en ambos plataformas Android e iOS.
