En este tutorial, integraremos notificaciones de pulsación en una aplicación Ionic Capacitor utilizando Firebase. No necesitas un servicio específico para esto, pero sí debes configurar varias cosas con anticipación. Firebase es una excelente opción ya que es requerido para Android, y puedes utilizar fácilmente para enviar notificaciones sin utilizar la base de datos.
Primero, crearemos una aplicación Ionic con Capacitor habilitado y especificaremos nuestro identificador de paqueteEl identificador de paquete 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 appIdSin 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í mismoEn el capacitor.config.json, también puedes especificar opciones como actualizar el recuento de notificaciones, reproducir un 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": {}
}Configuración de notificaciones fuera de la aplicación
Comienza creando un nuevo proyecto de Firebase
Firebase Configuration Start by o bien utilizando una existente. Proporciona un nombre y opciones predeterminadas para un nuevo proyecto.
Si tienes una nueva aplicación, deberías ver “Comienza agregando 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 de 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 para las aplicaciones.
Después del primer paso, descarga los siguientes archivos:
- google-services.json archivo para Android
- GoogleService-info.plist archivo para iOS
A continuación, configura las plataformas.
Preparación de Push para Android
Para Android, mueve el google-services.json el archivo que descargaste a la android/app/ carpeta.
Eso es todo para Android. Ahora, configura iOS.
Preparación de iOS Push
Esta parte es más complicada. Primero, crear 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 selecciones la capacidad de notificaciones de empuje de la lista. ionic-ios-push-id El
debe ser el mismo que tu ID de aplicación dentro de __CAPGO_KEEP_0__ y Firebase. Ahora, should be the same as your App ID within Capacitor and Firebase.
Bundle ID ID de paquete 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 una certificación en su lugar, pero el proceso es más complicado.
Después de descargar el archivo .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.
Ahora, haga cambios en su proyecto de Xcode ejecutando:
npx cap open iosCopie el GoogleService-Info.plist el archivo que descargaste de Firebase en tu proyecto de iOS. Arrastra el archivo dentro del proyecto de Xcode dentro de la carpeta app/app, y selecciona Copiar items si es necesario.
Siguiente, 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, compila tu aplicación e integra notificaciones de push.
Integración de Notificaciones Push de Ionic
Crea un servicio y una nueva página en tu proyecto 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 { }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 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();
});
}
}Maneja 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>Construye la aplicación, sincroniza tus cambios y desplégala en tu dispositivo.
ionic build
npx cap syncAhora puedes enviar notificaciones de push con Firebase.
Enviar Notificaciones de Push con Firebase
Existen varias formas de enviar notificaciones de push con Firebase.
Prueba de dispositivo específico
Después de desplegar tu aplicación en un dispositivo, puedes verificar los registros del 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 Mensajería de Nube 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 de push en tu dispositivo.
Mensaje de Push con Carga
Para probar una notificación de push con información adicional, sigue el asistente en la misma página para especificar información general y seleccionar la plataforma que deseas alcanzar. Agrega opciones adicionales para enviar una carga con tu notificación de push.
En la Opciones avanzadas sección, agrega un dato personalizado pair de clave-valor. Por ejemplo, puedes utilizar la clave detailsId y un valor de tu elección. Esta información 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, tu aplicación debería recibirlo y mostrar la página de detalles con el id especificado cuando se toque la notificación.
Usando Firebase API
También puedes enviar notificaciones de push de manera programática utilizando el Firebase API. Para hacer esto, debes obtener la llave del servidor de tus ajustes de proyecto Firebase en la pestaña Messaging de Cloud Con la llave del servidor, puedes enviar una solicitud POST al Firebase __CAPGO_KEEP_0__ con el payload requerido. Aquí tienes 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 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 library 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.
¡Eso es todo! Has integrado con éxito las notificaciones de push en tu aplicación de Ionic Capacitor utilizando Firebase. Ahora puedes enviar notificaciones de push a tus usuarios en ambos plataformas Android e iOS.
Sigue adelante desde Notificaciones de Push de Ionic Capacitor con Firebase: Una Guía Paso a Paso
Si estás utilizando Notificaciones de Push de Ionic Capacitor con Firebase: Una Guía Paso a Paso para planificar la migración y operaciones empresariales, conecta con Capgo Empresas para el flujo de trabajo del producto en Capgo Empresas, Alternativas del Plugin de Ionic Empresas para el flujo de trabajo del producto en Alternativas del Plugin de Ionic Empresas, Capgo Alternativas para el flujo de trabajo del producto en Capgo Alternativas Consultoría Capgo para el flujo de trabajo del producto en Consultoría Capgo, y Soporte Premium Capgo para el flujo de trabajo del producto en Soporte Premium Capgo.
