Notificaciones Push

Las notificaciones Push son mensajes que generalmente un servidor envía a la aplicación del cliente (recordatorios, información general, mensajes de otros usuarios, eventos, etc.). Estos mensajes pueden tener varios campos (título, subtítulo, imagen, ícono, datos (payload), etc.).

Crear proyecto Firebase

Para implementar las notificaciones Push, vamos a utilizar Firebase y el Plugin de Notificaciones Push de Capacitor. Lo primero que debemos hacer es crear o agregar un proyecto existente de Google en la Consola de Firebase. Después de agregar el proyecto, crea una aplicación para Android.

Una vez creado el proyecto, lo seleccionaremos y crearemos una aplicación Android:

Te pedirá el nombre y la id de aplicación, que podemos consultar en el archivo capacitor.config.ts (la huella SHA1 del certificado es opcional):

A continuación descarga el archivo google-services.json en la carpeta android/app de tu proyecto Ionic (debes crear primero el proyecto Android con capacitor):

Enviar notificaciones Push (ejemplo servidor)

Vamos a ver un ejemplo de enviar notificaciones Push desde un servidor NodeJS, en concreto utilizando el framework Nest. Lo primero sería instalar la dependencia firebase-admin:

npm i firebase-admin

Después generaremos una clave privada en la consola de Firebase. Desde el proyecto, seleccionaremos desde el menú de la derecha Descripción general → Configuración del proyecto → Cuentas de servicio.

Una vez generada la clave privada, se descargará en un archivo JSON. Lo guardaremos en la carpeta del proyecto de servidor. En este caso se ha optado por crear una carpeta llamada firebase en la raíz.

Configurar firebase-admin

Ahora debemos inicializar el módulo admin de Firebase en la aplicación de servidor. En el caso de una aplicación Nest esto se haría en el archivo main.ts:

Enviar notificación Push

Ahora ya podemos utilizarlo en nuestra aplicación. En este ejemplo se va a crear un servicio de Nest solo para gestionar el envío de una notificación Push (FirebaseService). Este servicio lo utilizaremos dentro del servicio de productos, cuando un usuario registre un nuevo comentario. En ese momento, si el creador del producto tienen registrada un token de Firebase en la base de datos, se utilizará para enviarle una notificación.

El campo firebaseToken está presente en la tabla de usuarios y se recibe en el login (es opcional).

Recibir notificaciones push

Lo primero que haremos será instalar el plugin de capacitor para gestionar notificaciones Push:

npm install @capacitor/push-notifications

Antes de recibir cualquier notificación push, debemos registrar la aplicación cliente con Firebase. Para hacerlo, necesitaremos llamar al método de registro (register). Si el registro se realiza con éxito, Firebase nos enviará un token (identifica el dispositivo y la aplicación). Enviaremos ese token a nuestro servidor, ya que es lo que necesitará para enviarnos notificaciones.

En nuestro ejemplo de productos que desarrollamos en la sección anterior, añadiremos este registro en la página de login, enviando el token de firebase junto con el email y la contraseña.

Finalmente en app.component (en general para toda la aplicación), añadiremos los siguientes eventos del plugin PushNotifications:

• pushNotificationReceived → Este evento se dispara cuando la aplicación está abierta y la notificación Push se recibe. En este caso, en lugar de aparecer la notificación en la barra superior del teléfono, la aplicación la recibe directamente. En este caso, nos limitaremos a mostrar una notificación de tipo Toast al usuario.
• pushNotificationActionPerformed → Este evento se dispara cuando el usuario ha abierto la aplicación, que estaba en segundo plano, después de pulsar en la notificación recibida en la barra de notificaciones. En este caso, abriremos la página de comentarios del producto.

Debemos asegurarnos (desde la versión 13 de Android es obligatorio) que tenemos permisos para recibir notificaciones.