Serviceworkerレスポンス本文を返すにはPostMessage経由でReadableByteStreamをBlobとして返しますか？

Question

私はChromeでServiceWorkerと仕事をしており、postMessageを使用してウェブページとサービス担当者とのやり取りを行っています。通信には、ファイルデータの要求と受信（Blobとして格納）が含まれます。代わりに、ネットワークからそれを要求するので、それを正しく取得するために

// param.name = "http://foo.css", 
// param.content = new Blob(
// ["span%2C%20div%20%7Bborder%3A%201px%20solid%20red%20!important%3B%7D"], 
// {type: "text/css"} 
//) 

caches.open(CURRENT_CACHE) 
    .then(function(cache) { 
     request = new Request(param.name, {mode: 'no-cors'}), 
     response = new Response(param.content); 
     cache.put(request, response) 
     .then(function() { 
      event.ports[0].postMessage({ 
      error: null 
      }); 
     }); 

これは、すべての権利、ファイルを保存すると、私は（フェッチ使用することができます）：

だが、私はこのようなブロブを格納していましょう。しかし、私は（）メソッドので、同じようマッチを使用している場合：私はresponse.bodyにReadableByteStreamを受けることだし、それはコンテンツとパスを抽出する方法を知らないで立ち往生しています

caches.open(CURRENT_CACHE) 
    .then(function(cache) { 
    return cache.match(param.name) 
     .then(function(response) { 
     return response.clone().blob(); 
     }) 
     .then(function (converted_response) { 
     if (converted_response) { 
      event.ports[0].postMessage({ 
      error: null, 
      data: converted_response 
      }); 
     } else { 
      event.ports[0].postMessage({ 
      error: { 
       'status': 404, 
       'message': 'Item not found in cache.' 
      } 
      }); 
     } 
     }); 

それはpostMessage経由で返されます。ただのpostMessageを完全に応答が失敗する返すため

私は現在、DataCloneErrorを投げ、クローン（）this articleあたりとして応答しようとしています：MessagePort上のpostMessageを実行に失敗しました、私もないんだけどどのに多くの情報を見つけること。

私はクローンを作成した場合、私は私が当時渡すが、読み取ろうとするときにのみ、undefinedを返すことができる新しいブロブ、与えブロブ呼び出すことができます：あなた自身を試してみたい場合は

var r = new FileReader() 
return r.readAsText(my_blob); 

を（？） ：

ServiceWorkerでファイルを保存するために、そのインスペクタコンソールでこれを実行します。

caches.keys() 
    .then(function (list) {return caches.open(list[0])}) 
    .then(function (cache) 
     request = new Request("http://foo.css", {mode: 'no-cors'}), 
     response = new Response(new Blob(
     ["span%2C%20div%20%7Bborder%3A%201px%20solid%20red%20!important%3B%7D"], 
     {type: "text/css"} 
    )); 
     cache.put(request, response) 
     .then(function() { 
      event.ports[0].postMessage({ 
      error: null 
      }); 
     }); 
    }) 
    .catch(function(error) { 
     event.ports[0].postMessage({ 
     error: {'message': error.toString()} 
     }); 
    }); 

取得するには：

caches.keys() 
    .then(function (list) {return caches.open(list[0])}) 
    .then(function (cache) {return cache.match("http://foo.css")}) 
    .then(function(answer) { 
    console.log(answer.body); 
    var b = response.body; 
    return answer.clone().blob(); 
    }) 
    .then(function (x) { 
     console.log(x); 
     var r = new FileReader(); 
     return r.readAsText(x) 
    }) 
    .then(function (y) { 
    console.log("DONE"); 
    // undefined 
    console.log(y); 
    }) 

質問： ReadableByteStreamを処理して抽出する方法を任意のヒントそれは私がのpostMessageの上に戻ってそれを渡すことができブロブなどのコンテンツ/ MIMEタイプですか？ありがとう！あなたが適切readAsText(my_blob)を使用していないためだ

Answer 1

If I clone, I can call blob giving me a new(?) Blob, which I can then pass back but which only return undefined when trying to read:

var r = new FileReader() 
return r.readAsText(my_blob); 

。ファイルリーダーのonloadプロパティにコールバックを添付し、コールバックが呼び出されたときに約束を解決する必要があります。私が意味する、代わりの：

.then(function (x) { 
    console.log(x); 
    var r = new FileReader(); 
    return r.readAsText(x) 
}) 

用途：

.then(function (x) { 
    return new Promise(function (resolve) { 
    var r = new FileReader(); 
    r.onload = resolve; 
    r.readAsText(x); 
    }); 
}) 

Question: Any tips how to handle ReadableByteStream and extract it's content/mime-type as Blob so I can pass it back over postMessage? Thanks!

あなたは、単にブロブオブジェクトから属性typeを読み取ることができ、そのMIMEタイプを抽出するために。

.then(function (x) { 
    console.log(x.type); // <-- the mime type 
    return new Promise(function (resolve) { 
    var r = new FileReader(); 
    r.onload = resolve; 
    r.readAsText(x); 
    }); 
})