¿Cómo agregar notificaciones push a una aplicación web con Firebase? +?

A medida que las aplicaciones web evolucionan, es cada vez más común encontrar funciones que normalmente asociaría con una aplicación nativa en una aplicación web. Muchos sitios envían notificaciones a sus usuarios a través del navegador para varios eventos que ocurren dentro de la aplicación web.

Hoy, le mostraré los pasos necesarios, en detalle, para lograr dicha funcionalidad en su aplicación web usando Firebase .

Notificaciones con Firebase

Firebase es una plataforma que ofrece varios servicios para aplicaciones web y móviles y ayuda a los desarrolladores a crear aplicaciones rápidamente con muchas funciones.

Para enviar las notificaciones utilizaremos el servicio denominado Cloud Messaging, que nos permite enviar mensajes a cualquier dispositivo mediante solicitudes HTTP.

Configuración del proyecto

En primer lugar, debe tener una cuenta de Firebase y deberá crear un nuevo proyecto dentro de ella.

Para esta configuración de demostración, usaré un proyecto simple creado con la aplicación create-react-app , pero puede usar el mismo código en cualquier otro lugar que use JavaScript.

Además de eso, necesitamos agregar la biblioteca de Firebase al proyecto.

npm install firebase --save

¡Así que empecemos a codificar!

Ahora que hemos hecho nuestra configuración, podemos comenzar a codificar el módulo que estará a cargo de las notificaciones.

Creemos un archivo dentro del directorio del proyecto llamado push-notification.js.

Dentro del archivo, creemos una función que inicialice Firebase y pase las claves de su proyecto.

import firebase from 'firebase'; export const initializeFirebase = () => { firebase.initializeApp({ messagingSenderId: "your messagingSenderId" }); }

Bueno, ahora que tenemos la función, necesitamos llamarla.

Dentro del punto de entrada de su proyecto, importe la función y llámela.

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { initializeFirebase } from './push-notification'; ReactDOM.render(, document.getElementById('root')); initializeFirebase();
Puede encontrar las claves de su proyecto dentro de Firebase Console.

Trabajadores de servicios

Un trabajador de servicio es un script que su navegador ejecuta en segundo plano, separado de la página web, que habilita funciones que no requieren una página web o interacción del usuario.

Para recibir el evento onMessage , su aplicación necesita un trabajador de servicio. De forma predeterminada, cuando inicia Firebase, busca un archivo llamado firebase-messaging-sw.js.

Pero si ya tiene uno y desea aprovecharlo para recibir notificaciones, puede especificar durante el inicio de Firebase qué trabajador de servicio usará. Por ejemplo:

export const inicializarFirebase = () => { firebase.initializeApp({ messagingSenderId: 'your messagingSenderId' }); navigator.serviceWorker .register('/my-sw.js') .then((registration) => { firebase.messaging().useServiceWorker(registration); }); }

Este trabajador de servicio básicamente importará el script necesario para mostrar las notificaciones cuando su aplicación esté en segundo plano.

Necesitamos agregar firebase-messaging-sw.jsa la ubicación donde se sirven sus archivos. Como estoy usando la aplicación create-react-app, la agregaré dentro de la carpeta pública con el siguiente contenido:

importScripts('//www.gstatic.com/firebasejs/4.8.1/firebase-app.js'); importScripts('//www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js'); firebase.initializeApp({ messagingSenderId: "your messagingSenderId again" }); const messaging = firebase.messaging();

Solicitar permiso para enviar notificaciones

Bueno, todo el mundo sabe lo molesto que es entrar al sitio y pedir autorización para enviar notificaciones. ¡Así que hagámoslo de otra manera!

Deje que el usuario elija si desea recibir notificaciones o no.

En primer lugar, creemos la función que realizará la solicitud y devolverá el token del usuario.

Dentro de nuestro archivo push-notification.js, agregue la función:

export const askForPermissioToReceiveNotifications = async () => { try { const messaging = firebase.messaging(); await messaging.requestPermission(); const token = await messaging.getToken(); console.log('token do usuário:', token); return token; } catch (error) { console.error(error); } }

Necesitamos llamar a esta función desde algún lugar, así que la agregaré con el clic de un botón.

import React from 'react'; import { askForPermissioToReceiveNotifications } from './push-notification'; const NotificationButton = () => (  Clique aqui para receber notificações  ); export default NotificationButton;

Bien, veamos cómo funciona:

Envío de notificaciones

Para enviar la notificación, debemos realizar una solicitud a la API de Firebase informándole del token que recibirá el usuario.

En los ejemplos a continuación, uso Postman, pero puede hacerlo desde cualquier otro cliente REST.

Básicamente, necesitamos realizar una solicitud POST a //fcm.googleapis.com/fcm/send enviando un JSON en el cuerpo de la solicitud.

A continuación se muestra la estructura del JSON que se enviará:

{ "notification": { "title": "Firebase", "body": "Firebase is awesome", "click_action": "//localhost:3000/", "icon": "//url-to-an-icon/icon.png" }, "to": "USER TOKEN" }

En el encabezado de la solicitud, debemos pasar la clave del servidor de nuestro proyecto en Firebase y el tipo de contenido:

Content-Type: application/json Authorization: key=SERVER_KEY
La clave del servidor se encuentra en la configuración del proyecto en Firebase Console en la pestaña Cloud Messaging.

Notificaciones en acción

Recuerde que las notificaciones solo aparecerán cuando su aplicación esté minimizada o en segundo plano.

Así es como enviamos una notificación directa a un dispositivo.

Enviar notificaciones a un grupo de usuarios

Bueno, ahora que hemos visto cómo enviar una notificación a un usuario, ¿cómo enviamos una notificación a varios usuarios a la vez?

To do this, Firebase has a feature called topic, where you insert multiple tokens for a specific topic, and you can send the same notification to all of them from a single request.

How to do this

We will basically send a POST request to the address //iid.googleapis.com/iid/v1/TOKEN/rel/topics/TOPIC_NAME,passing the topic name and the token in the URL.

Do not forget to pass in the header the same authorization that we used to send the notification.

Sending the notification to users subscribed to any topic is very similar to sending a notification to a single user. The difference is that we need to pass the topic name in the “to” attribute instead of the token.

See the example below:

{ "notification": { "title": "Firebase", "body": "Firebase topic message", "click_action": "//localhost:3000/", "icon": "//localhost:3000/icon.png" }, "to": "/topics/TOPIC_NAME" }

Conclusion

Thanks for reading this! I hope you now understand how to make use of push notifications. The repository with the demo code can be found here.

To get notified of my future posts, follow me on GitHub or Twitter.