title: Not receiving FCM Push Notification for web on localhost
body: <p>So I need to implement web push notifications in our web app, I have successfully setup the firebase cloud messaging in my app with the help of docs, I'm able to ask the user to allow permission for notifications and get the token id as well if he accepts the permission.</p>
  
  <p>The thing is when I try to send a notification to test to the generated token, I'm getting a response that the message is sent, but I'm not able to receive it on the client side.</p>
  
  <p>My index.html </p>
  
  <pre><code>&lt;head&gt;
    &lt;script src="https://www.gstatic.com/firebasejs/4.4.0/firebase.js"&gt;&lt;/script&gt;
    &lt;link rel="manifest" href="./firebase.json"&gt;
  &lt;/head&gt;
   &lt;script&gt;
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('./firebase-messaging-sw.js').then(function(registration) {
        console.log('Firebase Worker Registered');
  
      }).catch(function(err) {
        console.log('Service Worker registration failed: ', err);
      });
    }
    &lt;/script&gt;
  </code></pre>
  
  <p>I'm successfully able to register the service worker file</p>
  
  <p>My App.component.ts</p>
  
  <pre><code>var config = {
              apiKey: "somekey",
              authDomain: "someproject-2.firebaseapp.com",
              databaseURL: "https://someproject-2.firebaseio.com",
              projectId: "someproject-2",
              storageBucket: "",
              messagingSenderId: "someid"
            };
            firebase.initializeApp(config);
  
  
  
          const messaging = firebase.messaging();
  
          messaging.requestPermission()
          .then(function() {
            console.log('Notification permission granted.');
            return messaging.getToken()
          })
          .then(function(result) {
              console.log("The token is: ", result);
          })
          .catch(function(err) {
            console.log('Unable to get permission to notify.', err);
          });
  
          messaging.onMessage(function(payload) {
          console.log("Message received. ", payload);
          });
  </code></pre>
  
  <p>I'm getting the permission dialog box asking permission and getting a token with this code</p>
  
  <p>The curl code I used to send messages</p>
  
  <pre><code>curl -X POST -H "Authorization: key=somekey" -H "Content-Type: application/json" -d '{
    "notification": {
      "title": "Portugal vs. Denmark",
      "body": "5 to 1",
      "icon": "firebase-logo.png",
      "click_action": "http://localhost:8081"
    },
    "to": "sometoken"
  }' "https://fcm.googleapis.com/fcm/send"
  </code></pre>
  
  <p>I'm able to successfully send notifications with this code</p>
  
  <p>I can't figure out where I'm going wrong, maybe because it's on localhost? maybe the onMessage method is not running properly? Any help is highly appreciated!</p>