Notificaciones push con Ionic Capacitor y Firebase: guía paso a paso

En este tutorial, integraremos notificaciones push 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í configurar varias cosas previamente. Firebase es una excelente opción, ya que es obligatorio para Android y permite enviar notificaciones fácilmente sin usar la base de datos.

Primero, crearemos una app de Ionic con Capacitor habilitado y especificaremos 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 android

Si ya tienes una app, puedes cambiar el archivo capacitor.config.json para incluir tu appId. Sin embargo, 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 archivo capacitor.config.json, también puedes especificar opciones como actualizar el badge count, reproducir un sonido al recibir el push 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 push fuera de la app.

Configuración de Firebase

Comienza creando un nuevo proyecto de Firebase o usando uno existente. Proporciona un nombre y las opciones predeterminadas para un nuevo proyecto.

Si tienes una app nueva, deberías ver “Comienza agregando Firebase a tu app” en el panel de tu app. Si no, haz clic en el icono de engranaje y ve a configuración del proyecto para agregar una app.

El diálogo para iOS y Android se ve similar, 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

Luego, configura las plataformas.

Preparación de push en Android

Para Android, mueve el google-services.json archivo que descargaste a la android/app/ carpeta.

Eso es todo para Android. Ahora vamos a configurar iOS.

Preparación de push en iOS

Esta parte es más complicada. 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 de la lista.

ionic-ios-push-id

El ID del Bundle debe ser el mismo que tu App ID en Capacitor y Firebase.

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

ios-developer-push-key

Después de descargar el .p8 archivo, súbelo a Firebase. Abre la pestaña Cloud Messaging en la configuración de tu proyecto de Firebase, sube el archivo e introduce los detalles de la Key ID y tu Team ID de iOS.

firebase-upload-ios-key

Ahora, haz cambios en tu proyecto de Xcode ejecutando:

npx cap open ios

Copia 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.

A continuación, 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'
end

Actualiza la plataforma nativa con este comando:

npx cap update ios

Modifica el Swift nativo code 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 dentro de tu proyecto de Xcode.

capacitor-xcode-capability

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

Actualiza 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();
    });
  }
}

Maneja la información de 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>

Haz el build de la app, sincroniza tus cambios y despliégala 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 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 notificación 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.

firebase-test-push

Si todo está configurado correctamente, deberías ver 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.

firebase-push-payload

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 debería recibirla y mostrar la página de detalles con el id especificado al pulsar la notificación.

Uso de Firebase API

También puedes enviar notificaciones push programáticamente usando la API de Firebase. Para ello, necesitas obtener la Clave del servidor desde la configuración de tu proyecto de Firebase, en Cloud Messaging .

Con la server key, puedes enviar una solicitud POST a la API de Firebase con el payload requerido. 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);
  }
});

Reemplazar YOUR_SERVER_KEY y YOUR_DEVICE_TOKEN con tu clave de servidor real y el token del dispositivo. Ejecuta el script y tu dispositivo debería recibir la notificación push con el payload personalizado.

¡Listo! Has integrado correctamente las notificaciones push en tu app de Ionic Capacitor usando Firebase. Ahora puedes enviar notificaciones push a tus usuarios en las plataformas Android e iOS.

Sigue aprendiendo sobre las notificaciones push de Ionic Capacitor con Firebase: guía paso a paso

Si estás usando Notificaciones push con Ionic Capacitor y Firebase: guía paso a paso para planificar la migración y las operaciones enterprise, conéctalo con Capgo Enterprise para el flujo de trabajo del producto en Capgo Enterprise, Alternativas a plugins de Ionic Enterprise para el flujo de trabajo del producto en Alternativas de Plugins de Ionic Enterprise, Alternativas a Capgo para el flujo de trabajo del producto en Capgo Alternatives, Consultoría de Capgo para el flujo de trabajo del producto en Capgo Consulting, y Soporte Premium de Capgo para el flujo de trabajo del producto en Capgo Premium Support.