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

In 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 Cloud, 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 elecció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 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 tus carpetas nativas ya existen, 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í mismo. En 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": {}
}

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

Configuración de Firebase

Comienza creando 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 el panel de control de tu aplicación. De lo contrario, haz clic en el icono de engranaje y ve a Configuración Configuración del proyecto para agregar una aplicación.

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

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

• archivo de configuración de Google para Android archivo de configuración de Google para iOS
• archivo de configuración de Google Configura las plataformas.

google-services.json

Preparación de Notificaciones Push para Android

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

Preparación de Notificaciones Push para iOS

Esta parte es más complicada. Primero, crea 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 identificadores de tu cuenta de desarrollador de Apple. seleccione la capacidad de notificaciones Push de la lista.

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

Ahora, cree una clave 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 un certificado en su lugar, pero el proceso es más complicado.

After descargar el .p8 archivo, subirlo a Firebase. Abrir la pantalla de mensajería de Cloud en tus ajustes de proyecto de Firebase, subir el archivo y ingresar los detalles para el ID de clave y tu ID de equipo de iOS. firebase-upload-ios-key

Copiar el

npx cap open ios

archivo GoogleService-Info.plist que descargaste de Firebase en tu proyecto de iOS. Arrastrar el archivo al proyecto de Xcode dentro de la carpeta app/app, y seleccionar Copiar si es necesario Después, agrega una nueva dependencia de Pod para la dependencia de Firebase en el .

Next, add a new Pod for the Firebase dependency in the ios/App/Podfile:

target 'App' do
  capacitor_pods
  # Add your Pods here
  pod 'Firebase/Messaging'
end

Actualice la plataforma nativa con este comando:

npx cap update ios

Modifique el code nativo 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 Push dentro de su proyecto de Xcode.

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

Integración de Notificaciones de Push 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 { }

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

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

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

Construir la aplicación, sincronizar tus cambios y desplegarla 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 Mensajería en la Nube y selecciona Enviar mensaje de pruebaAgrega el token del dispositivo de los registros.

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 push con información adicional, sigue el asistente en la misma página para especificar información general y seleccionar la plataforma que deseas dirigir. Agrega opciones adicionales para enviar un paquete con su notificación de push.

En la opciones avanzadas sección, agregue un datos personalizados par clave-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, 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 de push de manera programática utilizando el Firebase API. Para hacer esto, necesita obtener el Clave del servidor desde tus ajustes de proyecto de Firebase en la pestaña Cloud Messaging .

Con la clave del servidor, puedes enviar una solicitud POST a la API de 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 del servidor real y el token de 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 aplicación de Ionic Capacitor utilizando Firebase. Ahora puedes enviar notificaciones push a tus usuarios en ambos sistemas operativos Android e iOS.

Sigue adelante con Notificaciones de Ionic Capacitor con Firebase: Una Guía Paso a Paso

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