javascript如何修改服务工作者中的当前响应？

Question

我使用 service worker 用下面的代码修改 fetch 响应，

self.addEventListener('install', function(event) {
  console.log('install');
});

self.addEventListener('activate', function(event) {
  console.log('Claiming control');
  return self.clients.claim();
});

self.addEventListener('fetch', function(event) {
  console.log("fetch event")
  event.respondWith(
    fetch(event.request).then(function (response) {
      if(response.url.match('.mp4')){
        console.log(event);
        response.arrayBuffer().then(
          buffer =>{
            let length = 100
            view = new Uint8Array(buffer,0,length)
            for(i=0,j=length - 1; i<j; i++,j--){
                view[i] = view[i] ^ view[j]
                view[j] = view[j] ^ view[i]
                view[i] = view[i] ^ view[j]
            }
          }
        )
      }
      return response.clone();
    })
  );
});

这会导致这个警告和错误，

“”的 FetchEvent 导致网络错误响应： 承诺被拒绝。

sw.js:60 Uncaught (in promise) TypeError: Failed to execute 'clone' on 'Response'：响应正文已被使用 在 sw.js:60

---

如果我将clone() 放在arrayBuffer() 之前，如下所示，

self.addEventListener('install', function(event) {
  console.log('install');
});

self.addEventListener('activate', function(event) {
  console.log('Claiming control');
  return self.clients.claim();
});

self.addEventListener('fetch', function(event) {
  console.log("fetch event")
  event.respondWith(
    fetch(event.request).then(function (response) {
      if(response.url.match('.mp4')){
        console.log(event);
        responseCloned = response.clone();
        responseCloned.arrayBuffer().then(
          buffer =>{
            let length = 100
            view = new Uint8Array(buffer,0,length)
            for(i=0,j=length - 1; i<j; i++,j--){
                view[i] = view[i] ^ view[j]
                view[j] = view[j] ^ view[i]
                view[i] = view[i] ^ view[j]
            }
          }
        )
      }
      return responseCloned;
    })
  );
});

这会导致以下警告和错误，

“”的 FetchEvent 导致网络错误响应：a “主体”被锁定的响应不能用于响应 请求。

GET http://localhost/web/357765_decrypted.mp4 net::ERR_FAILED

Answer 1

尝试使用解密的字节实例化并返回一个新的Response()：

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.mp4') {
    event.respondWith(getDecryptedResponse(event.request))
  }
})

async function getDecryptedResponse(request) {
  const response = await fetch(request)
  const bytes = new Uint8Array(await response.arrayBuffer())

  return new Response(
    new Blob([ decryptMp4Bytes(bytes) ], { type: 'application/mp4' }),
    {
      headers: response.headers,  // possibly required for this case
    }
  )
}

Answer 2

如果我没记错的话，你会想要克隆那个响应作为你做的第一件事。

当你在它上面调用arrayBuffer()时，你不能再克隆它。