En este tutorial, integraremos push notifications en una app de Ionic Capacitor usando Firebase. Para un plugin Capacitor mantenido con soporte para Firebase Cloud Messaging, consulta @capgo/capacitor-firebase-messaging. No necesitas un servicio específico para esto, pero sí debes configurar varias cosas previamente. Firebase es una excelente opción ya que es necesario para Android y puedes usarlo fácilmente para enviar notificaciones sin usar la base de datos.
Primero, crearemos una app de Ionic con Capacitor habilitado y definiremos nuestro ID del paquete, que es el identificador único de tu app. Luego, compilaremos la app y añadiremos 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 app, puedes modificar el capacitor.config.json para incluir tu appId. No obstante, si tus carpetas nativas ya existen, deberás reemplazar el id en todos los archivos donde aparezca, ya que Capacitor solo crea la carpeta una vez y no actualizará el id por sí solo. En el capacitor.config.json, también puedes configurar opciones como actualizar el badge count, reproducir un sonido al recibir el push o mostrar una alerta cuando llegue la 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, configuremos las push notifications fuera de la app.
Configuración de Firebase
Comienza por crear un nuevo proyecto de Firebase o usar uno existente. Proporciona un nombre y las opciones por defecto para un nuevo proyecto.
Si tienes una app nueva, deberías ver “Empieza añadiendo Firebase a tu app” en el dashboard de tu app. De lo contrario, haz clic en el icono de engranaje y ve a ajustes del proyecto para añadir una app.
El diálogo es similar tanto en iOS como en Android, y lo importante es usar tu ID del paquete para las apps.
Tras el paso inicial, descarga estos archivos:
- google-services.json archivo para Android
- GoogleService-info.plist archivo para iOS
A continuación, configura las plataformas.
Preparación de Push en Android
Para Android, mueve el google-services.json archivo descargado a la android/app/ carpeta.
Eso es todo para Android. Ahora configuremos iOS.
Preparación de Push en iOS
Esta parte es más compleja. Primero, crea un App ID para tu app en la lista de identificadores de tu cuenta de Apple Developer. Asegúrate de seleccionar la capacidad de Push Notifications en la lista.
El ID del Bundle debe coincidir con tu App ID en Capacitor y Firebase.
Ahora, crea una Key y habilita el Servicio de notificaciones push de Apple (APNs). Si alcanzaste el máximo de keys, puedes usar una existente o un certificado, pero el proceso es más complejo.
Tras descargar el archivo .p8 archivo, súbelo a Firebase. Abre el Cloud Messaging pestaña en la configuración de tu proyecto de Firebase, sube el archivo e ingresa el Key ID y tu Team ID de iOS.
Ahora, realiza cambios en tu proyecto de Xcode ejecutando:
npx cap open iosCopia el GoogleService-Info.plist archivo 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 elementos si es necesario.
Luego, añade 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 code nativo de Swift en ios/App/App/AppDelegate.swift para registrarte en Firebase y devolver el token correcto a tu 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)
}
}
}
}Por último, añade la Capability de Push Notifications en tu proyecto de Xcode.
Ahora, compila tu app e integra las push notifications.
Integración de Push Notifications en Ionic
Crea un servicio y una nueva página en tu proyecto Ionic:
ionic g service services/fcm
ionic g page pages/detailsActualiza el routing 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 gestionar las push notifications 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 al 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();
});
}
}Gestiona la información en la página de detalles en 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();
}
}Muestra los detalles en 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>Build de la app, sincroniza tus cambios y despliégala en tu dispositivo.
ionic build
npx cap syncAhora puedes enviar push notifications con Firebase.
Enviar Push Notifications con Firebase
Existen varias formas de enviar push notifications con Firebase.
Test en un dispositivo específico
Tras desplegar tu app en un dispositivo, puedes revisar los logs de la consola para ver el token tras el registro. Usa este token para enviar una push de prueba dirigida y confirmar que tu integración funciona. En Firebase, ve a Cloud Messaging y selecciona Enviar mensaje de prueba. Añade el token del dispositivo desde los logs.
Si todo está configurado correctamente, deberías recibir una notificación push en tu dispositivo.
Mensaje Push con Payload
Para probar una notificación push con información adicional, sigue el asistente en la misma página para especificar los datos generales y seleccionar la plataforma de destino. Añade opciones adicionales para enviar un payload con tu notificación push.
En el Opciones avanzadas sección, añade un Custom data par clave-valor. Por ejemplo, puedes usar la clave detailsId y un valor a tu elección. Estos datos se usarán en la app para navegar a la página de detalles con el id especificado.
Tras enviar la notificación push, tu app la recibirá y mostrará la página de detalles con el id indicado al pulsar la notificación.
Usando Firebase API
También puedes enviar notificaciones push de forma programática usando el API de Firebase. Para ello, necesitas obtener el Clave del servidor de la configuración de tu proyecto Firebase en la sección Cloud Messaging pestaña.
Con la server key, puedes enviar una petición POST a la API de Firebase con el payload necesario. Aquí tienes un ejemplo usando Node.js y la request librería:
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);
}
});Reemplaza YOUR_SERVER_KEY y YOUR_DEVICE_TOKEN con tu server key y el token del dispositivo. Ejecuta el script y tu dispositivo debería recibir la notificación push con el payload personalizado.
¡Eso es todo! Has integrado con éxito las push notifications en tu app de Ionic Capacitor usando Firebase. Ahora puedes enviar notificaciones push a tus usuarios tanto en Android como en iOS.
Sigue aprendiendo sobre Ionic Capacitor Push Notifications con Firebase: Guía paso a paso
Si estás usando Ionic Capacitor Push Notifications con Firebase: Guía paso a paso para planificar la migración y operaciones empresariales, conéctalo con Capgo Enterprise para el flujo de trabajo del producto en Capgo Enterprise, Alternativas a los plugins de Ionic Enterprise para el flujo de trabajo con alternativas a los plugins de Ionic Enterprise, Alternativas Capgo para el flujo de trabajo con alternativas Capgo, Consultoría de Capgo para el flujo de trabajo con consultoría Capgo, y Soporte Premium Capgo para el flujo de trabajo con soporte premium Capgo.
