In este tutorial, integraremos notificaciones push en una aplicación Capacitor de Ionic utilizando Firebase. Para un plugin de mantenimiento Capacitor con soporte de Firebase Cloud Messaging, consulte @capgo/capacitor-firebase-messaging. No necesitas un servicio específico para esto, pero sí debes configurar varias cosas con anticipación. Firebase es una excelente elección ya que es requerido para Android, y puedes enviar notificaciones fácilmente sin utilizar la base de datos.
Primero, crearemos una aplicación de Ionic con Capacitor habilitado y especificaremos nuestro identificador de paquete, que es el identificador único para 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 tus carpetas nativas ya existen, 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í. En el capacitor.config.json, también puede especificar opciones como actualizar el recuento de la insignia, reproducir sonido al recibir un empujó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, configuremos las notificaciones de empuje fuera de la aplicación.
Configuración de Firebase
Comience por creando un nuevo proyecto de Firebase o utilizando uno existente. Proporcione un nombre y opciones predeterminadas para un nuevo proyecto.
Si tiene una nueva aplicación, debería ver “Get started by adding Firebase to your app” ‘Comience por agregar Firebase a su aplicación’ Configuración del proyecto Para agregar una aplicación.
El diálogo para tanto iOS como Android se ve similar, y lo importante es utilizar tu identificador de paquete para las aplicaciones.
Después del primer paso, descarga los siguientes archivos:
- google-services.json archivo para Android
- GoogleService-info.plist archivo para iOS
Siguiente, configura las plataformas.
Preparación de Push para Android
Para Android, mueve el archivo google-services.json el archivo que descargaste a la carpeta android/app/ .
¡Eso es todo para Android. Ahora configuraremos iOS.
Preparación de Push para iOS
Esta parte es más complicada. Primero, crea un ID de aplicación para tu aplicación dentro de la lista de identificadores de tu cuenta de desarrollador de Apple. Asegúrate de que seleccione la capacidad de notificaciones Push de la lista.
El ID de paquete debe ser el mismo que su ID de App dentro de Capacitor y Firebase.
Ahora, cree una clave y habilite el servicio de notificaciones Push de Apple (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.
After descargar el archivo .p8, subirlo a Firebase. Abra la pestaña de Mensajes de Nube en la configuración de su proyecto de Firebase, subir el archivo y ingresar los detalles para la ID de clave y su ID de equipo desde iOS. firebase-upload-ios-key Ahora, haga cambios en su proyecto de Xcode ejecutando: Copie el archivo GoogleService-Info.plist que descargó de Firebase en su proyecto de iOS. Arrastre el archivo al proyecto de Xcode dentro de la carpeta app/app, y seleccione Copiar items si es necesario
firebase-add-pod
npx cap open iosAhora, agregue el siguiente código a su archivo Podfile: firebase-add-pod-code Ahora, ejecute el comando para instalar los Pods: firebase-install-pods.
Ahora, ejecute el comando para iniciar el proyecto de iOS con Capacitor: __CAPGO_KEEP_0__ ios/Podfile:
target 'App' do
capacitor_pods
# Add your Pods here
pod 'Firebase/Messaging'
endEjecuta el siguiente comando para actualizar la plataforma nativa:
npx cap update iosModifica el code nativo de Swift en ios/App/App/AppDelegate.swift para registrarse 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 de Notificaciones de Pulsación dentro de tu proyecto de Xcode.
Ahora, construye tu aplicación e integra notificaciones de pulsación.
Integración de Notificaciones de Pulsación 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 ruta 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 { }Crear 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}`);
}
}
);
}
}Llamar 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();
});
}
}Manejar 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();
}
}Mostrar 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>Construir la aplicación, sincronizar tus cambios y desplegarla en tu dispositivo.
ionic build
npx cap syncAhora, puedes 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 tu aplicación en un dispositivo, puedes verificar los registros de la consola para ver el token después de la registro. Utiliza este token para enviar una prueba de notificación dirigida para confirmar que tu integración está funcionando. En Firebase, ve a Cloud Messaging y selecciona Enviar mensaje de prueba. Agrega el token del dispositivo de los registros.
Si todo está configurado correctamente, deberías ver una notificación push en tu dispositivo.
Notificación Push con Carga
Para probar una notificación push con información adicional, sigue el asistente en la misma página para especificar información general y seleccionar la plataforma que deseas dirigir. Agrega opciones adicionales para enviar un payload con su notificación de push.
En la Opciones avanzadas sección, agregue una Dato personalizado pair de clave-valor. 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, su 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 el Llave del servidor desde la configuración de tu proyecto de Firebase en la pestaña Cloud Messaging .
Con la llave del servidor, puedes enviar una solicitud POST a Firebase API con el payload requerido. Aquí tienes un ejemplo utilizando Node.js y la request Sustituye
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);
}
});y YOUR_SERVER_KEY con tu llave del servidor real y el token de dispositivo. Ejecuta el script y tu dispositivo debería recibir la notificación push con el payload personalizado. YOUR_DEVICE_TOKEN ¡Eso es todo! Has integrado correctamente las notificaciones push en tu aplicación de Ionic __CAPGO_KEEP_0__ utilizando Firebase. Ahora puedes enviar notificaciones push a tus usuarios en ambos plataformas Android e iOS.
Sigue adelante con Notificaciones de Ionic Capacitor Push con Firebase: Una Guía Paso a Paso
Keep going from Ionic Capacitor Push Notifications with Firebase: A Step-by-Step Guide
If you are using Notificaciones de Pus con Ionic Capacitor y Firebase: Una Guía Paso a Paso para planificar la migración y las operaciones empresariales, conecte con Capgo Empresas para el flujo de trabajo del producto en Capgo Empresas, Alternativas del Plugin de Empresas de Ionic para el flujo de trabajo del producto en Alternativas del Plugin de Empresas de Ionic, Capgo Alternativas para el flujo de trabajo del producto en Capgo Alternativas, Capgo Consultoría para el flujo de trabajo del producto en Capgo Consultoría, y Capgo Soporte Premium para el flujo de trabajo del producto en Capgo Soporte Premium.
