Why does fetch request have to be cloned in service worker?

Question

In one of the Service Worker examples by Google, cache and return requests

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }

        // IMPORTANT: Clone the request. A request is a stream and
        // can only be consumed once. Since we are consuming this
        // once by cache and once by the browser for fetch, we need
        // to clone the response.
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
          function(response) {
            // Check if we received a valid response
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the browser to consume the response
            // as well as the cache consuming the response, we need
            // to clone it so we have two streams.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});

---

On the other hand, the example provided by MDN, Using Service Workers, does not clone the request.

this.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(resp) {
      return resp || fetch(event.request).then(function(response) {
        caches.open('v1').then(function(cache) {
          cache.put(event.request, response.clone());
        });
        return response;
      });
    }).catch(function() {
      return caches.match('/sw-test/gallery/myLittleVader.jpg');
    })
  );
});

---

So in the case of a cache miss in the Google example:

I understand why we have to clone the response: because it's consumed by cache.put, and we still want to return the response back to the webpage who requested it.

But why does one have to clone the request? In the comment it says it's consumed by cache and the browser for fetch. What does it mean exactly?

• Where in the cache is the request stream consumed? cache.put? If so, why doesn't caches.match consume the request?

Answer 1

The comment seems to me to say quite clearly why the author of that code thought cloning was necessary:

A request is a stream and can only be consumed once. Since we are consuming this once by cache and once by the browser for fetch, we need to clone the response.

Remember that the body of a request can be a ReadableStream. If cache.match had to read the stream (or partially read the stream) to know whether a cache entry was a match, a subsequent read by fetch would continue that read, missing any data that cache.match read.

I wouldn't be surprised if it only mattered in limited situations (unless the code in the Google example is just plain wrong and it's not necessary), and so failing to do it probably works in many test cases (for instance, where the body is null or a string, not a stream). Remember that MDN is very good, but it is community-edited, and errors and poor examples do creep in periodically. (I've had to fix several blatant errors in it over the years.) Usually the community spots them and fixes them.