Implementar push notifications en una aplicación web progresiva elimina la necesidad de publicar en tiendas de aplicaciones solo para enviar notificaciones a los usuarios. Con Firebase Cloud Messaging (FCM) y Angular, es posible solicitar permisos, recibir mensajes en tiempo real y almacenar tokens de dispositivos, todo desde una PWA.
¿Cómo funciona Firebase Cloud Messaging para enviar notificaciones?
El sistema de notificaciones en dispositivos móviles no funciona de forma directa. En Android, las notificaciones pasan a través de la API de Google, que se comunica con los dispositivos mediante un token único [1:26]. En iOS, el proceso es similar con APS (Apple Push Notification Service), que también requiere tokens de autorización [1:50].
Firebase Cloud Messaging actúa como intermediario y puede enviar notificaciones tanto a dispositivos Android como a Google Chrome en escritorio [2:05]. Esto significa que una PWA puede recibir notificaciones sin necesidad de ser una app nativa.
¿Qué módulos de Angular Fire se necesitan activar?
Dentro del módulo principal de la aplicación Angular, es necesario habilitar dos módulos adicionales [2:30]:
- AngularFireMessagingModule: gestiona toda la lógica de mensajería.
- AngularFirestoreModule: permite guardar tokens en una base de datos en tiempo real.
El módulo de Firestore no es obligatorio para las notificaciones, pero resulta útil para almacenar los tokens de cada dispositivo conectado y así poder enviar notificaciones a usuarios específicos [2:50]. Si ya cuentas con una API propia con PostgreSQL o MongoDB, puedes guardar los tokens allí sin problema.
¿Cómo solicitar permisos y escuchar notificaciones en Angular?
En el AppComponent, que es el componente principal donde se lanza la aplicación, se crean dos métodos fundamentales [3:30].
El primero es requestPermission, que inyecta el servicio AngularFireMessaging y ejecuta requestToken [3:55]. Este método retorna un observable que, al suscribirse, entrega el token de autorización. Este token es el identificador único del dispositivo o la sesión del navegador, y es lo que permite a FCM saber exactamente a quién enviar la notificación [4:20].
El segundo método es listenNotifications, que se suscribe a messages del servicio de messaging [5:00]. Gracias al patrón de observables, mantiene una conexión activa que reacciona cada vez que llega una nueva notificación:
- Se puede imprimir el mensaje para inspeccionar su contenido.
- Se puede redirigir al usuario usando el Router de Angular hacia una URL específica.
- Se puede mostrar un mensaje tipo toast en pantalla.
Ambos métodos se invocan dentro de ngOnInit, primero solicitando permiso y luego activando la escucha de notificaciones [6:45].
¿Cómo almacenar tokens en Firestore?
Para registrar cada token en una base de datos, se importa AngularFirestore en el AppComponent [8:00]. Se define una interfaz con tipado estricto:
typescript
interface Token {
token: string;
}
Luego se inicializa una colección privada en el constructor [9:00]:
typescript
private tokensCollection: AngularFirestoreCollection<Token>;
constructor(private database: AngularFirestore) {
this.tokensCollection = this.database.collection<Token>('tokens');
}
Cuando el usuario autoriza las notificaciones y se obtiene el token, se agrega a la colección con this.tokensCollection.add({ token }) [9:40]. Esta colección puede enriquecerse con campos adicionales como source para identificar si el token proviene de la web o de un dispositivo Android.
¿Qué configuración se requiere en la consola de Firebase?
Es necesario verificar que el Messaging Sender ID en los archivos de environment coincida con el del proyecto activo en Firebase [7:10]. Para activar el servicio:
- Acceder a la consola de Firebase en firebase.google.com.
- Seleccionar el proyecto correspondiente.
- Ir a la sección de Cloud Messaging y registrar la aplicación web [7:40].
- Copiar las llaves generadas en los archivos
environment.ts, environment.staging.ts y environment.prod.ts [8:10].
Para Firestore, se debe crear la base de datos desde la consola y seleccionar modo prueba para evitar restricciones de autenticación durante el desarrollo [10:20].
Si quieres profundizar en reglas de seguridad y permisos de Firestore, comparte en los comentarios qué caso de uso te gustaría implementar con push notifications en tu PWA.
