Firebase Cloud Messaging: mensajería gratuita en la nube

0. Índice de contenidos.

• 1. Introducción.
• 2. Entorno.
• 3. Primeros pasos: configurando un cliente.
• 4. Nuestros primeros envíos de mensajes.
  • 4.1. Desde cualquier terminal.
  • 4.2. Desde la consola.
• 5. Gratuito.
• 6. Referencias.
• 7. Conclusiones.

1. Introducción.

Firebase Cloud Messaging es el servicio de mensajería en la nube de Firebase, la plataforma de servicios
de Google para el desarrollo de aplicaciones móviles que provee de una serie de servicios entre los que se
encuentran autenticación, mensajería, un API para guardar y sincronizar datos en la nube en tiempo real… todo
lo que a priori necesitaríamos para el desarrollo de nuestras aplicaciones; es lo que se conoce como una plataforma
«SaaS» Software as a Service que proporciona esos servicios esenciales para arrancar cualquier proyecto.

Firebase es la evolución de una plataforma que ha ido mejorando poco a poco y en concreto Firebase Cloud Messaging
es una evolución de Google Cloud Messaging.

En este tutorial vamos a ver cómo configurar y hacer uso del servicio de mensajería de Firebase
tanto desde el cliente como desde el servidor, porque aunque Firebase provea de todos estos servicios,
la lógica de negocio seguirá formando parte de una aplicación de backend.

2. Entorno.

El tutorial está escrito usando el siguiente entorno:

• Hardware: Portátil MacBook Pro 15′ (2.5 GHz Intel Core i7, 16GB DDR3).
• Sistema Operativo: Mac OS El Capitan 10.11

3. Primeros pasos: configurando un cliente.

Asumiendo que tenemos una cuenta de Google, solo debemos acceder a la web de Firebase
y crear un nuevo proyecto.

No tenemos más que darle un nombre para crearlo.

Y desde la consola podremos acceder a todos estos servicios:

Pero antes de nada debemos configurar una aplicación, vamos a registrar un cliente de todos esos servicios,
en realidad, para el objetivo de este tutorial el tipo de cliente nos da un poco igual, esto es,
cada uno tiene su propio SDK para hacer uso de los servicios y usaremos el mismo con el lenguaje del propio
cliente.

Nosotros, para hacer una prueba rápida, vamos a crear un cliente web que consumirá los mensajes desde
javascript.

Tras pulsar sobre «Añade Firebase a tu aplicación web» se mostrará un código como el siguiente que permitirá
copiarlo para añadirlo a nuestro cliente.

Dentro de las propia documentación de Firebase podemos encontrar un ejemplo de integración desde javascript
https://github.com/firebase/quickstart-js/tree/master/messaging
que es el que hemos usado para este tutorial. Sobre el código de dicho ejemplo solo tenemos que pegar el código que se ha generado en la pantalla
anterior en el espacio reservado para ello.

Nosotros hemos incluido las siguientes importaciones y configuración para realizar nuestras pruebas en el index.html
del proyecto:

<!-- Firebase -->
<!-- ********************************************************
     * TODO(DEVELOPER): Update Firebase initialization code:
        1. Go to the Firebase console: https://console.firebase.google.com/
        2. Choose a Firebase project you've created
        3. Click "Add Firebase to your web app"
        4. Replace the following initialization code with the code from the Firebase console:
-->
<!-- START INITIALIZATION CODE -->
<!-- PASTE FIREBASE INITIALIZATION CODE HERE -->
<script src="https://www.gstatic.com/firebasejs/3.6.6/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.6/firebase-messaging.js"></script>

<script>
  var config = {
    apiKey: "AIza   .....  Cs",
    authDomain: "tnt-poc.firebaseapp.com",
    databaseURL: "https://tnt-poc.firebaseio.com",
    storageBucket: "tnt-poc.appspot.com",
    messagingSenderId: "10  ...  78"
  };
  firebase.initializeApp(config);
</script>
<!-- END INITIALIZATION CODE -->
<!-- ******************************************************** -->

Además de insertar el código anterior en el index.html debemos asignar el mismo messagingSenderId en la inicialización
del worker, dentro del fichero firebase-messaging-sw.js.

La configuración de Firebase necesita cargar ese fichero y dicha configuración será usada cuando la página pierda el
foco, para recibir las notificaciones en segundo plano.

Una vez hecho esto podemos ejecutar la aplicación bajo cualquier servidor web y comprobar que podemos acceder a la
página de index.html:

Pulsando sobre el botón «REQUEST PERMISSION» se ejecutará el código javascript que solicitará del navegador permisos
para recibir notificaciones.

Si permitimos el uso de notificaciones la aplicación solicitará un token que se mostrará en pantalla

y en los logs podemos ver algo como lo siguiente.

4. Nuestros primeros envíos de mensajes a dispositivos.

Lo primero que necesitamos es la clave del servidor para hacer uso del servicio de mensajería.

La clave del servidor la podemos encontrar en la configuración de Firebase dentro de la opción «Mensajería en la nube»

Adicionalmente, para los objetivos de esta prueba, necesitamos el token del dispositivo al que queremos enviar el mensaje.

El token que identifica al cliente lo hemos podido ver en la propia página tras permitir el uso de menjsaría por parte del navegador.

4.1. Desde cualquier terminal

Vamos a hacer una primera prueba de envío y recepción de mensajes a nuestra aplicación web, para ello,
podemos realizar una prueba rápida a través del servicio REST de mensajería del propio Firebase.

curl --header "Authorization: key=AIz ... qJ8" --header Content-Type:"application/json" https://fcm.googleapis.com/fcm/send 
-d "{\"to\":\"d2n8awzwFNs:APA91bEnyeP6hRCF15caUWOKboV7oRh7ClVUVKapsjtvBAL37tX5-LgjZyAsSJz5TBXnI_AUHbMp2bhcLpS13OF-ga0252L1N8-G056sblJQ0g3tFER9Dj0Dy2WU2p9Hz0-fHNNNZdRN\",
\"notification\":{\"body\":\"Ahi va mi primer mensase...\"},\"priority\":10}"

Una vez enviado el comando de CURL recibiremos una notificación del sistema como la siguiente.

4.2. Desde la consola.

Lo mismo podríamos hacer desde la consola pulsando sobre nuevo mensaje

Asignando un texto, un id de dispositivo y podemos enviar el mensaje ahora o encolarlo para enviarlo en una fecha determinada

Podemos acceder al listado de mensajes enviados o pendientes de enviar también desde la consola.

También es interesante la opción de enviar mensajes a una aplicación entendiendo como tal un proyecto IOS o Android registrado,
lo que significa enviar mensajes a todos los distitivos de este tipo.

5. Gratuito.

Si, a día de hoy, es gratuito; dentro de los precios de uso de la plataforma la mensajería en la nube no tiene costes.

6. Referencias.

• https://firebase.google.com/docs/cloud-messaging/
• https://github.com/firebase/quickstart-js/tree/master/messaging

7. Conclusiones.

Sin necesidad de hacer uso de más servicios de Firebase podemos tener cubiertas nuestras necesidades
de mensajería en la nube de una manera muy sencilla desde el punto de vista de desarrollo y arquitectura.

Un saludo.

Jose