Provide details on how Quicklink works with cache-control headers and service workers
See original GitHub issueIs 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:
- Created 4 years ago
- Comments:5 (3 by maintainers)
Top GitHub Comments
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.We’ve just released a new guide covering prefetching techniques with service workers:
https://dev.to/drenzulli/prefetching-techniques-with-workbox-3bpc