larlet-fr-david/david/stream/2018/04/15/index.md

title: Cache workers
lang: en

> A service worker is like a cookie. Cookies are downloaded from a web server and installed in a browser. […] A service worker script is much more powerful. It contains a set of instructions that the browser will consult before making any requests to the site that originally installed the service worker.
>
> A service worker is like a virus. When you visit a website, a service worker is surreptitiously installed in the background. Afterwards, whenever you make a request to that website, your request will be intercepted by the service worker first. […]
> 
> A service worker is like a toolbox. By itself, a service worker can’t do much. But it allows you to access some very powerful browser features, like the Fetch API, the Cache API, and even notifications. […]
> 
> <cite>*[Going Offline](https://alistapart.com/article/going-offline)* ([cache](/david/cache/c17a5fe631daf80fc5938d1a2d2569a3/))</cite>

I have been playing with [Service Workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers) for a [long time](/david/stream/2015/02/13/) with a [couple of unresolved issues](/david/stream/2015/11/24/) still refraining me from pushing it to production. With a current support of [almost 75%](https://caniuse.com/#feat=serviceworkers) and a potential professional usage, it is time to try something real on my lab for these last 14 years and counting: this place.

It only applied to recent pages and put *(cache)* links into… cache. It means that if you loaded an article and go offline, you will still be able to read cached versions of external links. I also put previous/next links so you have close articles to read too. It looks to be a good trade-off to me given the few extra kilobytes fetched that way. I limited the cache to 25 elements for now, let me know if it hurts your bandwidth.

It started as a 30 minutes experiment and ended up 8 hours later with a rather unstable implementation. Not bad. My main gripe was to actually be able to clear the cache at each and every levels when testing. Such a nightmare, browsers need a new refresh *really* everything keyboard shortcut to ease our attempts to [break the refresh button](https://twitter.com/markdalgleish/status/921515267804487680). Please.

The hardest technical part was to be able to communicate between the current page and the service worker to select dynamically which links I want to put in cache. And back to current page, to display some valuable feedback to you when links are in cache. I hope it makes sense given the time I spent on it :-D.

There are surely a few gotchas here and there, please report any inconsistent situation by email…

*I should write an article about that. French or English?*