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

In this tutorial, we will integrate push notifications in an Ionic Capacitor app using Firebase. For a maintained Capacitor plugin with Firebase Cloud Messaging support, see @capgo/capacitor-firebase-messagingNo 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 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í. En el capacitor.config.jsontambién puedes especificar opciones como actualizar el recuento de notificaciones, reproducir 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 configurando Firebase en 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 es similar, y lo importante es utilizar su id de paquete para las aplicaciones.

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

google-services.json archivo para Android
GoogleService-info.plist archivo para iOS

A continuación, configure las plataformas.

Preparación de empuje para Android

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

Eso es todo para Android. Ahora, configuraremos iOS.

Preparación de iOS Push

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 empuje de la lista. ionic-ios-push-id

The Bundle ID debe ser el mismo que su ID de App dentro de Capacitor y Firebase.

Ahora, cree una Clave y habilite el servicio de notificaciones de Apple Push (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.

ios-developer-push-key

Después de descargar el archivo .p8 suba el archivo a Firebase. Abra el Cloud Messaging pestaña en la configuración de tu proyecto Firebase, sube el archivo y introduce los detalles para la clave ID y tu ID de equipo desde iOS.

firebase-upload-ios-key

Ahora, modifica tu proyecto Xcode ejecutando:

npx cap open ios

Copia el archivo GoogleService-Info.plist que descargaste de Firebase en tu proyecto de iOS. Arrastra el archivo a tu proyecto Xcode dentro de la carpeta app/app, y selecciona Copiar si es necesario.

A continuación, agrega una nueva dependencia de Pods 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 su 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, agregue la Capacidad para Notificaciones de Pushtan en su proyecto de Xcode.

capacitor-capacidad-xcode

Ahora, construya su aplicación e integre notificaciones de push.

Integración de Notificaciones de Pushtan de Ionic

Cree un servicio y una nueva página en su proyecto de Ionic:

ionic g service services/fcm
ionic g page pages/details

Actualice 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 { }

Cree un servicio para manejar notificaciones de 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}`);
        }
      }
    );
  }
}

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

Gestionar 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>

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

Hay 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 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 seleccionar 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 añadir sección, Datos personalizados par de valores clave. 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 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 la llave del servidor de sus ajustes de proyecto de Firebase en la pantalla de mensajería de Cloud tab

Con la clave del servidor, puede enviar una solicitud POST a Firebase API con el payload requerido. Aquí tienes un ejemplo utilizando Node.js y el 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);
  }
});

Sustituye YOUR_SERVER_KEY y 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 push con el payload personalizado.

¡Listo! Has integrado con éxito las notificaciones push en tu aplicación de Ionic Capacitor utilizando Firebase. Ahora puedes enviar notificaciones push a tus usuarios en ambas 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 operaciones empresariales, conecta con Capgo Enterprise para el flujo de trabajo del producto en Capgo Enterprise, Alternativas de Ionic Enterprise Plugin para el flujo de trabajo del producto en Alternativas de Ionic Enterprise Plugin 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.

Ionic Capacitor Push Notifications with Firebase: A Step-by-Step Guide