サービスワーカーでWebワーカーにアクセスするにはどうすればよいですか？

Question

私は最近、serviceworkerと一緒に働いています。そして、しばしば、サービスエンジニアのキャッシュに格納する前にフェッチした生データを処理したいという状況に遭遇します。たとえば、大量の生のテキストファイルを不要な空白を取り除く。このようにして、私のhttp要求へのキャッシュされた応答はすでに "最適化"されています。

ウェブワーカーでこれをやってみてはどうでしょう。なぜなら、多くの検索の後に、どのようにWebワーカーがサービス職員の中でどのようにアクセスできるようになったのか分かりませんでした。私はpostMessageを使ってWebワーカーのコンテキストを渡すことはできません。

質問：
サービスワーカーでWebワーカーにアクセスするにはどうすればよいですか？

Answer 1

現在、サービスワーカーからWebワーカーにアクセスすることはできません。これは将来変更される可能性があり、関連する標準の問題はhttps://github.com/whatwg/html/issues/411

です。通常のウェブページによって生成されたウェブワーカー内からキャッシュストレージAPIを使用することが可能であることに注意してください。理論的には、サービスワーカーのコンテキスト

これは厳しいガイドラインではなく個人的な好みですが、ネットワークから戻ってきたデータを変更し、キャッシュストレージAPIを使用して合成のResponseオブジェクトに保持するパターンが気に入らない。私はCache Storage APIを使用して、ネットワークから戻ったものを正確にコピーし、要求がネットワークかキャッシュから実行されているかどうかにかかわらず、コントロールされたページに同じように見えるようにしたい。

私が前に使用したパターンで、あなたが提案した方法でWebワーカーを使用するという利点がありますが、同様の方法でIndexedDBを使用することです。応答が既にIndexedDBにある場合は、それを使用し、そうでない場合は、Webワーカーを開始してネットワーク要求と処理を処理し、その結果を将来の使用のためにIndexedDBに格納します。

Here's an exampleこれは、非同期コード用のpromise-workerとidb-keyvalライブラリと共に、多くのES2015 +機能を利用するためのコードです。

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

そして労働者が（HTMLへの値下げを変換）何かlike thisを見ることができる：

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

あなたは、大量のデータを扱っている場合がありますので、このアプローチは、あまり意味を作り始めるだろうシリアライズのオーバヘッド、およびstreaming supportの欠如がありました。これは、Cache Storage APIを直接使用するだけで可能になるものと比較しています。