javascript - 在 Angular 应用程序中使用 Webworkers(服务 worker 在 angular-cli 中缓存数据访问)

Question

我希望使用 worker 运行一个函数(在后台)。数据来自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 实现。我计划为此使用一项服务(加上一个共享 worker )，所以我只为每个 Angular 应用程序创建一个 worker 并且没有内存问题。这将是表单提交的用户按钮操作的触发器。

我的问题:

首先，我想知道这是否可以由 Angular 本身的服务 worker 来完成，因为它也是一种后台工作线程。

其次，如果不可能，那么我可以从 web worker 访问 service worker 的缓存吗？是否可以访问此服务 worker 缓存。这应该怎么做？欢迎任何帮助。

请注意，我能够使用服务 worker ，并且能够使用 Angular 服务 worker 缓存所有静态 Assets 。

更新:

使用我目前正在处理的以下配置，我能够获得在 Angular 应用程序中启用数据缓存的一些基本想法。

{
    "name": "someapi",
    "urls": ["/someuri", "/users"],
    "cacheConfig": {
      "strategy": "freshness",
      "maxSize": 20,
      "maxAge": "1h",
      "timeout": "5s"
    }
  }

更新:

我能够粗略地启动并运行它，但它确实有效。将需要 XHR 请求的 Assets 添加到 Assets 部分的 ngsw-config.json 中。这将请求缓存到服务 worker 缓存中。服务 worker 缓存可以使用 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.

我是这样实现的。我为服务 worker 创建了一个 Angular 服务:

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

}

然后我在 assets 文件夹中创建了一个 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);
};

我的 ngsw-config.json 有缓存 assets/test.md 的 Assets 部分:

{
    "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，但事实并非如此。 service worker 自动从缓存中提供文件(这太棒了)。但是，如果需要访问缓存，我​​发现可以使用此处的缓存 API 来完成:https://developer.mozilla.org/en-US/docs/Web/API/Cache

我相信可以根据最佳实践改进，文件结构可以变得更清晰。如果您找到更好的解决方案，请留下答案，以帮助大家。

Answer 1

是的，这可以由 service worker 完成，但是:

• 如果浏览器认为 service worker 已经完成工作，它可以终止它。因此，请务必将所有内容包装在一个 promise 中，并使用 event.waitUntil 来确保进程在完成之前不会终止。

  self.addEventListener("消息", 函数(事件) { event.waitUntil(测试(事件));});

• Service Worker 在单线程上运行，因此如果您进行长时间的同步操作，您的页面的每个请求都会变慢。 Service Worker 不适合做长计算。

是的，共享 worker 可以访问缓存 api。您可以使用全局变量缓存以与服务 worker 相同的方式访问它

caches.open(cacheName).then(function(cache) {
      cache.match("...")
});