
I wrote a book about service workers for web designers. It’s called Going Offline and it’s available in paperback and digital formats:
https://abookapart.com/products/going-offline
I think you’ll like it.
I wrote a book about service workers for web designers. It’s called Going Offline and it’s available in paperback and digital formats:
https://abookapart.com/products/going-offline
I think you’ll like it.
In Going Offline, I dive into the many different ways you can use a service worker to handle requests. You can filter by the URL, for example; treating requests for pages under /blog
or /articles
differently from other requests. Or you can filter by file type. That way, you can treat requests for, say, images very differently to requests for HTML pages.
One of the ways to check what kind of request you’re dealing with is to see what’s in the accept
header. Here’s how I show the test for HTML pages:
if (request.headers.get('Accept').includes('text/html')) {
// Handle your page requests here.
}
So, logically enough, I show the same technique for detecting image requests:
if (request.headers.get('Accept').includes('image')) {
// Handle your image requests here.
}
That should catch any files that have image
in the request’s accept
header, like image/png
or image/jpeg
or image/svg+xml
and so on.
But there’s a problem. Both Safari and Firefox now use a much broader accept
header: */*
My if
statement evaluates to false
in those browsers. Sebastian Eberlein wrote about his workaround for this issue, which involves looking at file extensions instead:
if (request.url.match(/\.(jpe?g|png|gif|svg)$/)) {
// Handle your image requests here.
}
So consider this post a patch for chapter five of Going Offline (page 68 specifically). Wherever you see:
if (request.headers.get('Accept').includes('image'))
Swap it out for:
if (request.url.match(/\.(jpe?g|png|gif|svg)$/))
And feel to add any other image file extensions (like webp
) in there too.
Checked in at The Burren. Sunday session — with Jessica
This looks like a really good (and free!) online book all about design ops.
(Alas, it is, once again, driven by janky JavaScript that makes it a bit of a chore to scroll and read.)
Dave is liking the word “telepresence”:
On social media we broadcast our presence and thoughts over radio and wire and I likewise consume your projections as they echo back to me. We commune over TCP/IP.
Just wait until he discovers the related neologism coined by Ted Nelson.