question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Provide details on how Quicklink works with cache-control headers and service workers

See original GitHub issue

Is your feature request related to a problem? Please describe.

Cache-Control headers can affect prefetching, making the experience of implementing Quicklink vary, depending on the developer backend / CDN configuration, without s/he knowing what’s happening.

We know that: “Prefetched files are stored in the HTTP Cache, or the memory cache (depending on whether the resource is cacheable or not), for an amount of time that varies by browsers. For example, in Chrome resources are kept around for five minutes, after which the normal cache-control rules for the resource apply.”

This means that:

  • max-age=<XX seconds>: Keeps the resource in the cache for 5’ + XXs.
  • max-age=0: Keeps the resource in the cache only for 5’.

And that (according to #21):

  • no-cache: Doesn’t prevent keeping the resource in cache.
  • no-store: Prevents keeping the resource in cache.

Haven’t tested yet the rest of the cache-control directives.

Additionally, it would be good to check how service workers treat prefetched files on strategies like networkOnly(). Intuitively, if the SW fails to retrieve the resource from the SW cache, it will check first in the prefetch cache, before going to the network.

Describe the solution you’d like We can write some Glitch tests for each variation to make sure they work according to our assumptions, and documenting them more clearly. Since this implementation doesn’t seem to be defined in the spec and is browser-dependent, we might have to guess how each browser behaves.

Additional context We’ve received questions from some developers, on cases where prefetched files were being requested by Quicklink, but not picked up by the browser when clicking on links.

cc // @antoinebisch

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
demianrenzullicommented, Jan 2, 2020

Hi @gijo-varghese! That seems to be the case.

In fact, if you open this link and run the test suggested before, you’ll notice that in-viewport links are fetched, but, when clicking on them, they are not picked up from the prefetch cache.

If you inspect the response headers for the product page, the new demo uses Cache-Control: no-store, which is prevented that from happening.

0reactions
demianrenzullicommented, Jan 28, 2020

We’ve just released a new guide covering prefetching techniques with service workers:

https://dev.to/drenzulli/prefetching-techniques-with-workbox-3bpc

Read more comments on GitHub >

github_iconTop Results From Across the Web

Service worker caching and HTTP caching - web.dev
A service worker intercepts network-type HTTP requests and uses a caching strategy to determine what resources should be returned to the browser ...
Read more >
Cache-Control - HTTP - MDN Web Docs
The Cache-Control HTTP header field holds directives (instructions) — in both requests and responses — that control caching in browsers and ...
Read more >
What is Cache-Control and How HTTP Cache Headers Work
Cache -control is an HTTP header used to specify browser caching policies in both client requests and server responses. Policies include how a...
Read more >
Guide for Caching and HTTP Cache Headers for Static Content
The Cache-Control header has a lot of other directives to control the cache behavior. To specify the time for which the content can...
Read more >
If you are using Service Workers do you still need cache ...
Absolutely. HTTP cache, which is controlled by HTTP cache headers sits between the network and the service worker.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found