如何訪問服務工作者中的Web Workers？

Question

我最近和serviceworker工作很多時候經常會遇到這樣的情況，我希望在將它存儲到serviceworker緩存之前處理一些原始數據 - 例如用例將處理一個大的原始文本文件以刪除不必要的白色空間。 這樣，對我的http請求的緩存響應就已經“優化”了。

我在想，為什么不在webworker中這樣做，但唉，經過多次搜索，我還沒有發現如何在服務人員內部訪問webworker。 這不像我可以使用postMessage傳遞webworker上下文。

問題 ：
如何訪問服務工作者中的Web Workers？

Answer 1

目前無法從服務工作者中訪問Web工作者。 這可能會在未來發生變化，相關的標准問題是https://github.com/whatwg/html/issues/411

請注意，可以在由普通網頁生成的Web工作者中使用Cache Storage API，因此理論上您可以在服務工作者的上下文之外執行您的建議。

這是個人偏好而不是嚴格的指導方針，但我不喜歡修改從網絡返回的數據，然后使用Cache Storage API將其保存在合成的Response對象中的模式。 我更喜歡使用Cache Storage API來保存從網絡中返回的內容的精確副本，這樣無論是從網絡還是從緩存中完成請求，對於受控頁面看起來都是一樣的。

我之前使用的模式，以及以您建議的方式使用Web worker的額外好處，是以類似的方式使用IndexedDB。 如果響應已經在IndexedDB中，那么您只需使用它，如果不是，則啟動Web工作程序來處理網絡請求和處理，然后將結果存儲在IndexedDB中以備將來使用。

下面是一些代碼的示例 ，它使用了許多ES2015 +功能，以及用於異步代碼的promise-worker和idb-keyval庫。

import PromiseWorker from 'promise-worker';
import idbKeyValue from 'idb-keyval';

export default async (url, Worker) => {
  let value = await idbKeyValue.get(url);
  if (!value) {
    const promiseWorker = new PromiseWorker(new Worker());
    value = await promiseWorker.postMessage(url);
    // Don't await here, so that we can return right away.
    idbKeyValue.set(url, value);
  }
  return value;
};

然后工作者可能看起來像這樣 （將Markdown轉換為HTML）：

import 'whatwg-fetch';
import MarkdownIt from 'markdown-it';
import registerPromiseWorker from 'promise-worker/register';

const markdown = new MarkdownIt();

registerPromiseWorker(async url => {
  const response = await fetch(url);
  const text = await response.text();
  return markdown.render(text);
});

如果您處理大量數據，這種方法將開始變得不那么有意義，因為與僅直接使用Cache Storage API相比，序列化的開銷和缺乏流支持 。