Showing posts with label fcm. Show all posts
Showing posts with label fcm. Show all posts

Wednesday, January 25, 2017

Firebase cloud messaging Push Notification for Websites (fcm)

Getting a Configuration File


FCM FLOW
FCM FLOW




  • 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