Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I pass data, like a user ID, to a web worker for fetching additional push notification data from server?

Tags:

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.js

var 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.


Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!