How to transfer data, such as user ID, to a web worker to receive additional push notification data from the server?

Question

I think I'm missing something, which is probably incredibly simple.

I register a service employee to receive push notifications from my server through GCM. It works great.

Unfortunately, I cannot transmit any data along with my push notification, so when the work service receives a push, it does not know anything about it. Therefore, before I show the notification, I will call back to my server to request additional information about the click, for example, name, message and icon.

My problem is that when I return to my server for more information, before displaying the click, I have no information in the service worker that the user is requesting additional information. To collect this information, I need to transfer the user ID and token to my server.

So, my question boils down to the following: How to capture user ID and tokens from my core.js code into a working service so that I can use them to collect additional information from my server?

In my web application, I register a service worker as follows:

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 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 read about working limitations here: Accessing localStorage from webWorker

And I know about the postMessage function, but I cannot figure out how to understand this in practice.

Any help would be greatly appreciated.

Answer 1

You can easily solve your problem as follows:

 if ('serviceWorker' in navigator) { navigator.serviceWorker.register('pushWorker.js').then(function() { return navigator.serviceWorker.ready; }).then(function(reg) { console.log('Service Worker is ready', reg); reg.pushManager.subscribe({userVisibleOnly: true}).then(function(sub) { console.log('endpoint:', sub.endpoint); reg.active.postMessage(JSON.stringify({uid: uid, token: token})); console.log("Posted message"); }); }).catch(function(error) { console.log('Error : ', error); }); } 

The key is here ...

 reg.active.postMessage(JSON.stringify({uid: uid, token: token})); 

... since at this point in the code you will have access to postMessage ();

In your working code, make sure you have something like:

 self.addEventListener('message', function(event){ var data = JSON.parse(event.data); console.log("SW Received Message:"); console.log(data); self.userID = data.uid; self.userToken = data.token; }); 

This will give you global access to your userID and userToken information when you eventually need to call your server and request additional push information.