Cache

Or maybe just to show appreciation for this API? At least I do :P

I kind of like when things randomly show up on the frontpage that I _should_ know about. Today was my turn to be part of the lucky 10,000.

https://xkcd.com/1053

this poster seems to just spam random stuff from mdn and his personal project over and over. you can see that he even added a spam comment to this post asking for stars on his github project.

edit: op deleted his beg comment after it was flagged dead

This API is used heavily in service workers to store responses for offline use. I don‘t think you can use HTTP cache headers to robustly achieve the same effect.

I created an SRS based kanji learning app (https://shodoku.app/ https://github.com/runarberg/shodoku) hosted on GitHub Pages (meaning the app is a static HTML page) where all the dictionary data is stored as hundreds of thousands of json (and SVG) files. Storing these assets using the Cache API saves tens of thousands of round trips to the server in addition to offering a somewhat robust offline experience.

This API is pretty useful for writing web apps that also work offline/with bad connectivity. It saves you from re-implementing the browser fetching/resource loading logic the browser already does for you.

It's very powerful, which also makes it a footgun: you can end up with fetch() requests going out over the network, with server responses saying one thing, but the frontend receiving something completely differently.

As for examples, I believe Home Assistant uses it to cache pretty much every resource in the frontend pre-emptively so you can use the web UI even if your internet connection is down (but your connection to your home server isn't).

HuggingFace’s Transformers.js uses this API to cache model files for when you are running models in the browser.

> Cache is super useful for making web apps available offline.

... until you find someone who has very low cache available. Or cache gets evicted.

Making a web app work fully offline requires a Service Worker, if for no other reason than because something has to handle the initial request for the top-level HTML document (and in practice it's much easier to let the Service Worker handle other things too). TanStack doesn't seem to have anything available out of the box that does this; the most commonly used library for this purpose is Google's Workbox, and it should be possible to integrate the two.

I encourage everybody to not use service workers so my computer doesn't waste resources.