Firebase cloud messaging Push Notification for Websites (fcm)

Getting a Configuration File

FCM FLOW

• Go to firebase console and create a new project.

• Now put your app name and select your country.

• Now click on Add Firebase to Your Android App.
• Write some code for registering the service worker
• index.html 
• this file is responsible to subscribe the user devices and sends the device tokens to server.

include below js file: https://www.gstatic.com/firebasejs/3.6.2/firebase.js add below script code in script tag:

 var config = {
            apiKey: "AIzaSyDaY7_6yfeMbXIQNLgrLa3n_IqweQ",
                    authDomain: "push-a1eaa.firebaseapp.com",
                    databaseURL: "https://push-a1eaa.firebaseio.com",
                    storageBucket: "push-a3eaa.appspot.com",
                    messagingSenderId: "3490973264967"
            };
            firebase.initializeApp(config);
             
 


            const messaging = firebase.messaging();
            messaging.requestPermission()
                    .then(function () {
                    console.log('Have permission');
                    return messaging.getToken();
                    })
                    .then(function (token) {
                    document.getElementById("bigone").innerHTML = token;
                    console.log(token);
                    })
                    .catch(function (err) {
                    console.log('Unable to get permission to notify.', err);
                    });


            messaging.onMessage(function (payload) {
            
            console.log("Message received. ", payload);
            });
 

• firebase-messaging-sw.js
  include two files : https://www.gstatic.com/firebasejs/3.5.2/firebase-app.js https://www.gstatic.com/firebasejs/3.5.2/firebase-messaging.js
  

  // Initialize the Firebase app in the service worker by passing in the
  // messagingSenderId.
  firebase.initializeApp({
    'messagingSenderId': '3490973264967'
  });
  
  // Retrieve an instance of Firebase Messaging so that it can handle background
  // messages.
  const messaging = firebase.messaging();
   
  
  // 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 = payload.notification.title;
    const notificationOptions = {
      body: payload.notification.body,
      
    };
  
    return self.registration.showNotification(notificationTitle,
        notificationOptions);
  });
  

• this file is responsible to receive the messages from fcm and shows the notification information
• Send Push notifications to client
• Curl request on the server side:   

  curl "https://fcm.googleapis.com/fcm/send" --request POST --header "Authorization: key=server_key" --header "Content-Type: application/json" -d "{\"to\":\"client_token\"}"
  

  Example: URL:fcm.googleapis.com/fcm/send
  method: POST
  Authorization:key=AIzaSyDJK8dkx_7-7RdJ3YsIg_ueGFnPgOGQD0k
  {
  "notification": {
  "title": "Portugal vs. Denmark",
  "body": "5 to 1",
  "icon": "firebase-icon.png",
  "click_action": "http://localhost:8081"
  },
  "registration_ids":["eBdhRIGunJk:APA91bFVvA9XMJoXrKrgvY57wiY4tIsYJFLjW5AjgZOIZ-dRDIDxkM87eCEokvRW9jk01kyFN-
  ypGYTQ_PymwbAglwS00tQqrKiG1ex29V_Uplje7dbqV988MuyifJ1zBAesHGI0vger","coWde0lMz-Q:APA91bFZB9MRqO04ZOfk80VV8WAnmDng7_NPTPDGP2Bi0PbVhPPOT-
  Nr7vfmLiDDLA1N9Y-wAYv0pGDgKImKoN1uVgCQ_2uAfVexo0wM8UEs7tY8UNNXnZjSdzEK67XSlB8o6TIZQs0G"]
  }
  
• Reference youtube url  Getting Started with Firebase Cloud Messaging on the Web - Firecasts