我希望使用工作人员运行一个函数（在后台）。数据来自http请求。我正在使用模拟计算(e.data[0] * e.data[1] * xhrData.arr[3])（由返回实际算法结果的函数替换）如下：
var ajax = function() {
var prom = new Promise(function(resolve, reject){
if (!!XMLHttpRequest) {
var xhttp = new XMLHttpRequest();
xhttp.onload = function () {
if (this.readyState == 4 && this.status == 200) {
resolve(JSON.parse(this.responseText));
}
};
// Cache Logic - Will be adding logic to check cache
// if test.json is in cache.
// If it is then fetch res from cache
// There will be multiple XHR requests in parallel, not one
xhttp.open("GET", "test.json", true);
xhttp.send();
}
});
return prom;
}
async function test (e) {
var workerResult, xhrData;
try {
xhrData = await ajax();
workerResult = (e.data[0] * e.data[1] * xhrData.arr[3]);
postMessage({res: workerResult});
} catch(err) {
postMessage({err: 'Failed'});
}
}
onmessage = function (e) {
test(e);
};
这很好用。但是，这是一个纯 JS 实现。我计划为此使用一项服务（加上共享工作人员），因此我每个角度应用程序仅创建一个工作人员，并且不会出现内存问题。这将是表单提交的用户按钮操作的触发器。
我的问题：
首先，我想知道这是否可以由 Angular 本身的服务工作线程来完成，因为它也是一种后台工作线程。
其次，如果不可能，那么我可以从 Web Worker 访问 Service Worker 的缓存吗？以及是否可以访问此服务工作线程缓存。这应该怎么做？欢迎任何帮助。
请注意，我能够与服务工作人员一起工作，并且能够使用角度服务工作人员缓存所有静态资产。
Update:
我能够使用我当前正在处理的以下配置获得在角度应用程序中启用数据缓存的一些基本想法。
{
"name": "someapi",
"urls": ["/someuri", "/users"],
"cacheConfig": {
"strategy": "freshness",
"maxSize": 20,
"maxAge": "1h",
"timeout": "5s"
}
}
Update:
我能够以粗略的方式启动并运行它，但它有效。将需要 XHR 请求的资产添加到资产部分的 ngsw-config.json 中。这会将请求缓存到服务工作线程缓存中。可以使用以下命令打开服务工作者缓存caches.open('ngsw:db:${name}')但我不必那么做。
I created a web worker file inside the assets folder
The XHR request was made in it.
When a XHR was made the service worker automatically picked up the cache
So I did not have to use any alternate methods of cache access.
Sworkers was automatically served the XHR request from the cache.
这是我实现这一目标的方法。我为服务工作者创建了一个角度服务：
@Injectable({
providedIn: 'root'
})
export class WebworkerService {
myWorker: any;
constructor() {
this.myWorker = new Worker('/assets/web-worker.js');
this.myWorker.onmessage = function(data) {
console.log(data);
}
}
}
然后我创建了一个web-worker.js资产文件夹中的文件：
var ajax = function() {
var prom = new Promise(function(resolve, reject){
if (!!XMLHttpRequest) {
var xhttp = new XMLHttpRequest();
xhttp.onload = function () {
if (this.readyState == 4 && this.status == 200) {
resolve(this.responseText);
}
};
xhttp.open("GET", "/assets/test.md", true);
xhttp.send();
}
});
return prom;
}
async function test (e) {
var workerResult, xhrData;
try {
xhrData = await ajax();
workerResult = xhrData; // Some calculation or activity here
postMessage({res: workerResult});
} catch(err) {
postMessage({err: 'Failed'});
}
}
onmessage = function (e) {
test(e);
};
My ngsw-config.json有缓存 asset/test.md 的 asset 部分：
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}
从组件中，例如 app.component.ts 我触发了 postMessage()
@Component({
selector: 'app-root',
template:`
<h1 (click)="myHttp()">
Some Client Event
</h1>
`,
styleUrls: ['./app.component.css'],
providers: []
})
export class AppComponent {
constructor(private _ww: WebworkerService) { }
myHttp() {
this._ww.myWorker.postMessage('Test');
}
}
这使得 web-worker.js 触发 XHR 请求。虽然我原以为我必须自己使用缓存访问 api，但事实并非如此。服务工作线程自动从缓存中提供文件（这太棒了）。但是，如果需要访问缓存，我发现可以使用此处的缓存 API 来完成：https://developer.mozilla.org/en-US/docs/Web/API/Cache
我相信事情可以得到改善，文件结构可以根据最佳实践变得更清晰。如果您找到更好的解决方案，请留下答案，以便对大家有所帮助。
