如何将数据(如用户 ID)传递给 Web 工作人员，以便从服务器获取其他推送通知数据

Question

我想我错过了一些可能非常容易的东西。

我正在注册一个服务工作线程，以通过 GCM 从我的服务器接收推送通知。这工作正常。

不幸的是，我无法将任何数据与推送通知一起传递，因此当服务工作者收到推送时，它对此一无所知。因此，在显示通知之前，我会回调到我的服务器以请求有关推送的其他信息，例如标题、消息和图标。

我的问题是，当我回调服务器以获取更多信息时，在显示推送之前，我在服务工作者中没有任何关于请求其他信息的用户的信息。为了收集该信息，我需要将用户 ID 和令牌传递给我的服务器。

所以我的问题归结为：如何将用户 ID 和令牌变量从我的核心.js代码中获取到服务工作线程中，以便我可以使用它们从我的服务器收集其他信息？

在我的 Web 应用中，我像这样注册服务辅助角色：

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);
        });
    }
}

然后，我有一个看起来像这样的服务工作者：

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  
            });  
        })  
    );  
});

我在这里读到了关于worker的限制：从webWorker 访问localStorage。

我知道postMessage功能，但我不知道如何在实践中理解它。

任何帮助将不胜感激。

Answer 1

您可以像这样轻松解决问题：

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);
    });
}

这里的关键是...

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

。因为在代码的这一点上，你将可以访问 postMessage（）;

在辅助角色代码中，请确保具有以下内容：

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;
});

当您

最终需要调用服务器并请求其他推送信息时，这将使您能够全局访问您的 userID 和 userToken 信息。