title: How do I pass data, like a user ID, to a web worker for fetching additional push notification data from server?
body: <p>I think I'm missing something that is likely incredibly easy.</p>
  <p>I'm registering a service worker to receive push notifications from my server via GCM. This works fine.</p>
  <p>Unfortunately, I can't pass any data along with my push notification, so when the service worker receives the push, it doesn't know anything about it. So before I show the notification, I call back to my server to request additional information about the push, like the title, message and icon.</p>
  <p>My problem is that when I call back to my server for additional information, before displaying the push, I don't have any information in the service worker about the user requesting additional information. In order to collect that information, I need to pass a user ID and token to my server.</p>
  <p>So my question boils down to: <strong>How do grab the user id and token variables from my core.js code into the service worker so I can use them to gather additional information from my server?</strong></p>
  <p>In my web app, I'm registering the service worker like this:</p>
  <h2><code>core.js</code></h2>
  
  <pre class="lang-js prettyprint-override"><code>var uid = &quot;89123891231239&quot;; // Dummy global id variable
  var token = &quot;eo4Dr8qhrFY&quot;; // Dummy global token variable
  
  function setupPushNotifications(){
      console.log(&quot;Setting up push notifications&quot;);
  
      if ('serviceWorker' in navigator) {
  
          navigator.serviceWorker.register('js/pushWorker.js').then(function(reg) {
  
              console.log(reg);
  
              reg.pushManager.subscribe({
                  userVisibleOnly: true
              }).then(function(sub) {
                  console.log('endpoint:', sub.endpoint);
              });
  
          }).catch(function(error) {
              console.log('Error: ', error);
          });
      }
  }
  </code></pre>
  <p>Then, I have a service worker that looks like this:</p>
  <h2><code>pushWorker.js</code></h2>
  <pre><code>'use strict';
  
  self.addEventListener('install', function(event) {
      self.skipWaiting();
      console.log('Installed', event);
  });
  
  self.addEventListener('activate', function(event) {
      console.log('Activated', event);
  });
  
  self.addEventListener('push', function(event) {  
  
      var uid = &quot;EXISTS_IN_CORE.JS&quot;;
      var token = &quot;ALSO_EXISTS_IN_CORE.JS&quot;;
  
      console.log(&quot;Push recieved - we need to know the uid and token here, from core.js&quot;);
  
      event.waitUntil(  
          fetch(&quot;https://oapi.co/o?f=getExtraPushData&amp;uid=&quot; + uid + &quot;&amp;t=&quot; + token).then(function(response) {  
            if (response.status !== 200) {  
              console.log('Looks like there was a problem. Status Code: ' + response.status);  
              throw new Error();  
            }
  
            return response.json().then(function(data) {  
              if (data.error || !data.notification) {  
                console.error('The API returned an error.', data.error);  
                throw new Error();  
              }  
  
              var title = data.notification.title;  
              var message = data.notification.message;  
              var icon = data.notification.icon;  
  
              return self.registration.showNotification(title, {  
                body: message,  
                icon: icon,  
              });  
            });  
          }).catch(function(err) {  
            console.error('Unable to retrieve data', err);
  
            var title = 'An error occurred';
            var message = 'We were unable to get the information for this push message';  
            var icon = &quot;https://oapi.co/occurrences_secure/img/stepNotify_1.png&quot;;  
            var notificationTag = 'notification-error';  
            return self.registration.showNotification(title, {  
                body: message,  
                icon: icon,  
                tag: notificationTag  
              });  
          })  
      );  
  });
  </code></pre>
  <p>I've read about the limitations of workers here: <a href="https://stackoverflow.com/questions/6179159/accessing-localstorage-from-a-webworker">Accessing localStorage from a webWorker</a></p>
  <p>And I am aware of the <code>postMessage</code> function, but I can't figure out how to make sense of it in practice.</p>
  <p>Any help would be greatly appreciated.</p>