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

In este tutorial, integraremos notificaciones push en una aplicación Capacitor de Ionic 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 antelación. Firebase es una excelente elecció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 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í. En el capacitor.config.json, tambié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": {}
}

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

Configuración de Firebase

Comienza por 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 “Get started by adding Firebase to your app” en el panel de control de tu aplicación. De lo contrario, haz clic en el icono de engranaje y ve a Ajustes del proyecto para agregar una aplicación.

El diálogo para iOS y Android se ve similar, 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
Next, configure las plataformas. google-services.json

GoogleService-info.plist

Preparación de notificaciones push de Android

Para Android, mueve el archivo google-services.json al directorio android/app/ archivo-android-push Todo listo para Android. Ahora configuraremos iOS.

Preparación de notificaciones push de 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

__CAPGO_KEEP_0__

__CAPGO_KEEP_1__ __CAPGO_KEEP_2__ __CAPGO_KEEP_3__ seleccione la capacidad de notificaciones Push de la lista.

ionic-ios-push-id

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

ios-developer-push-key

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

Ahora, haz cambios en tu proyecto de Xcode ejecutando:

Copia el

npx cap open ios

archivo GoogleService-Info.plist que descargaste de Firebase en tu proyecto de iOS. Arrastra el archivo a tu proyecto de Xcode dentro de la carpeta app/app, selecciona Copia los elementos si es necesario Y luego, agrega un nuevo Pod para la dependencia de Firebase en la .

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

capacitor-capacidad-xcode

Ahora, compile su aplicación e integre las 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 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}`);
        }
      }
    );
  }
}

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

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 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 del dispositivo de los registros.

firebase-test-push

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

Notificación Push 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.

firebase-push-payload

En la opciones avanzadas sección, agregue un datos personalizados pare 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, 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 la configuración de tu proyecto de Firebase en la pestaña Cloud Messaging tab.

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 contexto: Página/área: sitio web de marketing de Capgo. Rol: etiqueta de IU breve o elemento de navegación. Visto en: página trust.astro. Clave de mensaje `y` (Y).

That’s it! You’ve successfully integrated push notifications in your Ionic Capacitor app using Firebase. Now you can send push notifications to your users on both Android and iOS platforms.

¡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 Notificaciones de Push de Ionic __CAPGO_KEEP_0__ 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 empresariales, 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

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