Notificaciones Push con Firebase: cómo implementarlas

5min

Continuamos profundizando en nuestros tutoriales sobre cómo implementar notificaciones Push a la hora de crear un proyecto web, tal y como hemos estado avanzando en recientes artículos. En esta ocasión, nos centraremos en los pasos iniciales que debemos realizar para comenzar a distribuir notificaciones Push con Firebase. [banneroferta product=2] Solo ten en cuenta de lo siguiente. Para el envío de las notificaciones push para la web, tenemos involucrados dos elementos:

  • El sitio web, que tiene que solicitar permiso al usuario para enviar notificaciones, así como establecer la infraestructura para recibirlas.
  • El backend, que es el encargado de enviar la notificación.

En este artículo, trataremos la primera parte sobre cómo implementar notificaciones push con Firebase, que se realiza con JavaScript del lado del cliente. En próximos artículos, profundizaremos en el tema del backend.

Por favor, antes de comenzar, ten en cuenta los siguientes requisitos para envío de notificaciones:

  • Tener el sitio web sobre HTTPS
  • Tener un service worker, que es quien recibe las notificaciones aunque la página web no se encuentre activa en ese momento.
  • Que el usuario tenga un navegador compatible con las notificaciones, como Chrome, Firefox, Opera (Safari está incorporando la funcionalidad de service workers recientemente, así que en breves estará también disponible la recepción de notificaciones).

Si quieres refrescar qué es un service worker, puedes consultarlo en nuestro artículo Service workers, servicios web más allá del navegador.

Índice

Crear una aplicación Firebase

Debes comenzar por dirigirte a firebase.google.com y crear una aplicación. Desde el panel de control de la aplicación, la consola, tienes que entrar en la configuración del proyecto.

Luego, pulsa el botón Añade Firebase a tu aplicación web.

Entonces, te saldrá el snippet de código para agregar Firebase a tu proyecto. Es un código de JavaScript que carga Firebase y lo inicializa con los datos de tu app.

Crear el manifest.json

El archivo manifest.json sirve para definir las características de las Progressive Web Apps, como vimos en El manifiesto en las Progressive Web Apps. Si no lo tienes, debes incorporarlo en la raíz de tu dominio. Debería tener al menos el siguiente código:

{
 'gcm_sender_id': '103953800507'
}

Ten en cuenta que el valor gcm_sender_id es el mismo para todos los sitios que usen Firebase como servidor de notificaciones, así que no debes tocarlo.

Solicitar permiso para enviar notificaciones

Ahora, mediante JavaScript, necesitamos ejecutar el código que solicita permiso a los usuarios para enviarles notificaciones. El código hará uso del API de Firebase, que ya has incluido en el paso de inicializar tu aplicación.

firebase.messaging().requestPermission()
.then(function(token) {
 console.log('Recibido permiso.');
 // En el parámetro 'token' tienes el código para poder enviar las notificaciones
})
.catch(function(err) {
 console.log('No se ha obtenido permiso', err);
});

En el caso de que se otorgue el permiso, en la función del then, podrás recibir un token como parámetro. Este token tendrás que enviarlo a tu backend, con el método que juzgues oportuno. El backend lo necesitará para enviar la notificación, paso que no vamos a relatar todavía en este artículo.

Crea el archivo del service worker

Para poder recibir las notificaciones, Firebase necesita que hayas creado previamente un service worker en tu sitio. El archivo que tienes que crear se llama firebase-messaging-sw.js y tiene que estar en la raíz de tu dominio. Es importante recordar que el service worker solo funciona bajo HTTPS. Si necesitas más información sobre esto, te recomendamos nuestro artículo en que profundizamos sobre los Service Workers.

El código que colocarás en «firebase-messaging-sw.js» lo puedes ver en la siguiente página, resaltado en amarillo, de las líneas 15 a la 29: https://github.com/firebase/quickstart-js/blob/master/messaging/firebase-messaging-sw.js#L15-L29

Tendrás que cambiar YOUR-SENDER-ID por el messagingSenderId que aparecía en el snippet de configuración de tu app Firebase.

El service worker se encargará de lanzar la notificación si el sitio web no está abierto en una pestaña activa (en primer plano) en tu navegador. Pero si el sitio se encontrase activo, tendrías que recibir la notificación con un script en tu propia página, que podría ser algo así:

messaging.onMessage(function(payload) {
 console.log('Notificación recibida ', payload);
});

Probar la notificación

Por último, para probar las notificaciones, tienes que usar tu propio backend. Tienes que comunicar con el servidor de FCM (Firebase Cloud Messaging). Tendrás que hacer una solicitud https con estas características:

  • Destino: https://fcm.googleapis.com/fcm/send
  • Cabeceras:  
    Content-Type: application/json
Authorization: key=TU_LLAVE_SECRETA
  • Cuerpo: 
    { 'notification': {
 'title': 'Título de notificación',
 'body': 'Cuerpo del mensaje',
 'click_action' : 'https://example.com/URL-de-tu-sitio'
 },

'to' : 'TOKEN_DEL_USUARIO'
}

Encontrarás tu llave de servidor TU_LLAVE_SECRETA dentro de la consola de Firebase, en la parte de configuración y, después, en MENSAJERÍA EN LA NUBE.

El TOKEN_DEL_USUARIO es la cadena que conseguiste al autorizar las notificaciones, que dijimos que se tendría que enviar al backend para su conocimiento.

Esta solicitud HTTPS la deberías iniciar desde el backend, pero a modo de prueba la puedes implementar desde la consola de comandos, por ejemplo usando CURL. Con esto, deberías tener implementadas tus notificaciones push con Firebase.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: