1) For Cloud Storage you'd better put hash before the filename to increase throughput. 2) The 3 realms files (index.html, sw.js, worker.js) will probably embed a custom importmap, thus need to be served with a cache-control: no-store. But pro-tip, in sw.js and worker.js, you can just use a single instruction : importScripts / await import of a hashed file, and bam you get best of both worlds : Fresh file, but cached content.
i was hoping to hear some techniques for pre-caching here. like quickly caching assets for the next page before the user clicks on them so they load instantly. but still it was a good talk
Forgive me if I misunderstood something. 18:00 *About http caching and file name* If I understood correctly, the speaker says that the use of a hash in the file name somehow affects the browser's caching behavior. I understood what the speaker said as - a file with name "filename.css" will not be able to be cached for long. Conversely, the file "filename -34523542.css", on the contrary, will be cached for a long time. *If this is exactly what the speaker wanted to say, then he is wrong* HTTP caching depends only on the HTTP headers. The cache does not depend on the file name. The browser will work the same for file filename.css and file filename-34523542.css. How exactly it will work is determined by the headers: cache -control etag last -modefied expires and so on. And no change in the file name can affect this fact. The exception is when the site uses a service worker who can independently decide how it relates to the response headers.
Thanks for the feedback, but at about 14:35 I say "but of course, just remaining a file like this doesn't mean anything to the browser", and I explain that you have to set a header.
1) For Cloud Storage you'd better put hash before the filename to increase throughput.
2) The 3 realms files (index.html, sw.js, worker.js) will probably embed a custom importmap, thus need to be served with a cache-control: no-store. But pro-tip, in sw.js and worker.js, you can just use a single instruction : importScripts / await import of a hashed file, and bam you get best of both worlds : Fresh file, but cached content.
Ikkjj2jlk
Thank you so much for this Sam, caching strategy is one of the harder problems I've faced when implementing a service worker for a PWA.
Great overview. Only thing I didn't understand was caysh ;)
We pronounce it the other way here in Australia. I tried to use both pronunciations just to keep everyone on the level :)
caysh vs cash
Yep, cache is a lifesaver! Thanks for awesome videos ♥️
Should be mentioned that immutable asset hashes also help with SRI.
Could you provide code snippet for hashFor in eleventy?
good dira luke
woohoo, 11ty.js ....Thumps up
Is this a good case to use Snowpack? 🧐
i was hoping to hear some techniques for pre-caching here. like quickly caching assets for the next page before the user clicks on them so they load instantly. but still it was a good talk
Forgive me if I misunderstood something.
18:00 *About http caching and file name*
If I understood correctly, the speaker says that the use of a hash in the file name somehow affects the browser's caching behavior.
I understood what the speaker said as -
a file with name "filename.css" will not be able to be cached for long.
Conversely, the file "filename -34523542.css", on the contrary, will be cached for a long time.
*If this is exactly what the speaker wanted to say, then he is wrong*
HTTP caching depends only on the HTTP headers. The cache does not depend on the file name.
The browser will work the same for file filename.css and file filename-34523542.css.
How exactly it will work is determined by the headers: cache -control etag last -modefied expires and so on.
And no change in the file name can affect this fact.
The exception is when the site uses a service worker who can independently decide how it relates to the response headers.
Check out around 14:35. He mentions that you need to use http headers anyway.
Thanks for the feedback, but at about 14:35 I say "but of course, just remaining a file like this doesn't mean anything to the browser", and I explain that you have to set a header.
#holistic lol
I need to see code or else your words are useless.