title: Why is my Service Worker's push event data/payload null?
body: <p>I have made multiple attempts to get desktop notifications working in Chrome, but I have not found a single source of documentation that covers a step by step procedure to get desktop notifications to work correctly. Each resource I have come across is either outdated or inconsistent with others.</p>
  
  <p>The problem I am facing is: once the Service Worker receives the <code>push</code> event,</p>
  
  <pre><code>self.addEventListener('push', function (event) {
      console.log(event);
      event.waitUntil(
          self.registration.showNotification(
              event.data.title,
              {
                  body: event.data.body,
                  icon: event.data.icon,
                  tag: event.data.tag
              }));
  });
  </code></pre>
  
  <p><code>event.data</code> is null. I expect it to have data that I am sending as JSON in a POST request like this:</p>
  
  <pre><code>POST https://fcm.googleapis.com/fcm/send HTTP/1.1
  Content-Type: application/json
  Authorization: key=&lt;FCM Server Key here&gt;
  
  {
      "data": {
          "title": "Foo",
          "body": "Bar"
      },
      "to": "&lt;recipient ID here&gt;"
  }
  </code></pre>
  
  <p>The weird thing is the registration script gets a "subscription endpoint" that looks like <code>https://android.googleapis.com/gcm/&lt;recipient ID here&gt;</code>, but I cannot get the POST to go through unless I follow other examples on the web that say to put the recipient ID as the <code>to</code> field in the JSON I am sending.</p>
  
  <p>Of all the examples I have come across, there are multiple URLs that POST calls are being made to:</p>
  
  <pre><code>https://fcm.googleapis.com/fcm/send
  https://android.googleapis.com/gcm/send
  https://gcm-http.googleapis.com/gcm/send
  </code></pre>
  
  <p>I have tried all three, with each attempt having the recipient at the end of the API address (like <code>https://fcm.googleapis.com/fcm/send/&lt;recipient ID here&gt;</code> and alternatively in the JSON body. My goal is to get <strong>Foo</strong> and <strong>Bar</strong> from the data I am sending into the <code>self.registration.showNotification(</code> method of the service worker.</p>
  
  <p>Why is <code>event.data</code> null? Can anyone point me to a <em>complete</em> guide from start to finish that favors FCM over GCM? Any help would be appreciated.</p>