Chrome service worker not intercepting cached requests

Question

I have this simple test website https://service-worker-test.app.baqend.com/ that displays 200 images next to eachother. It registers a very simple service worker. The HTML looks like this:

<html>
<style>
  img {
    width: 50px;
    width: 50px;
    float: left;
    padding: 5px;
 }
</style>
<head>
    <title>Service Worker Test</title>
    <script type="text/javascript">
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('sw.js');
      }
    </script>
</head>
<body>
  <div class="row">
    <img src="/img/1.jpg"/>
    <img src="/img/2.jpg"/>
    ...
    <img src="/img/200.jpg"/>
  </div>
</body>
</html>

The service worker contains only a handler for the fetch event that prints out the url of the requests that it sees:

self.addEventListener('fetch', (event) => {
  console.log('fetching: ' + event.request.url);
});

That's it. Now the first load in chrome installs the service worker. When I do the second load the service worker prints the HTML request and all 200 image requests to the console like this:

fetching: https://service-worker-test.app.baqend.com/
fetching: https://service-worker-test.app.baqend.com/img/1.jpg
fetching: https://service-worker-test.app.baqend.com/img/2.jpg
fetching: https://service-worker-test.app.baqend.com/img/3.jpg
....
fetching: https://service-worker-test.app.baqend.com/img/200.jpg

If I check the Disable Cache checkbox in the Network tab, all further loads do the same thing (make sure to clear the console after each load).

The problem now is: when the browser cache is not disabled, after a few loads the service worker will only print the following :

fetching: https://service-worker-test.app.baqend.com/

and nothing else. Also when debugging the service worker, only the HTML request is handled in the fetch event listener.

My question is why can't the service worker in chrome see requests when they are served from the browser cache?

Btw. the code works fine in firefox.

I'm using Chrome Version 59.0.3071.86 on Mac OS Version 10.11.6 (15G1421)

It sounds like you're describing a bug in Chrome. Providing details at bugs.chromium.org/p/chromium/issues/entry would probably be the best next step. — Jeff Posnick
Thanks, did it: bugs.chromium.org/p/chromium/issues/detail?id=732344 — Erik
I'm voting to close this question as off-topic because it's a bug report for Chrome. — Jeff Posnick

Erik Erik · Accepted Answer · 2018-10-23T15:16:22

The behavior described above is caused by the in-memory cache in Chrome's rendering engine Blink. All requests served from the in-memory cache do not pass through the Service Worker because they are not actually issued as requests as they are still in the in-memory cache that lies before the Service Worker.

This article by Jake Archibald about server push also illustrates an "image cache" before requests hit the Service Worker.

The in-memory cache obeys HTTP caching semantics and is scoped to the current tab. Besides images, it also stores styles, scripts, and fonts. Other than that, there is very little information about the implementation of this cache. There are weird things though: What does Blink in-memory cache store?

Chrome service worker not intercepting cached requests

1 Answers