Sapper loading resources repeatedly

[sergmister]

Describe the bug Running the default Sapper example app ass explained here in "production mode" produces seemingly strange behavior. When I open the network tab in chrome dev tools with the cache enabled in the blog section whenever I hover over a link it will fetch that page, regardless of whether that page has already been fetched. This will cause the browser to load multiple duplicates of the same resourse as seen here.

Also, if the cache is disable whenever I navigate to the home page it will fetch the image repeatly and twice each time quickly accumulating bandwidth and memory usage.

To Reproduce Simply load the example Sapper project in production mode and view resources under Network tab with chrome dev tools as you hover your mouse back and fourth over the blog links causing prefetches. Turn off cache and go back and forth to the home page to see the image resource multiply.

[regnaio]

In service-worker.ts, does replacing the function fetchAndCache with this resolve the issue?

async function fetchAndCache(request: Request) {
  const cache = await caches.open(`offline${timestamp}`);

  try {
    let response = await cache.match(request);
    if (response) return response;

    response = await fetch(request);
    cache.put(request, response.clone());
    return response;
  } catch (err) {
    const response = await cache.match(request);
    if (response) return response;

    throw err;
  }
}

[sergmister]

Before: After:

So it is helping but not completely mitigating the issue. Something is still being fetched with the initiator client...

[regnaio]

Ah yes, I'm also seeing that prefetches are showing duplicate fetches in the Chrome Network tab

[mquandalle]

I'm also experiencing this issue, did you find any fix?