Response whose "body" is locked cannot be used to respond to a request
<p>I was just trying <strong>service workers</strong> in google chrome. I stumbled upon an error. <a href="https://www.google.cz/search?q=%22Response%20whose%20%22body%22%20is%20locked%20cannot%20be%20used%20to%20respond%20to%20a%20request.%22" rel="noreferrer">Googling the error gives one single result</a> at the moment which seems to be in the <a href="https://chromium.googlesource.com/chromium/src/third_party/+/master/WebKit/Source/modules/serviceworkers/RespondWithObserver.cpp#60" rel="noreferrer">google chrome sourcecode</a>.</p>

<p>I am not convinced that the error is bug. When I try in firefox, I get <em>Corrupted Content Error</em> screen. It occurs when I handling fetch event for the project root:</p>

<pre><code>self.addEventListener('fetch', function(event) {
  // Nice url
  var requestURL = new URL(event.request.url);
  console.log("Request for: ", requestURL.href);
  // Network, then cache, then fallback
  event.respondWith(
    // Try to download
    fetch(event.request)
      .then(function(x) {
        console.log("    "+requestURL.href+" &gt;&gt; ",x);
        // If failed the x will not be ok
        if(x &amp;&amp; x.ok) {
          // If result was ok save it to cache
          cache.put(event.request, x);
          return x;
        }
        else
          // Try to fetch cached version if request failed
          return cache.match(event.request);
      })
      // In case of error return something like 404 page
      .catch(function(error) {
        console.warn("    "+requestURL.href+" &gt;&gt; UNAVAILABLE: ",error);
        return cache.match('/page/content-not-available-offline');
      })
  );
});
</code></pre>

<p>I'm not sure what the body locked error means, so I don't even know what code is relevant.</p>