7: Implementar Notificaciones Push

Objetivo

Implementar notificaciones push en la aplicación utilizando Firebase Cloud Messaging (FCM).

Configurar Firebase Cloud Messaging

En Firebase Console, habilita Firebase Cloud Messaging en tu proyecto. Agrega los archivos de configuración google-services.json (para Android) y GoogleService-Info.plist (para iOS) a tus respectivos proyectos de plataforma.

Instalar Capacitor FCM Plugin

En la terminal, ejecuta:

npm install @capacitor/push-notifications @capacitor-firebase/messaging
npx cap sync

Implementar Notificaciones Push

Abre src/app/home/home.page.ts y agrega la lógica para registrar y recibir notificaciones push:

import { Component, OnInit } from '@angular/core';
import { PushNotifications } from '@capacitor/push-notifications';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

  constructor() {}

  ngOnInit() {
    this.initializePushNotifications();
  }

  initializePushNotifications() {
    PushNotifications.requestPermissions().then(permission => {
      if (permission.receive === 'granted') {
        PushNotifications.register();
      } else {
        console.error('Permiso de notificaciones push denegado.');
      }
    });

    PushNotifications.addListener('registration', (token) => {
      console.log('Token de registro: ', token.value);
    });

    PushNotifications.addListener('pushNotificationReceived', (notification) => {
      console.log('Notificación recibida: ', notification);
    });

    PushNotifications.addListener('pushNotificationActionPerformed', (notification) => {
      console.log('Acción de notificación: ', notification);
    });
  }
}

Editar home.page.html

Abre src/app/home/home.page.html y agrega el siguiente contenido:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Notificaciones Push
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <p>Las notificaciones push están configuradas.</p>
</ion-content>

Conceptos Básicos

Firebase Cloud Messaging (FCM) permite enviar notificaciones push a dispositivos iOS y Android. Capacitor proporciona plugins para manejar notificaciones push en aplicaciones Ionic.

Ejercicio

Configura e implementa notificaciones push en tu aplicación utilizando Firebase Cloud Messaging. Verifica que las notificaciones se reciban correctamente en el dispositivo.