I think I'm missing something that is likely incredibly easy.
I'm registering a service worker to receive push notifications from my server via GCM. This works fine.
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.
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.
So my question boils down to: 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?
In my web app, I'm registering the service worker like this:
core.jsvar uid = "89123891231239"; // Dummy global id variable
var token = "eo4Dr8qhrFY"; // Dummy global token variable
function setupPushNotifications(){
    console.log("Setting up push notifications");
    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);
        });
    }
}
Then, I have a service worker that looks like this:
pushWorker.js'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 = "EXISTS_IN_CORE.JS";
    var token = "ALSO_EXISTS_IN_CORE.JS";
    console.log("Push recieved - we need to know the uid and token here, from core.js");
    event.waitUntil(  
        fetch("https://oapi.co/o?f=getExtraPushData&uid=" + uid + "&t=" + 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 = "https://oapi.co/occurrences_secure/img/stepNotify_1.png";  
          var notificationTag = 'notification-error';  
          return self.registration.showNotification(title, {  
              body: message,  
              icon: icon,  
              tag: notificationTag  
            });  
        })  
    );  
});
I've read about the limitations of workers here: Accessing localStorage from a webWorker
And I am aware of the postMessage function, but I can't figure out how to make sense of it in practice.
Any help would be greatly appreciated.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With