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

En este tutorial, integraremos notificaciones push en una aplicación de Ionic Capacitor utilizando Firebase. Para un plugin de mantenimiento Capacitor con soporte de mensajería de Firebase, consulte @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 utilizar fácilmente enviar notificaciones sin utilizar la base de datos.

Primero, crearemos una aplicación de Ionic con Capacitor habilitado y especificaremos nuestro package id, 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 incluir en tus appIdSin embargo, si sus carpetas nativas ya existen, necesitará 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 puede especificar opciones como actualizar el recuento de notificaciones, reproducir sonido en la 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": {}
}

Ahora, configuremos las notificaciones push fuera de la aplicación.

Configuración de Firebase

Comience por Crear un nuevo proyecto de Firebase o utilizando uno 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 la consola 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 se ve similar, y lo importante es utilizar tu package id para las aplicaciones.

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

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

Configura las plataformas a continuación.

Preparación de notificaciones push para Android

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

Preparación de notificaciones push para iOS

google-services.json

Esta parte es más complicada. Primero, Crear un ID de aplicación para tu aplicación dentro de la lista de identificadores de su cuenta de desarrollador de Apple. Asegúrese de que seleccione la capacidad de notificaciones Push ID de paquete

ionic-ios-push-id

Ahora, cree una clave debe ser el mismo que su ID de aplicación dentro de Capacitor y Firebase.

Now, de la lista. y habilita el Servicio de notificaciones 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.

ios-developer-push-key

Después de descargar el archivo .p8 subirlo a Firebase. Abra la pestaña de Mensajes de Cloud 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.

subir-clave-ios-firebase

Ahora, haga cambios en su proyecto de Xcode ejecutando:

npx cap open ios

Copia el GoogleService-Info.plist el archivo que descargaste desde Firebase en tu proyecto de iOS. Arrastra el archivo al 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'
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 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.

capacitor-xcode-capability

Ahora, compila tu aplicación e integra notificaciones de push.

Integración de Notificaciones de Push 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 navegación 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 servicios/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 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();
    });
  }
}

Maneja la información en la página de detalles en pages/detalles/detalles.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/detalles/detalles.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 a 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 a 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 a confirmar que tu integración está funcionando. En Firebase, ve a Mensajería en la Nube y selecciona Enviar mensaje de pruebaAgrega el token del dispositivo de los registros.

prueba-push-firebase

Si todo está configurado correctamente, deberías ver una notificación push en tu dispositivo.

Mensaje de notificación con carga

Para probar una notificación de notificación 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 a enviar una carga con tu notificación de notificación.

firebase-push-payload

En el opciones avanzadas sección, agrega un Custom data pair de clave-valor. Por ejemplo, puedes usar la clave detailsId y un valor de tu 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 push, su 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 push de manera programática utilizando el Firebase API. Para hacer esto, necesita obtener la clave del servidor de sus ajustes de proyecto de Firebase en la pantalla de mensajería de Cloud con 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 library:

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

biblioteca: YOUR_SERVER_KEY Sustituye YOUR_DEVICE_TOKEN con su 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.

¡Listo! Has integrado con éxito las notificaciones push en tu aplicación Ionic Capacitor utilizando Firebase. Ahora puedes enviar notificaciones push a tus usuarios en ambas plataformas Android e iOS.

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

Si estás utilizando Notificaciones push de Ionic Capacitor 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 de plugins de Ionic Enterprise Para el flujo de trabajo del producto en Ionic Enterprise Plugin Alternatives. Alternativas de Capgo 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 Notificaciones de empuje con Firebase: Una guía paso a paso