Clearleft.com is a progressive web app

What’s that old saying? The cobbler’s children have no shoes that work offline. Or something.

It’s been over a year since the Clearleft site relaunched and I listed some of the next steps I had planned:

Service worker. It’s a no-brainer. Now that the Clearleft site is (finally!) running on HTTPS, having a simple service worker to cache static assets like CSS, JavaScript and some images seems like the obvious next step.

You know how it is. Those no-brainer tasks are exactly the kind of thing that end up on a to-do list without ever quite getting to-done. Meanwhile I’ve been writing and speaking about how any website can be a progressive web app. I think Alanis Morissette used to sing about this sort of situation.

Enough is enough! Clearleft.com is now a progressive web app. It has a manifest file and a service worker script.

The service worker logic is fairly straightforward, and taken almost verbatim from Going Offline. As you navigate around the site, the service worker applies different logic depending on the kind of file you’re requesting:

  • Pages are served fresh from the network, falling back to the cache when there’s a problem.
  • Everything else is served from the cache where possible, resorting to the network only if there’s no match in the cache—quite the performance boost!

In both cases, if a page or a file is retrieved from the network, it’s gets put into a cache. I’ve got one cache for pages, and another for everything else. And even if a file is retrieved from that cache, I still fire off a fetch request to grab a fresh copy for the cache. So while there’s a chance that a stale file might be served up, it will only ever be slightly stale, and the next time it’s requested, it’ll be fresh.

In the worst-case scenario, when a page can’t be retrieved from the network or the cache, you end up seeing a custom offline page. There you can see a list of any pages that are cached (meaning you can revisit them even without an internet connection).

A custom offline page showing a list of URLs.

It’s not ideal—page titles would be friendlier than URLs—but it’s a start. I’m sure I’ll revisit it soon. Honest.

Oh, and after a year of procrastinating about doing this, guess how long it took? About half a day. Admittedly, this isn’t my first progressive web app, and the more you build ‘em, the easier it gets. Still, it’s a classic example of a small investment of time leading to a big improvement in performance and user experience.

If you think your company’s website could benefit from being a progressive web app (and believe me, it definitely could), you have a couple of options:

  1. Arm yourself with a copy of Going Offline and give it a go yourself. Or
  2. Get in touch with Clearleft. We can help you. (See, I can say that with a straight face now that we’re practicing what we preach.)

Either way, don’t dilly dally …like I did.

Have you published a response to this? :

Responses

Previously on this day

3 years ago I wrote eLife goes live

Collaborating on a pattern library.

5 years ago I wrote 100 words 075

Day seventy five.

15 years ago I wrote It's good to talk

If, like me, you’ve spent most of your waking hours for the past few months living, eating and breathing JavaScript, you might welcome the opportunity to talk with some like-minded folks. Even if you’re not quite that sad, you still might like

17 years ago I wrote Truth! What is it good for?

I found it ironic when James Lileks yesterday referred to a cartoon by saying “when it gets political it’s just embarassing”. This pretty much sums up how I feel about Lileks’ Daily Bleats.

18 years ago I wrote eMac - the E is for Everybody

I see that Apple have opened up the eMac to everyone - not just the education sector.

18 years ago I wrote Mirror Project pictures

It’s hard to believe that the weather so nice just a couple of days ago when I took this picture of myself reflected in Jessica’s sunglasses.

18 years ago I wrote Back to normal

I had my moment in the limelight with Salter Cane last night. All in all, it went really well.