Ionic Capacitor Notificaciones Push con Firebase: Una Guía Paso a Paso

En este tutorial, integraremos notificaciones de Ionic Capacitor en una aplicación con Firebase. Para un plugin de mantenimiento Capacitor con soporte de mensajería de Firebase, vea @capgo/capacitor-mensajería-de-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 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 android

Si 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í 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": {}
}

Now, let’s configure push notifications outside the app.

Configuración de Firebase

Comience por crear un nuevo proyecto de Firebase o utilizar uno existente. Proporcione un nombre y opciones predeterminadas para un nuevo proyecto.

Si tiene una nueva aplicación, debería ver “Comience por agregar Firebase a su aplicación” en el panel de control de su aplicación. De lo contrario, haga clic en el icono de engranaje y vaya a configuración de proyecto para agregar una aplicación.

El diálogo para tanto iOS como Android se parece, y lo importante es utilizar su id de paquete para las aplicaciones.

configuración de la aplicación de Firebase para iOS

Después del primer paso, descargue los siguientes archivos:

archivo de configuración de servicios de Google para Android archivo para Android
archivo de configuración de servicios de Google para iOS archivo para iOS

Configuración de las plataformas

Preparación de notificaciones push para Android

Para Android, mueva el archivo de configuración de servicios de Google que descargaste a la directorio de tu proyecto android/app/ carpeta.

Eso es todo para Android. Ahora, configuraremos iOS.

Preparación de notificaciones de iOS

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

folder. ID de paquete debe ser el mismo que su ID de aplicación dentro de Capacitor y Firebase.

Ahora, crea una Clave y habilita el servicio de notificaciones de Apple (APNs)Si has alcanzado el número máximo de claves, puedes utilizar una clave existente o un certificado en su lugar, pero el proceso es más complicado.

clave-ios-desarrollador-push

Después de descargar el .p8 contexto: Fragmento de texto HTML de una cadena de UI de Capgo más larga (clave de padre `appflow_credentials_capgo_li1`). Página/área: Copia de marketing de comparación/migración de Appflow. Rol: Elemento de lista de puntos. Visto en: página ionic-appflow.astro. Preservar términos de producto/marca y desarrollador de Capgo exactamente. Clave de mensaje `appflow_credentials_capgo_li1` (Appflow Credentials Capgo Li1). | Fragmento de texto HTML de una cadena de UI de Capgo más larga (clave de padre `appflow_credentials_desc`). Página/área: Copia de marketing de comparación/migración de Appflow. Rol: Párrafo de marketing o legal largo. Visto en: página ionic-appflow.astro. Preservar términos de producto/marca y desarrollador de Capgo exactamente. Clave de mensaje `appflow_credentials_desc` (Appflow Credentials Desc). archivo, subirlo a Firebase. Abre la sección de pestaña en la configuración de proyecto de Firebase, subir el archivo y ingresar los detalles para la clave ID y su ID de equipo desde iOS.

firebase-upload-ios-key

Ahora, haz cambios en tu proyecto de Xcode ejecutando:

npx cap open ios

Copia el archivo GoogleService-Info.plist el 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 Copia los 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'
end

Actualiza la plataforma nativa con este comando:

npx cap update ios

Modifica la plataforma nativa Swift code 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 para Notificaciones de Pulsación dentro de tu proyecto de Xcode.

capacitor-capacidad-de-xcode

Ahora, compila 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/details

Actualiza la configuración de ruteo 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 notificaciones de pulsación 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>

Construye la aplicación, sincroniza tus cambios y déjala en tu dispositivo.

ionic build
npx cap sync

Ahora, 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 Mensaje de nube y selecciona Enviar mensaje de prueba. Agrega el token de dispositivo desde los registros.

firebase-test-push

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.

firebase-push-payload

En el Opciones avanzadas sección, agregar un Datos personalizados par de claves-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, la 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 puede enviar notificaciones de push de manera programática utilizando el Firebase API. Para hacer esto, necesita obtener la Clave del servidor de las configuraciones de su proyecto de Firebase en la pantalla de Mensajes de Cloud tab.

Con la clave del servidor, puedes enviar una solicitud POST a la Firebase API con el payload requerido. Aquí tienes un ejemplo utilizando Node.js y la request biblioteca:

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 el 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 correctamente 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 Ionic Capacitor Notificaciones de Push con Firebase: Una Guía Paso a Paso

Si estás utilizando Ionic Capacitor Notificaciones de Push con Firebase: Una Guía Paso a Paso para planificar la migración y las operaciones de empresa, conecta con Capgo Enterprise para el flujo de trabajo del producto en Capgo Enterprise, Alternativas del plugin de Ionic Enterprise para el flujo de trabajo del producto en Alternativas del plugin de Ionic Enterprise 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.

Notificaciones de Ionic Capacitor con Firebase: Una guía paso a paso