Tags: image

2141

sparkline

Sunday, June 17th, 2018

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.

Detecting image requests in service workers

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 map

Checked in at The Burren. Sunday session — with Jessica

Saturday, June 16th, 2018

Travel advisory notice for Tusken Raiders travelling with gaffi sticks.

Travel advisory notice for Tusken Raiders travelling with gaffi sticks.

Friday, June 15th, 2018

Nodding my head in vigorous agreement with @meyerweb’s @cssdayconf talk. “The web is the most hostile environment to developer assumptions imaginable.”

Nodding my head in vigorous agreement with @meyerweb’s @cssdayconf talk.

“The web is the most hostile environment to developer assumptions imaginable.”

Monday, June 11th, 2018

Help! I’m trapped in a stock photo!

Help! I’m trapped in a stock photo!

In London with the beardy contingent of @Clearleft. Beardleft.

In London with the beardy contingent of @Clearleft.

Beardleft.

Sunday, June 10th, 2018

Checked in at The Foundry. Sunday session. 🎶 map

Checked in at The Foundry. Sunday session. 🎶

Seasonal salads.

Seasonal salads.

Grilling asparagus.

Grilling asparagus.

Friday, June 8th, 2018

Periodically auditing clearleft.com — the journey is the destination…

Periodically auditing clearleft.com — the journey is the destination…

Wednesday, June 6th, 2018

Checked in at Royal Opera House. Swan Lake — with Jessica map

Checked in at Royal Opera House. Swan Lake — with Jessica

Tuesday, June 5th, 2018

Progressive web apps on my home screen.

Progressive web apps on my home screen.

Monday, June 4th, 2018

Kicking off a discovery phase with a nice big project canvas (that will be covered in post-it notes by the end of the day).

Kicking off a discovery phase with a nice big project canvas (that will be covered in post-it notes by the end of the day).

Saturday, June 2nd, 2018

Checked in at Goemon Ramen Bar. with Jessica map

Checked in at Goemon Ramen Bar. with Jessica

Learning about the life cycles of stars from @c_r_angus on Brighton seafront. #soapboxscienceBN

Learning about the life cycles of stars from @crangus on Brighton seafront. #soapboxscienceBN

Tuesday, May 29th, 2018

Checked in at The Joker. Beer, book, and candle. map

Checked in at The Joker. Beer, book, and candle.

Sunday, May 27th, 2018

Checked in at The Foundry. Tunes and a pint map

Checked in at The Foundry. Tunes and a pint

Back in Brighton after a very pleasant few days in Warsaw hanging out with the lovely people of @FrontTrends.

Back in Brighton after a very pleasant few days in Warsaw hanging out with the lovely people of @FrontTrends.

Venison with rosemary and juniper.

Venison with rosemary and juniper.