How do you retrieve notification/data from a request?
<p>I'm trying to send a basic notification using Firebase Cloud Messaging, but I cannot for the life of me figure out how to include any actual content in the notification.</p>

<p>I'm starting with essentially a stripped-down version of what can be found <a href="https://developers.google.com/web/fundamentals/getting-started/codelabs/push-notifications/?hl=en" rel="nofollow noreferrer">here</a>. I have three files, a manifest.json, which looks like this:</p>

<pre><code>{ "gcm_sender_id": "my sender id" }
</code></pre>

<p>an index.html, which looks like this:</p>

<pre><code>&lt;html&gt;                                                                                                  
  &lt;head&gt;&lt;link rel="manifest" href="manifest.json"&gt;&lt;/head&gt;
  &lt;body&gt;
    &lt;div id="endpoint-show"&gt;There doesn't seem to be an endpoint right now&lt;/div&gt;

    &lt;script src="https://www.gstatic.com/firebasejs/3.5.0/firebase-app.js"&gt;&lt;/script&gt;                    
    &lt;script src="https://www.gstatic.com/firebasejs/3.5.0/firebase-messaging.js"&gt;&lt;/script&gt;              
    &lt;script&gt;                                                                                            
      var config = {apiKey: "my key", authDomain: "my domain", messagingSenderId: "my id"};                                                                                                
      firebase.initializeApp(config);                                                                   

      const messaging = firebase.messaging();                                                           
      messaging.requestPermission()                                                                     
        .then(function() { console.log('Notification permission granted.'); })                          
        .catch(function(err) { console.log('Unable to get permission to notify. ', err); });            

      navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {                          
        serviceWorkerRegistration.pushManager.subscribe({userVisibleOnly: true})                        
          .then(function(subscription) {                                                                
            document.getElementById("endpoint-show").innerHTML = "&lt;p&gt;" + subscription.endpoint.split('/\').slice(-1)[0] + "&lt;/p&gt;";                                                                               
          })                                                                                            
        });                                                                                             
      navigator.serviceWorker.register('./service-worker.js')                                           
    &lt;/script&gt;                                                                                           
  &lt;/body&gt;                                                                                               
&lt;html&gt;
</code></pre>

<p>and a service-worker.js, which looks like:</p>

<pre><code>self.addEventListener('push', function(event) {
  console.log('Received a push message', event);
  event.waitUntil(self.registration.showNotification("title", { body: "body" }));
});
</code></pre>

<p>This seems to be about the minimum amount of code required to register a subscription for push notifications and establish a service worker to handle them.</p>

<p>I then send notifications using a curl command like the one shown <a href="https://firebase.google.com/docs/cloud-messaging/server" rel="nofollow noreferrer">here</a>. Ie, POST to <a href="https://fcm.googleapis.com/fcm/send" rel="nofollow noreferrer">https://fcm.googleapis.com/fcm/send</a> with those certain headers set and a body that contains a "too" field which is equal to the one that my idex.html shows. This works, insofar that I get a notification on my computer with the title "title" and the body "body".</p>

<p>But here is where I am stuck: It seems like the only data I can send through this request is the fact that a notification happens, and not any other (actual) data. The first example I linked just hard-codes a notification, as does my own code, but I would like to be able to send a request with arbitrary data. The documentation <a href="https://firebase.google.com/docs/cloud-messaging/concept-options#notifications_and_data_messages" rel="nofollow noreferrer">here</a> seems to indicate that I should be able to set either the <code>data</code> or <code>notification</code> field of the request, and get a notification that has that data, but that doesn't seem to work. I have set both fields in the request I'm making, so the whole thing looks something like this (which I am sending using postman):</p>

<pre><code>POST /fcm/send HTTP/1.1
Host: fcm.googleapis.com
Content-Type: application/json
Authorization: key=my key
Cache-Control: no-cache
Postman-Token: some token

{
    "notification": {
        "body": "notification body",
        "title": "notification title"
    },
    "data": {
        "body": "data body",
        "title": "data title"
    },
    "to" : "my endpoint"
}
</code></pre>

<p>But I can't figure out how to actually retrieve any of that data. The event that my service worker captures does not contain any of this data. None of the documentation I have looked at seems to describe how to actually get this data through the web, only on Android or iOS, but obviously it is possible since many website implement dynamic notifications.</p>

<p>I suspect that I have some fundamental misunderstanding of how all of this works, which would not be surprising since I have very little experience with any kind of web development. If what I'm trying to do is impossible, or much be done a completely different way, let me know.</p>

<p>And just to reiterate, here is exactly what I am trying to do:</p>

<ol>
<li><p>Send a request (whether that is to a webserver that I write or to firebase).</p></li>
<li><p>Have a notifcation pop up on my Chrome with information from that request.</p></li>
</ol>