我想定期从我的 Service Worker 调用 API 以发送存储在 localStorage 中的数据。当用户浏览我的网站时，这些数据将被生成并保存在localStorage。将其视为将统计信息保存在localStorage 并通过服务人员定期发送。我该怎么做？我知道我无法从服务人员访问localStorage，必须使用postMessage API。任何帮助将不胜感激。
【问题讨论】：
标签： javascript local-storage progressive-web-apps service-worker postmessage
有several ways 用于客户端和控制服务工作者之间的通信，但localStorage 不是其中之一。
IndexedDB 是， 但这对于无论如何都应该保持苗条的 PWA 来说可能有点过头了。
无论如何，Broadcast Channel API 结果最简单。它比上面提到的postMessage() 和MessageChannel API 更容易实现。
在服务工作者和客户端中定义一个新的广播频道。
const channel4Broadcast = new BroadcastChannel('channel4');
要在工作人员或客户端中发送广播消息：
channel4Broadcast.postMessage({key: value});
要在工作人员或客户端中接收广播消息：
channel4Broadcast.onmessage = (event) => {
value = event.data.key;
}
【讨论】：
我自己为一个小型 webapp 项目偶然发现了这个问题，我考虑了以下解决方案：
当用户在线时，可以立即发送数据。当他离线时，我使用SyncEvent.tag 属性将信息从客户端发送到服务人员。像这样：
//offline_page.html (loads only, when user is offline)
button.onclick = function() {
//on click: store new value in localStorage and prepare new value for synchronization
localStorage.setItem("actual", numberField.value);
navigator.serviceWorker.ready.then(function(swRegistration) {
return swRegistration.sync.register('newval:'+numberField.value);
});
}
//sw.js
self.addEventListener('sync', function(event) {
//let's say everything in front of ':' is the option, everything afterwards is the value
let option = event.tag.replace(/(.*?)\:.*?$/, "$1");
let value = event.tag.replace(/.*?\:(.*?)$/, "$1");
if(option == "newval") {
event.waitUntil(
fetch("update.php?newval="+value)
.then(function(response) {
console.log(response);
})
);
}
});
update.php 将新值保存到后端，一旦用户上线。
这不会让 Service Worker 访问 localStorage，但会向他发送所做的所有更改。
刚刚开始习惯这个同步主题。所以我真的很感兴趣，无论这是否有帮助以及其他人对此解决方案的看法。
【讨论】：
我一直在使用这个名为 localforage 的包，它提供了一个类似于 localStorage 的接口，它围绕着 IndexedDB。 https://github.com/localForage/localForage
然后，您可以通过将其放置在您的公共目录中来导入它，以便由您的网络服务器提供服务，然后在您的服务人员中调用：self.importScripts('localforage.js');。
【讨论】：
您不能从 webworker 进程访问 localStorage（以及 sessionStorage），它们的结果将是 undefined，这是出于安全原因。
您需要使用postMessage() 回到 Worker 的原始代码，并让该代码将数据存储在 localStorage 中。
您应该使用localStorage.setItem() 和localStorage.getItem() 从本地存储中保存和获取数据。
更多信息：
下面的伪代码，希望它能让你开始：
// include your worker
var myWorker = new Worker('YourWorker.js'),
data,
changeData = function() {
// save data to local storage
localStorage.setItem('data', (new Date).getTime().toString());
// get data from local storage
data = localStorage.getItem('data');
sendToWorker();
},
sendToWorker = function() {
// send data to your worker
myWorker.postMessage({
data: data
});
};
setInterval(changeData, 1000)
【讨论】：
var myWorker = new YourWorker('YourWorker.js'), > new WebWorker 对吧？
new Worker() :)
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers 说
注意：localStorage 的工作方式与 Service Worker 缓存类似，但它是同步的，因此不允许在 Service Worker 中使用。
注意：如果需要，可以在 Service Worker 内部使用 IndexedDB 进行数据存储。
这里也有一点讨论：How do I access the local storage using service workers in angular?
【讨论】：