¿Cómo configurar notificaciones push en chrome con firebase?


Llevo algunas semanas trabajando en una  webApp en react y una api en sails y estoy implmentando  notificaciones con API de JavaScript de FCM que permite recibir mensajes de notificación en las apps web que se ejecutan en navegadores que admiten service worker Los siguientes navegadores están incluidos, entre otros:

  • Chrome: 50 y versiones posteriores
  • Firefox: 44 y versiones posteriores
  • Opera Mobile: 37 y versiones posteriores

1.- Crear cuenta de firebase

Como primer paso debemos crear una cuenta en firebase donde vamos a crear un nuevo proyecto como se ve en la siguiente imagen.

Una vez que se creo nuestra aplicación en firebase hacemos click en el boton “Añade Firebase a tu aplicación web”

copiamos el codigo que nos muestra y lo agregamos en nuestro archivo index.html

<script src="https://www.gstatic.com/firebasejs/5.0.2/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyBmalgd*******************",
    authDomain: "**********+.firebaseapp.com",
    databaseURL: "https://**********+.firebaseio.com",
    projectId: "**************",
    storageBucket: "************.appspot.com",
    messagingSenderId: "**********"
  };
  firebase.initializeApp(config);
</script>

2.- ¿Cómo inicializar el  servicio messaging de firebase?

Ya tenemos configurado firebase en nuestra aplicación web ahora debemos iniciar el servicio messaging para obtener el token y poder enviar las notificaciones push

vamos a nuestro archivo App.js que genero react y en la funcion componentDidMount iniciamos firebase

import React, { Component } from 'react';


const messaging = window.firebase.messaging();


class App extends Component {

  componentDidMount(){
    messaging.requestPermission()
      .then(() => messaging.getToken())
      .then( (token) => {
        console.log(token);
      })
      .catch(function(err) {
        console.log(err);
      });
    messaging.onMessage( (playload) => console.log(`message : ${JSON.stringify(playload)}`) )
  }


  render() {
    return (
      <div className="App">
        Notificaciones push
      </div>
    );
  }
}

export default App;

3.- The script has an unsupported MIME type (‘text/html’)

Si ejecutamos nuestra aplicación y vamos la consola de javascript nos sale un error The script has an unsupported MIME type (‘text/html’) esto se debe a que hacer falta el archivofirebase-messaging-sw.js  que se encarga de ejecutar en background y  recibir las notifcaciones, si la aplicación esta abierta y el tab o pestaña tiene el focus activado las notifaciones no llegaran al firebase-messaging-sw.js si no al evento onMessage del archivo App.js

4.- La solución para The script has an unsupported MIME type (‘text/html’)

creamos el archivo firebase-messaging-sw.js y lo colocamos en la carpeta public justo donde esta el archivo index.html con el siguiente codigo:

// [START initialize_firebase_in_sw]
// 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.
importScripts('https://www.gstatic.com/firebasejs/5.0.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/5.0.1/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
  'messagingSenderId': '*****'
});

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

// If you would like to customize notifications that are received in the
// background (Web app is closed or not in browser focus) then you should
// implement this optional method.
// [START background_handler]
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.'
  };

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

recuerda cambair el messagingSenderId que obtuviste al generar la app. Al ejecutar la aplicación obtenemos el siguiente resultado

5.- ¿Cómo obtener el token de firebase FCM?

Abrimos la consola de javascript y como mandamos a imprimir el token vamos a tener el token unico  de nuestro navegador para poder recibir las notifaciones push.

en caso de negar el acceso se ejecutara el error

6.- ¿Como  hacer pruebas para enviar notificaciones push al navegador web?

Bien  copiamos el token que esta en la consola de javascritp

6.1.- obtener certificados de envío web

ya tenemos el token del navegador pero necesitamos certificados de envío web para poder hacer una peticion y enviar la notificación para esto vamos al panel de firebase

y vamos a la opción a generar par de claves

y copiamos el token que generamos

6.2.- enviar notificación push

abrimos postman y enviamos a la siguiente peticion de tipo POST

POST https://fcm.googleapis.com/v1/projects/{nombredelproyecto}/messages:send

en este caso la petición seria la siguiente:

POST https://fcm.googleapis.com/v1/projects/notificaciones-push-fc185/messages:send

agregamos a los headers de la peticion el atributo authorization con el  valor Bearer seguido del token

en el body enviamos la siguiente data con el token del navegador

{
  "message":{
    "token" : "***************",
    "notification" : {
      "body" : "Mi primer notificación push",
      "title" : "Hola Abre el navegador",
      }
   }
}

 

excelente en nuestro proximo tutorial vamos a  implmentar firebase-admin para suscribir a los usuarios a topics y hacer solo 1 peticion a nuestra api y enviar a todos los usuarios suscritos.

Aqui algunos libros que me ayudaron mucho para programar