Cloud Messaging Web / Notificaciones Push

Que tal amigos. Durante mucho tiempo he intentado configurar notificaciones en Aplicaciones Web. Aunque hay diferentes guias/ayudas en la pagina oficial de Google y otras fuentes no encontraba algo suficientemente claro. Asi que ahora que lo pude descifrar lo compartire con ustedes de la manera mas sencilla.

Necesitamos 2 cosas:

1. Configurar un script que maneje las notificaciones cuando la App esta el primer plano
2. Configurar un Service Worker que maneje las notificaciones cuando la App esta en segundo plano

Punto 1 – Notificaciones primer plano

Necesitamos incluir lo siguiente antes de terminar la etiqueta body:

<script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-app.js"></script><script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-messaging.js"></script> 

Importante Usar la ultima version disponible, hay bugs que se presentan en versiones anteriores

Luego incluir dentro de etiqueta script o cargar un .js que contenga lo siguiente:

Explicacion "firebase.initializeApp" despues del codigo
firebase.initializeApp({
    apiKey: "AIzaSyAtfjhwSejSSf3V27vGFKatek2-_Xbl3RhU",
    authDomain: "test-testing-bf120.firebaseapp.com",
    databaseURL: "https://test-testing-bf120.firebaseio.com",
    projectId: "test-testing-bf120",
    storageBucket: "test-testing-bf120.appspot.com",
    messagingSenderId: "673318603131",
    appId: "1:683348801131:web:94a22600bcd1fb12cae0de",
    measurementId: "G-PJW2DH1WE7"
});
const messaging = firebase.messaging();

Explicacion "VapidKey" despues del codigo
messaging.usePublicVapidKey('BHruV9RRmWrXpUVw5d_g0LFcGFizTCqW202iitpgS3ywXrGUQxXsbv90YrHx6l3yya4SDmciUt5HXj_gmsZeS_o');
messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
});

function requestPermission() {
  console.log('Requesting permission...');
  // Pregunta al usuario Permiso para enviar Notificaciones
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Permiso para notificaciones otorgado :D');
      resetUI();
    } else {
      console.log('No nos dieron permiso para enviar notificaciones :(');
    }
  });
}

function resetUI() {
  // Obtener Token (identificador personal de ESTE dispositivo) 
  // Inicialmente se trae de la red. Luego se consulta desde la cache 
  messaging.getToken().then((currentToken) => {
    if (currentToken) {
      // TODO. Guardar el token en el servidor 
      console.log(currentToken)
    } else {
      // Pedir permiso para enviar notificaciones
      console.log('No hay un token disponible. Pedir permiso para generar un token');
      // Pide Permiso
      requestPermission()
      }
  }).catch((err) => {
    console.log('Ocurrio un error pidiendo el token ', err);
  });
}
resetUI()

Donde consigo los datos que van en firebase.initializeApp?

Estos datos son especificos de tu aplicacion/proyecto. Estan disponibles en la consola de firebase (https://console.firebase.google.com/) «Tu proyecto» ->»Configuracion del proyecto» dentro de la pestaña «General». Al final tiene un boton (radio button) que dice «configuracion» lo pinchas y te aparecera toda la configuracion que necesitas. Esta configuracion la pegas dentro de firebase.initializeApp

Donde Consigo VAPID Key?

Tambien es especifico de tu aplicacion/proyecto. Disponible en la consola de firebase (https://console.firebase.google.com/) «Tu proyecto» ->»Configuracion del proyecto» dentro de la pestaña «Mensajeria en la Nube» Al final de la pagina dice «Certificados de envío web» y aparece una clave larga. Esta es la que buscamos (Tecnicamente esta es la clave publica). La copias y la pegas en messaging.usePublicVapidKey

Eso son los datos que necesitamos para el Paso 1. El codigo es autoexplicativo pero las demas funciones son funciones que piden permiso o hacen log a la consola de diferente informacion.

Importante La funcion messaging.onMessage es la que se ejecuta cuando se recibe un mensaje. Para efectos del ejercicio solo esta haciendo Log a la consola. Pero este es el lugar donde incluiras tu codigo personalizado para crear un snackbar/mensaje dinamico

messaging.onMessage(payload => {
  console.log('Message received. ', payload);
});

Paso 2 – Recibir notificaciones en Segundo Plano

El service Worker que recibira las notificaciones cuando la App este en segundo plano. Por defecto se debe llamar firebase-messaging-sw.js y estar ubicado en la raiz de la App (https://miapp.com/firebase-messaging-sw)

Debe contener lo siguiente:

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.
Importar aqui la misma version que usamos anteriormente
importScripts('https://www.gstatic.com/firebasejs/7.18.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.18.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
Usar la misma configuracion que usamos en Paso 1
firebase.initializeApp({
    apiKey: "AIzaSyAthVGwsjSSf3V27vGFKatek2-_Xbl3RhU",
    authDomain: "test-testing-bf120.firebaseapp.com",
    databaseURL: "https://test-testing-bf120.firebaseio.com",
    projectId: "test-testing-bf120",
    storageBucket: "test-testing-bf120.appspot.com",
    messagingSenderId: "686758603131",
    appId: "1:68338603131:web:94a22600bcd1fb12cae0de",
    measurementId: "G-PJRWTY71WE7"
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

// Esta funcion es la que maneja los mensajes cuando la App esta en segundo plano
messaging.setBackgroundMessageHandler(function (payload) {
    console.log('[firebase-messaging-sw.js] Received background message ', payload);
    // Customize notification here
    const notificationTitle = 'Background Message Title';
    const notificationOptions = {
        body: 'Background Message body.',
        icon: '/firebase-logo.png'
    };

    return self.registration.showNotification(notificationTitle,
        notificationOptions);
});

Importante Esta funcion messaging.setBackgroundMessageHandler es la que se ejecuta cuando recibe una notificacion en segundo plano. En este ejemplo tiene datos de demo. Debes modificarla segun tus necesidades

Una vez realizados los pasos 1 y 2 ya estas listo para recibir notificaciones push. Para probar debes ir a el menu «Crecimiento» -> «Cloud Messaging«

Al hacer clic en «Enviar mensaje de prueba» te aparecera una ventana donde debes pegar el token que genero tu aplicacion. Es un string largo en la consola. Al hacer clic en el boton «Testar» deberia aparecer un nuevo log en tu consola con la informacion de la notificacion. Esto para las notificaciones en primer plano y en segundo plano.

Importante Sino te aparece el icono de notificacion en las notificaciones de segundo plano revisa que no tengas activado No Molestar en tu windows o Mac. Esto oculta todas las notificaciones y no te mostrara las de tu aplicacion.

NOTA. Este articulo no incluye la creacion de un archivo manifest.json ni la configuracion de SSL en la Aplicación que son necesarios para que las notificaciones push funcionen

Aca hay un repositorio de referencia. Contiene lo que vimos en el articulo pero mas completo

https://github.com/firebase/quickstart-js/tree/master/messaging