Service Worker notes

Here’s a disconnected hodge-podge of things related to Service Workers I’ve noticed recently…

Service Workers have landed in Firefox. When it was first unveiled in a nightly build a few people spotted some weird character issues on sites like mine that are using Service Workers, but that should all be fixed in the next release.

A while back I voted up Service Workers on Microsoft’s roadmap for Edge. I got an email today to say that the roadmap priority is high:

We intend to begin development soon.

We’re getting there.

Here’s a little gotcha that had me tearing my hair out until I tracked down the culprit: don’t use Header append Vary User-Agent in your site’s Apache config file. I don’t know why it snuck in there in the first place, but once I removed it, it fixed a weird issue that Aaron T. Grogg pointed out to me whereby my offline page would get cached, but not my CSS.

I really like this proposal for:

<link rel="serviceworker" href="/serviceworker.js">

It makes sense to me that I should be able to point to the Service Worker of a page in the same way that I point to a style sheet. It makes sense as a rel value too: “the linked resource has the relationship of ‘serviceworker’ to the current document.”

Also, I’m just generally a fan of declarative solutions. This feels like another good example of functionality that starts life in an imperative language (JavaScript) and then becomes declarative over time (see also: :hover, the required attribute, etc.).

Lyza wrote a fantastic article on Smashing Magazine that goes into all the details of her Service Worker. I must admit to feeling extremely gratified when she wrote:

First, I’m hugely indebted to Jeremy Keith for the implementation of service workers on his own website, which served as the starting point for my own code.

Going through her code, she made this remark:

Note: I use certain ECMAScript6 (or ES2015) features in the sample code for service workers because browsers that support service workers also support these features.

That’s a really good point. I haven’t messed around much with ES6 HipsterScript stuff partly because I haven’t yet set up a transpiler, so it was nice to know that my Service Worker is a “safe space” to try some stuff out in the browser. I refactored my JavaScript to use const, let, and =>.

Jake is looking for feedback on a specific part of Service Worker functionality around URLs. If I can wrap my head around what’s being described, I’ll chime in.

Finally, I had a nice little Service Worker moment earlier today. I was doing some updates on my web server that required a reboot. When I checked in Chrome to see how long was down, I was surprised to see that the downtime appeared to be …zero. “That’s odd” I thought, “How can my site still be reachable if the server is …oh!” That’s when I realised I was seeing a cached version of my homepage. My Service Worker was doing it’s thing.

I had been thinking of Service Workers as a tool to help in situations where the user agent goes offline. But of course it’s an equally useful tool for when the server goes offline. This was a nice reminder of that.

Have you published a response to this? :


Aaron T. Grogg

Pure CSS tribute to Mr. Dylan… Thank you, Mr. Keith… :-)

Nice walk-through of JS‘s classList from . Support is certainly looking good, with only IE10, 11 and Mobile partially supporting it.

continues the theme with these 5 Ways that CSS and JavaScript Interact That You May Not Know About.

Was wondering how long this would take:

Pressure.js… is a JavaScript library that makes dealing with Apple’s Force Touch and 3D Touch simple.

Great collection of Service Worker resources & notes from (and not just because he mentions me… :-P ).

Please especially take note of Microsoft Edge’s intent to include Service Worker. And you can help convince them! :-)

Okay, one more from Jeremy, as he has one more note on Handling redirects with a Service Worker

And as long as we’re talking about cutting-edge JS, here is an entire battery of articles on getting started, being productive, and moving beyond, with React…

  1. From SitePoint, Building a React Universal Blog App: A Step-by-Step Guide, by , starts from the very beginning (creating the directory), provides the starting package.json file, and marches right through code sample after code sample, to get you completely set-up and running!
  2. From CSS Tricks, I Learned How to be Productive in React in a Week and You Can, Too, by , offers a fresh set of eyes, debunks a few myths about React, and also walks through code sample after code sample to demonstrate how to get up and running!
  3. Then shares 9 things every React.js beginner should know; I always feel like I should read these kinds of lists before I get started with a tech, but then it often makes no sense until I start digging in… You decide your approach.
  4. Next, starts a series on Performance Engineering with React. Always good to know performance DOs from the get-go, I feel.
  5. From, hopefully these React and Redux Cheatsheets will come in handy during early navigation!
  6. And finally, comes MERN, which “is a scaffolding tool which makes it easy to build isomorphic apps using Mongo, Express, React and NodeJS.” Pretty sweet!!


Nice series about the Web Animations API. The entire series is complete, so you can binge-read start to finish as soon as you finish reading this! ;-)

is so cool… She wrote an article simply titled The `background-clip` Property and its Use Cases, which indeed begins by explaining background-clip, then showing a few very primitive explanation demos. All very nice. Then she proceeds to just slam us in the face with increasingly awesome examples by adding CSS filters and creating skeuomorphic form controls… Amazing…

And finally, reader shares his article How to Speed Up Your WordPress Blog & Make it Insanely Fast. I think most of these are well-covered, but it cannot hurt to reiterate something so important!

Happy reading, Atg